kodeco.com Forums

Video Tutorial: Intro to Auto Layout Part 1: Interface Builder and Auto Layout I

Learn how to create a layout and the corresponding constraints using Auto Layout in Interface Builder.

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

Just wanted to compliment you on how well you explained everything in this video. You made everything very easy to understand. I look forward to watching the rest of the videos in this series.


Thanks @justinm2! As you go through the series, please don’t hesitate to ask, if you have questions.


May I order a T like yours :wink:

:smiley: That was the shirt for the RWDevCon conference in 2015. I don’t think they’re still available.

Hi, That was a very informative video. It helped understanding the auto-layout concepts a lot.

I did the challenge and went back to verify what I did was right or not. I did almost the same stuff. But, there was one step that I did not do. Would you be kind enough to tell me, what is the purpose of doing Step 7 (Select the text field and control drag to the First Name label and release. Select Baseline) ?


There are times when you want to vertically align two views, but you don’t want to align the top, bottom, or middle - you want to align based on the text. This especially applies to views that have different font sizes or amount of padding around the text, like a text view and label. What you want is for the text in both views to be aligned - that’s what the baseline alignment is for. It will create a constraint that will align the baseline of the text in both views.

Does that help?

Is this necessary to have height of the elements? I mean what if I want the relative height like in percentage? So that it adjust automatically as per the screen size. Please suggest!

The height has to be defined, but it doesn’t have to just be a number, the height can be derived from other relationships or be a multiple of something else. For a percentage, add an “equal height” constraint between your view and the top-level view and then change the “multiplier” of the constraint, like to 0.5 for 50% height.

Thank you - this makes sense!

Hi. Thanks for this great Auto Layout tutorial.

One question: It seems to be OK to have either a vertical spacing to top layout guide or a baseline constraint to the First Name label for the text field. Like in the video where you only added a “Left Button.bottom = Right Button.bottom” constraint to the right button, but no additional “Right Button Bottom = Bottom Layout Guide”. At least it worked for me.


When you have two views like that, creating constraints to each other, usually you’ll have at least one of them with constraints to something else - the superview, or maybe a neighboring view. In this case, the constraint from the text field to the top layout guide is what defines the vertical position of the text field. Then the constraint from that to the label is what defines its vertical position. Without the constraint to the top layout guide, the views will know where they should be relative to each other, but not relative to the screen.

OK. Thanks for the clarification!