Adaptive layout strategies

🎤 General Discussion iOS
1

Hello everyone,

I’ve been trying to figure out good strategies to build my adaptive layouts. I haven’t found much information about this topic, just some tutorials showing how the size-classes and the auto-layout works but not much about the strategies they use to make their layout, so I created this topic so people can share strategies when building your adaptive layout .

I found this video on youtube with an example of one strategy to use. He pretty much uses some Views with low priority Heights between the other important views (views with textField and other stuff that shouldn’t change the size) so it just adjusts when the screen size is bigger. Its great but I couldn’t figure out a way to use it with a scrollView.

What other strategies we could use to build those adaptive layouts?

Thanks!

2

I think what you’re asking can be a bit too vague, maybe narrow down a bit on what kind of things you want to achieve?

Also, the first strategy before asking “how to achieve this kind of layout” is to have a clear idea of the design of your application. The design document should have at least an idea on its appearance in each “possible” configuration (will the app be portrait/landscape only or rotate? and if it rotates, would it be the same layout or change? will it allow split-screen on ipad? do you want the app to be scaled on the ipad or do you want the layout to change? etc).

I find the video you posted a bit confusing. He unnecessarily used useless views between elements when he could have just used a Vertical Spacing constraint. And now, it’s even possible to just use one StackView to achieve the same result.

Some ideas to keep in mind:

  1. Don’t forget the multiplier (to center an element vertically, use that constraint, but if you want it 1/4 or 3/4 of the screen, then having the multiplier set to 1/2 or 3/2 would do the same).

  2. While you can have many size-class based Constants on the same constraint, you can sadly have only one Multiplier, so consider having multiple constraints with different multipliers, and install them only in the desired size-class.

  3. Use content hugging and compression resistance (careful with fonts as their vertical size is nearly always screwed).

  4. It’s possible to have conflicting constraints meant for different size-classes, just give them different Priorities or uninstall them in the non-desired size-class (one fail-safe strategy is to have one general constraint for all size at lower priority, and a specific size-class constraint with higher priority to avoid installing/uninstalling them)

Hope this helps, until you detail more what you want to achieve.

3

I was hoping for people to come up and share their thoughts and strategies on the topic but all right, Ill be more precise.

Screen Shot 2016-03-28 at 8.58.58 AM.png605×605 220 KB

So basically I want is to have those white views stretch when the screen size allows it.
I wanted that “Esqueci minha senha” label to be closer to the bottom and the top white view to have a priority on stretch.

I was able to achieve that by setting the spacing between the white views and the other views to 0 and giving lower priority to the Height constraint of the white views but I had to add an ScrollView to be able to adjust its content when I open the keyboard and I just can’t achieve what I want anymore.

Any thoughts ?
Sorry for any English mistakes.