I use UIKit and would like to have a completely different interface depending on the app orientation. I actually have 4 buttons on a view, here is how I want to display them:

I know that I can play around with trait variations, setting two different constraints and installing one for regular height and the other for compact height, but I don't know how to do such a different layout in that case.

Thank you for your help

CodePudding user response：

My idea is to group buttons 1 2 & 3 4 into StackView. Setup for StackView different axises for different orientations.

Check out

Embed Buttons 1 & 2 in a stack view, and embed Buttons 3 & 4 in a stack view:

Give each stack view these settings:

Now, embed the two stack views in another "outer" stack view:

Same stack view settings:

and constrain this "outer" stack view Leading / Trailing / Bottom at 40-pts.

Next, select the Buttons 1 & 2 stack view, and in the Attributes Inspector pane click the to the left of Axis and change Width to Any and Height to Compact:

Click Add Variation and it will look like this:

Change the hC: Vertical to hC: Horizontal:

Do the same thing with the 3 & 4 stack view.

Now when you rotate the device, it will look like this:

Adjust the constraints and your stack view Spacing from 40 to your desired values.

No code needed - everything is handled by auto-layout!