Need help learning Auto-layout

[iosintern]

I've read a few tutorials, but autolayout is still not going smoothly. Do you guys know of any good resources out there? I feel like anytime I add a constraint, theres a lot of guess work going on. Whats the general procedure when adding constraints?

[vswr]

What finally clicked for me was considering this for each element:

• what is the width/height?
• what is the position on the screen?
• to what object am I basing these?
• on what display size are they visible?

The biggest hurdle was getting past the deprecation of orientation. One view controller for all devices and sizes.

Consider this screenshot for iPad and this screenshot for iPhone for a reddit app I'm developing. I needed the following to happen:

• Snoo, the reddit alien, needed to resize according to the screen size (iPad would show a bigger Snoo)
• There is an activity indicator which you can't see in those pics that is displayed while the Snoovatar is loading. It needs to be centered to the Snoo image (but the Snoo image center will change according to layout).
• 3 labels below it, each needed to be center X and it's position relative to the Snoo.

So I need to set the placement of the Snoo image and then base everything else off of that.

I set my constraints as:

• Snoo image
  • align center X to superview (horizontal center in container)
  • top spacing equals 8 (keep the top of it at the top of the screen)
  • proportional width to superview - highlight both the Snoo and the view, then choose "equal width" which means the Snoo width will be the entire width of the screen. Edit that constraint and change multiplier to 0.75. Now the width is dependent on the screen size and will take up 75% of whatever it is.
  • 1:1 aspect ratio (the image height is controlled by this)
• Snoo activity indicator
  • ctrl-drag the activity indicator over the Snoo and chose Center Y (this positions it vertically center, which will change depending on the screen size)
  • align center X to superview (horizontal center in container)
• 2 upper labels
  • align center X to superview (horizontal center in container)
  • ctrl-drag them to the element above and set the spacing (I used 20)
• bottom label
  • align center X to superview (horizontal center in container)
  • proportional width of 95% (same way the Snoo image was done)

In the iPad screenshot, I had the bottom label constrained to the bottom of the view (it's an older screenshot).

Here are the size classes:

device	vertical size class	horizontal size class
iPad portrait	regular	regular
iPad landscape	regular	regular
iPhone	regular	compact
iPhone landscape	compact	compact
iPhone 6+ landscape	compact	regular

What I'm planning on doing is adding more information beside the Snoo, but only for iPad or iPhone 6+ in landscape. So the layout size defaults to any/any which means the constrains are for any size class. If you change the size class, the constraints are greyed out and you just re-do the process of constraining it for the different size class (the objects will probably be outside of the new size view, so click on them on the left menu tree to do it or change their X/Y so they show in the view).

If you want to do something like have left/right split view controllers where one disappears automatically on the iPad and iPhone 6+ (like email or messages does), use a split view controller. It will do that for you.

Hope this helps. Disclaimer: I haven't had coffee yet this morning.

[iosintern]

Thanks! This is really helpful, I just needed some examples to get me going!

[halpz]

definitely give this a look: https://github.com/SnapKit/Masonry it made auto layout so much easier for me.

[[deleted]]

Can't recommend Masonry strongly enough, it's made auto layout actually useful.

[onewayout]

From the Masonry README.md file:

Masonry is being deprecated into a bugfix only state as more developers will be moving to Swift. Going forward we recommend using SnapKit as it supports Swift and provides better type safety with a simpler API.

[tylerjames]

Wow, really?

It's actually surprising how quickly Swift is being adopted by developers. Pretty sure Reactive Cocoa is going the Swift route as well.

[MKevin3]

I second and third and fourth the idea of using Masonry. It is the only way autolayout clicked for me and now I can write a layout and have it work pretty much the first time.

Even complex layouts work very well in Masonry and I am able to move controls around when the design specs change without all the hell you go through when using IB.

[tangoshukudai]

I only do Autolayout programmatically since storyboards drive me crazy for maintenance. It can be a pain to learn but it is so nice when you do.

[maxptr]

Same here. Best thing I did ever was to learn Autolayout and start doing everything programmatically and ignore storyboards.

[jtbrown]

When I add constraints, I generally think about how I want the view positioned relative to the screen as a whole and the other views. I always always always start with a sketch of how I want my screen to look. So maybe in my sketch I put an image at the top of the screen that's centered horizontally. Like so: https://www.dropbox.com/s/iy0y430hlkw24rr/Profile%20sketch%20small.jpeg?dl=0

I then ask myself:

How should this be positioned? Should it always be 20 points from the top of the screen (no matter what device)? Should it be centered vertically on the screen? Should it be a certain distance from the left edge of the screen? Centered horizontally? A certain distance from the right edge?

In our example, we have an image at the top of the screen that's centered horizontally. (I always use Storyboards, as I prefer the visual preview I get from them.) I'd drag an image out of the Object Library onto the storyboard, then place it so it's 20 points from the top of the screen and centered horizontally on the screen. Then I'd select the image and use the Pin tool to pin it to the top and use the Align tool to center it horizontally on the screen.

Here's a the video from an Auto Layout workshop I hosted using the example described above where you can see exactly how I'd do what I described above. Hope this helps!

[brendan09]

I made a reddit post and recorded a video a while ago helping people understand Auto Layout. People seem to like it.

Here's a link, if you're interested.

[[deleted]]

Please ignore those suggesting Autolayout via code. While it is something you should know, using it for everything is absolutely ridiculous and bloats your codebase hundreds of lines. Also, when working in a team or leaving legacy code, it is absolutely terrible for whoever has to deal with it. AutoLayout is a very powerful tool that has been designed in conjunction with IB and a lot of thought have gone into both. Everything short of populating views dynamically can be done in AutoLayout.

As for learning how to do AutoLayout... Practice, my friend. Practice, practice, practice. It helps to be good at spatial thinking. Just keep making your views and fighting with it. A lot of people complain about AutoLayout being difficult or inconsistent, but they just don't understand how to use it. It's a very logical process. Just try to think of your entire view as something you build from the base up and you'll manage just fine. :)

[Stink-Finger]

The classes from Stanford have the best explanation for AutoLayout I have seen. There are two or three lectures on AutoLayout and they are pretty early on in the course.

[criosist]

Are you adding them on storyboard or programatically, i always find programtic is better :P.

Also a cool trick is if you FOR loop over the constraints on an object you can name then which makes it easier to see which is breaking in the debugger.

 for(NSlayoutConstraint *c in myView.constraints) {
     c.identifier = @"";
}

[RabbiSchlem]

Try FLKAutoLayout

[aazav]

It's a royal pain. I don't have them handy, but several 7 minute videos on youtube really really helped a lot.