0
votes

I used this answer (XCode: How to change layout of views between landscape and portrait mode) in order to create a storyboard that stacks an Image View and Table View on top of each other in portrait mode and side by side in landscape mode. Everything works great in Xcode when I change the orientation. Additionally, it works great on the simulator for an iPhone 11. However, when I install and run on my physical iPhone X, the portrait mode displays fine, but when going to landscape, the side by side display appears to fly off the screen and all I see is the navigation bar. I've also reproduced this without the navigation bar.

I apologize in advance if the screenshots I'm including are insufficient to troubleshoot this issue and am happy to provide anything else.

Below are the screenshots showing the varying constraints (and common ones) for each orientation.

Steps to create were:

  1. Add an image view to the View Controller of a new project.
  2. In portrait orientation click "Vary for Traits", select both "Height" and "Width".
  3. Add leading, top, and trailing constraints and a height.
  4. Click "Done Varying"
  5. Change orientation to landscape
  6. In landscape orientation click "Vary for Traits", select both "Height" and "Width".
  7. Add leading, top, and bottom constraints and a width.
  8. Click "Done Varying"
  9. Works on storyboard and simulator
  10. Doesn't work on physical device

Portrait Constraints

Landscape Constraints

1

1 Answers

0
votes

So there ended up being a simple solution thanks to an article over at medium (https://medium.com/swlh/how-to-create-adaptive-views-combining-uistackview-and-autolayout-902d5e1eab05). The solution written as is did not work, but the concept of using a Stack View and adding a variation on its axis was perfect. The only implementation change I had to make was to add the variation for a width of Any (not Regular) and a height of Compact. I'm not sure why adding width of regular to the variation wouldn't work. Any insight on that would be appreciated.

Here's a screenshot of the added variation on the stack view.

Stack View Axis Variation