Swift 4: Introduction to Auto Layout Programmatically (Ep 1)

Auto Layout is how we layout our UI in iOS applications. Learning how to use it programmatically can be overwhelming at first. In this introduction series, we'll look at how to easily anchor elements onto the screen relative to other items. In the next video, we'll look at how to handle landscape orientation using a few auto layout tricks.

Instagram Firebase Course

Facebook Group

iOS Basic Training Course

Completed Source Code

[billy.n]

I am watching this video 6 years after it's been posted, and I gained insight from it. Thank you very much for making this!

[ericcc]

Really glad to see that you're making a separate tutorial on this topic. I actually found your channel months ago specifically because I was searching for examples of programatically defined layouts. It's definitely the most useful thing I've learned from your tutorials! It's so much more satisfying to me to have it in code, especially for version control. Relieving any dependency on XCode magic itself is also welcome. Thanks for all you do!

[expeditionbasset]

This is the best channel on Youtube. Trying to debug in storyboard is a PITA and doing it programatically as you just showed is so much easier to control. Keep up the awesome tutorial!

[muhammadfarooqi]

I"m a DIV+css and javascript coder. I love to draw things on run time. and this way of working for IOS is again give me feel home. Thank you man!

[vijaykharage]

That's what I wanted "Auto Layout Programmatically" and you came like a life saviour. waiting for next eps. Thanks btw

[habibdurodola]

i am not saying you are the BEST but show me who is BETTER.... you are the man

[Roku]

Exactly what I was looking for! Thanks!!

[ashwinishalke]

Hi Brian, I am a beginner in IOS. Thanks a ton for all the tutorials, many things I learned from your videos. My humble request please explain the MVVM / VIPER architecture while developing an app. Thanks in advance. I really like the way you teach, easy to understand and clear concept.

[vitaliydegtyarenko]

You are the best teacher I have ever seen!

[wmblemania]

More tips: Auto Layout usually fails for one of these reasons:
1) You forgot to add your view as a subview of another view. Oops!

2) You didn't set your view's to false. So, your view isn't using Auto Layout!

Tip: get in to a habit of always setting this property immediately after you add the view as a subview. THEN add constraints. THEN set the other properties of the view (e.g. text, colors, etc.) The reason that you don't have to set this property when using Interface Builder is because Interface Builder sets it automatically for you.

3) You are mixing manual frame-setting with Auto Layout. Once you use Auto Layout, you should not really touch the frames of your views.

4) You are adding constraints between views that are not in the same view hierarchy. Can't do that.

5) You added a Constraint using a UIView Anchor property, but you forgot to call _isActive_ on the new constraint! By default, stupidly, the new Constraint is inactive.

6) You didn't fully specify the position AND the size of the view. Both are required, either directly or by inference. Auto Layout relies heavily on a UIView's intrinsicContentSize property. If that property doesn't have valid dimensions, you MUST provide width/height constraints or other constraints where the dimensions can be inferred. (e.g. pinning the edges of the view to the inside of another view in the hierarchy.) A UILabel has a valid intrinsicContentSize, but a default UIView does not.

[hcri]

I love your challenge, and I will agree that it was a tough one. For I would have never thought that it would have been tied in to the bear Paw image. THIS WAS WELL THOUGHT OF. Thank you.

[smurf]

You always do useful and easy to understand videos! I especially like the algorithm ones, and the auto layout is something I've been looking watch here on YouTube, so thanks for the tutorials! :)

[NikeTao]

I am beginning to absolutely love this feature! Thanks!

[MrVipulLal]

Great tutorial. Explained step by step and through. Thanks!

[chernyshtaras]

You are the best. Respect from Ukraine!

[amari]

I wouldn't be where I am if it wasn't for your contribution. Thank you Brian.

[ozolc]

Good stuff as always, Brian. I'm looking forward to your every lesson. Keep it up. This respect from Moscow.

[wmblemania]

Just a reminder/comment on the use "pixels", particularly for those coming from other platforms: it's helpful not to think about pixels at all. iOS has a coordinate system based on Points (CGPoint). These are abstract structures. 1 Point does NOT equal 1 pixel. Regardless of the device -- such as a 1080p Apple TV, a 4K TV, a x3 Retina Phone, a x1 iPod Touch, etc -- we are only interested in the coordinate space, NOT pixels. Which is why a non-retina iPhone screen can be 320 Points in width, and a x3 Retina iPhone is also 320 points in width. The relative dimensions are the _same_. It's just that the later phones have a higher pixel density. But that density does not affect our layout. Cheers.

[hungry_baba]

thank you so much man, you are an artist! it has helped me layout my controls rather perfectly.

[taylormaxwell]

Another excellent explanation that saved me a lot of time