Layout change for landscape/portrait

Question

I have 1 storyboard and I am using Auto Layout with Size Classes on Xcode 8 in Swift 3.

I have this current view for portrait:

Currently, this is 1 vertical stack view with labels in it.

In landscape, there is a lot of wasted space on the left/right side, plus I am currently hiding data due to screen size:

What I want to accomplish is basically instead of having everything stacked, I want the "In Front" data on the left side of the screen, then in the center screen have "Your Laptime". Then on the right side have "Behind you".

Whats the best way to accomplish this? I am coming from Android development where I would just have another layout for each orientation, but I couldnt find anything similar on iOS.

Answer 1

You can vary by traits. Here is a long walkthrough of one way to do it. Hope this all makes sense but there are several ways with Autolayout to do this.

Step 1. Drag a view onto the storyboard and pin to top layout guided, leading,trailing and bottom at 0. We will need this later to center everything.

Step 2. Drag Another view that will hold all of our content. And pin it to the edges at say 20 points for top, bottom, leading, and trailing. Note: We will be adding some more constraints and changing this later so just take note.

Step 3. Drag another view on to the screen and add 3 uilabels to it. Click the top label and add the constraints in the image.

Step 4. Select the second label down and add bottom-10, leading and trailing 0. No need for top because it was added in step 3.

Step 5. Repeat for bottom label the same as step 4 add the 3 constraints.

Step 6. Click this entire view and go to the top menu and select Embed in StackView. See Image

Step 7. Add a UILabel above it to hold the Lap Text and pin it to the top 20, leading,trailing at 0, and bottom which is the stackview at 20. See Image

Step 8. Now pin the stackview to leading 0,trailing 0, bottom- 0 or 20.

Step 9. Duplicate the view with the labels 2 Times and drag them using the viewhierchy editor on the left into the stackview so now your stackview has 3 views. It should now look like the image.

Step 10. Now change every label in the entire view to have a content hugging vertical of 1000. Also change the font on each to desired font and also set so that the font can shrink to a factor of say 0.5. See Image for content hugging setting.

Step 11. Now go back to the original container that is holding the UILabel and the stackview and change all the constraints of 20 to >= to in the editor and add and drag to the view holding the container(gray in the images) and choose center vertically and center horizontal. I combined image showing the different menus is attached below.

Step 12. Add variations for the stackview and the correct setup. Click the plus beside axis and add this.

[![TraitAxis][9]][9]

Step 13. Now add another variation for Alignment and your final stackview setup should look like this.

The payoff will look like this. Provided you have set the fonts you want and allow them to scale. I deleted some of the extra labels to match your image and when doing so I had to pin the remain bottom label to the labels container. You probably will have to add another alignment variation for Plus devices but that would be just adding the variations like in the final steps. You might also have to resolve some lower priority on labels but I think clicking and saying ok will get that done. Just do whatever it tell you to do. I hope this helps. You could also nest stack views and the layout might be easier. Like I said there are probably many more ways to accomplish this but this should get you on the right path.