paint-brush
Understanding Auto Layout in Xcode 9by@dejanatanasov
22,088 reads
22,088 reads

Understanding Auto Layout in Xcode 9

by Dejan AtanasovOctober 20th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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 <a href="https://hackernoon.com/tagged/ios" target="_blank">iOS</a> project. With the proper use of <em>constraints</em>, you will make your app responsive to any iPhone size that currently exists.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Understanding Auto Layout in Xcode 9
Dejan Atanasov HackerNoon profile picture

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.

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:


‎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

Subscribe to my Newsletter: