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 iOS project. With the proper use of constraints, you will make your app responsive to any iPhone size that currently exists.
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.
- Leading - a constraint that follows the left side.
- Top - a constraint that follows the top side.
- Bottom - a constraint that follows the bottom side.
- Trailing - a constraint that follows the right side.
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.
- Width - adds static width to the selected view.
- Height - adds static height to the selected view.
- Equal Width - adds width to the selected view that is equal to another view width.
- Equal Height - adds height to the selected view that is equal to another view height.
- Aspect Ratio - 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.
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 Horizontally in Container and Vertically in Container in order to center your selected view in the superview.
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.
- Add Missing Constraints - Xcode 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.
- Reset to Suggested Constraints - this option will remove all your constraints and apply its own set of constraints. This is also a suggestion.
- Clear Constraints - it will erase all your 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.
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:
1x2 BET - Soccer Tips & Odds_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
Read more of my writing on Medium:
Introducing Clean Swift Architecture (VIP)_Forget MVC, now!_hackernoon.com
Your ultimate guide to the Google Maps SDK on iOS, using Swift 4_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
SWIFT — Custom UIView with XIB file_Custom UIView with XIB file is a very common practice in iOS Development. Custom UIView classes don’t contain XIB files…_medium.com
How to add Spotlight support to your iOS app_A Swift tutorial that will make your app available in Spotlight search_hackernoon.com
Core Data Relationships_Understanding One-to-One and One-To-Many relationships_hackernoon.com