All you need to know about Auto Layout What is Auto Layout? Auto Layout dynamically calculates the size and position of all the views in your view hierarchy. It’s an Xcode feature that you must know when it comes to building the user interface for your next project. With the proper use of , you will make your app responsive to any iPhone size that currently exists. iOS constraints In this tutorial, I will explain the Auto Layout constraints and how to properly apply them. First of all, I want to mention that you can work with constraints both programmatically or from the Interface Builder. In most cases, you should focus on working with the second approach. Constraints I am sure that you have already seen this bar above the console area. This is the place where all the magic happens. On the right side, you will see 3 tabs that are enabled. That’s everything that you might ever need when working with constraints. 1. Add New Constraints I will start with the middle tab because it’s the most important one. From here, we can add constraints that we need for the selected view. Basically, you can add both position and size type of constraints. Position Constraints If you can see from the above screenshot, there are 4 red lines at the top of the window. Each line represents a side that we want the selected view to follow. The numbers next to each line, represent how much margin space we want to leave between the selected view and the superview or some other child view. It will connect with anything that is on the specified side. - a constraint that follows the left side. Leading - a constraint that follows the top side. Top a constraint that follows the bottom side. Bottom - a constraint that follows the right side. Trailing - For example, if you want your view to always be in the top left corner, you will need to add leading and top constraints. Size Constraints Below the position constraints, we can see the size constraints. They define how big the view will be. - adds static width to the selected view. Width - adds static height to the selected view. Height - adds width to the selected view that is equal to another view width. Equal Width - adds height to the selected view that is equal to another view height. Equal Height - If you need your view always to be squared and have dynamic size, you need to add an aspect ratio constraint with the value 1:1. Aspect Ratio 2. Add Align Constraints From the first tab, you can add alignment constraints to your selected view. In most cases, you will need just the enabled ones. From here, you can center the view. in the superview either horizontally, vertically or both. For example, select both and in order to center your selected view in the superview. Horizontally in Container Vertically in Container 3. Resolve Auto Layout issues Auto Layout provides us with a help section that can resolve our constraint issues fast. There are two types, (1) resolve issues on the selected views, (2) resolve issues on all the views inside the view controller. - will monitor your constraints and give you an option to add the missing constraints. Note that these constraints are suggestions. It doesn't means that they will adapt to your situation. Add Missing Constraints Xcode - this option will remove all your constraints and apply its own set of constraints. This is also a suggestion. Reset to Suggested Constraints it will erase all your constraints. Clear Constraints - To be honest, I am ignoring this feature and always try to create the constraints by myself. I only use the Clear Constraints option when it's necessary. That’s the only way to mastering Auto Layout. If you want to see some AutoLayout examples, and how constraints are used in various situation click here. That’s it from this tutorial and if it helped you please 👏 or share this story so others like you can find it. Thank you for your attention! 🚀 Check out my latest project: _‎HOT ODDS Each day, we generate a list of the hottest odds in the world. These are odds that have dropped the most…_apple.co ‎1x2 BET - Soccer Tips & Odds Read more of my writing on Medium: _Forget MVC, now!_hackernoon.com Introducing Clean Swift Architecture (VIP) _Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on the…_medium.freecodecamp.org Your ultimate guide to the Google Maps SDK on iOS, using Swift 4 _Custom UIView with XIB file is a very common practice in iOS Development. Custom UIView classes don’t contain XIB files…_medium.com SWIFT — Custom UIView with XIB file _A Swift tutorial that will make your app available in Spotlight search_hackernoon.com How to add Spotlight support to your iOS app _Understanding One-to-One and One-To-Many relationships_hackernoon.com Core Data Relationships Subscribe to my Newsletter:

Apple

Understanding Auto Layout in Xcode 9

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Auto Layout UI Examples

Auto Layout UI Examples

iOS Adaptive Layouts

SwifWeb and How to Center the Div!

How UIKit Really Handles Touches, Hit Testing, and the Main Run Loop

105 Stories To Learn About Ios App Development

Auto Layout UI Examples

Auto Layout UI Examples

iOS Adaptive Layouts

SwifWeb and How to Center the Div!

How UIKit Really Handles Touches, Hit Testing, and the Main Run Loop

105 Stories To Learn About Ios App Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps