Autolayout: meant to work from the inside-out, or outside-in?

I’m at the point with autolayout where I can generally achieve what I want, but not in a rapid, predictable, or masterful way.

The ongoing problem: rather than being able to make a single change in in single shot, I inevitably have to fuss with 2-3+ layers. And my changes all too frequently have unwanted side effects. So even when things eventually look right, I’m not clear or confident on exactly how/why it’s working.

So, I have been trying to pinpoint the root cause misunderstanding.

My conclusion thus far is that everything generally works better when starting from the inside-out.

That is, put fixed values and padding as deep in the hierarchy as possible, and let progressively outer container layers react to their contents.

(As opposed to starting from the outside-in, and trying to to make progressively inner layers react to their containers.)

However, the official docs don’t say that explicitly. They don’t even really acknowledge the concept of an inside-out vs outside-in approach at all.

So my question is: is this conclusion correct? Is auto-layout indeed meant to work from the inside-out? Does anybody want to argue for the outside-in approach? Or for an altogether different way of thinking about it?

Thank you in advance.

1 Like

@ajh3 I wholly agree, setting up auto layout frames beginning with the inner most elements and progressively wrapping them in new auto layout containers is the most efficient workflow! You may be interested in a blog post I wrote about “auto layout wrinkles”–seems similar to the layer-fussing you described. I’ve found the inside-out method tends to reduce the number of wrinkles that occur.

1 Like

Correct, because when you work from the outer container, the inner container’s AL will be altered.
For example, let’s say firstly you have:
⌗ Fill ↔︎
⌗ Fixed ❘―❘
⌗ Fill ↔︎

Then you change the outer to hug, the side effect of doing this is that your inner container will be set to fixed behind your backs:
⌗ Hug ><
⌗ Fixed ❘―❘
⌗ Fixed ❘―❘
Since this happens in the background, most of the time you might not notice it happened or which exact layer it had ruined. Hence, you start from the inner, make it hug first, then make the outer hug.

I should also point out that the same could happen if you go inside-out, for example you firstly have:
⌗ Hug ><
⌗ Fixed ❘―❘
⌗ Hug ><

Then you change the inner to fill, you’ll get this:
⌗ Fixed ❘―❘
⌗ Fixed ❘―❘
⌗ Fill ↔︎
But, since you can only have one immediate parent, and you’re going to deal with the parent next anyways, the side effect is more predictable.

So, when there are equal side effects either way you go, the differences between these two approaches really come down to: Parent can have multiple immediate children, while children can only have one immediate parent

1 Like