I am trying to create a layout with two views- denoted by the purple and red boxes in the attached image. I want the position of the views to basically lock, such that when the phone rotates the two views remain in the same spot.
I can't figure out how to do this in swift storyboard. I've seen some similar posts, but they don't seem to apply to Xcode 13.
Desired result:
Step 1: Create Portrait view the usual way, using proper constraints. For example I had this:
Step 2: Click Orientation button at the bottom of the view to flip the view to landscape
Step 3: Add a variation for all constraints that require to be different on horizontal view. For example in my example "SmallerView.leading = Safe Area.leading" is still fine (needs no variation), but "SmallerView.trailing = Safe Area.trailing" makes no sense in horizontal view, I need "SmallerView.trailing = LargerView.leading" instead. So I need to add variation to both, "SmallerView.trailing = Safe Area.trailing", and "LargerView.leading".
To do that, I simply open Attributes Inspector for a constraint I need to vary, find the word Installed, and click on Add Variation (+ button) on the left of it:
The variation I want to add is for Compact Height, and either Regular or Any Width (depends on which devices you are planning to support). Click Add Constraint.
Now I see this:
But I want to use this constraint only in Portrait view, so I need to uncheck hC:
Do the same for all other constraints that won't work for Horizontal view.
Step 4: Now I need to add constraints specific to horizontal view. To do that, switch to horizontal view (the Orientation button at the toolbar at the bottom)
You will now see your constraints with some of them disabled:
And now you can add missing constraints. For example in my case I added 3 new constraints:
Step 5: Switch to Portrait, and now disable those additional constraints from step 4 in portrait mode. This time you uncheck Installed that has no hC prefix:
That's it. Check Class Sizes to know when you should use Regular or Compact exactly.