Mastering Auto Layout - Part 11: Conclusion | Ray Wenderlich

🎓 Courses & Articles
1

Recap what you’ve learned in this Mastering Auto Layout series and check out a few Auto Layout tips as well.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3933-mastering-auto-layout/lessons/11
2

These tutorials are very helpful.
I learned a lot about complicated layout and adaptive layout.
I will be able to improve the quality of my apps.
Thanks.

3

Thanks! Glad they’re helpful.

4

Good series, I really liked the Debugging and the Adaptive layout environment episodes.Thank you !

I have a question regarding the Size Classes challenge. I tested an alternative way:

  1. I embed the starting layout in 2 stack views, one inner for the 2 smaller views, and one outer comprising the green view and the inner stack.
  2. Then I vary for traits for regular width, and add a new stack view embedding the grey view and the inner stack view. The new layout is done.
  3. However when I click done, and revert to compact width, I notice the stack views are not correctly installed for the traits, my layout for compact width became a real mess!!!

Is vary for traits allergic to multiple embedded stack views? Or is it just me ? (I did it 3 times with the same results)
What’s your take on that?

5

Excellent series! Still much to learn about auto layout, but this definitely helps.

6

If you have a sample, I can take a look. I’m not sure, but it sounds like you’re saying the stack view with the gray view is only installed in regular width. I would add all the stack views you want to use as the base layout and only install/uninstall the child views as part of a size class variation.

7

Ok, I am going to do it the way you suggest, and I let you know.

8

Hi Jerry,

I followed your advice and managed to come close. However an interesting challenge came up. I"ll sum it up:

  1. I create a very simple layout by embedding 2 rectangular views in a horizontal stack view, fill equally. From left to right: view A, view B. I add the necessary constraints to the stack view. I am in iPhone 7 Plus in portrait. A beauty.

  2. Then as you did in your tutorial, I change the orientation to landscape mode , enter the vary for trait mode for width and then I do something crazy: I switch my views’ order inside their stack view. From left to right: view B is now first , then comes view A. I click done. All is fine.

  3. I go back to portrait mode, and well I am disappointed: here too, the layout order has changed, it reflects the changes I just made for wR .

How come I cannot create a different position for my views inside a stack view when I vary the width trait?

(Of course, if my 2 views are not embedded in a stack view, the position switching does work fine…)

9

There are only certain properties that you can vary by size class. In general, it is the properties that have a “+” next to them in IB. For a stack view, the order of the arranged subviews is not one of the properties, but the axis is, for example. So when you’re changing the order of the items in the regular width environment, you’re changing it for all layouts.

10

This explains it all. This points us all to the fact that it might not be such a straight business to make a stack view intensive based layout vary by size class. I learned another precious lesson. Thank you!