Please note that this post is intended for aspiring developers and beginners in iOS development and it is assumed that readers have very little knowledge in terms of iOS development. If you happen to be a mid-level to advanced developer, please excuse any redundancy.
At the end of my previous post, I had promised to show how to write Auto Layout constraints and create views programatically. This post is the first in a series of posts covering many aspects of Swift and iOS development.
Starting iOS 9, coding constraints got a whole lot easier. The Auto Layout NSLayoutAnchor class is a huge help in creating constraints in a very fluent manner. But before you achieve that level of fluency, you will need to understand and learn two very important things:
- Understanding View, Subview, and the relation between two views, two subviews or the view and the subview.
- Learning and understanding the syntax used to create Auto Layout constraints.
So let’s get to it..
- Referring to the figure above, there are two views with full-width and equal heights, laid vertically centered. Both View 1 and View 2 are subviews of it’s superview – in this case the controller’s main view on top of which both View 1 and View 2 are laid.
- It is also important to note that View 1’s bottom edge is touching View 2’s top edge.
- View 1’s top, left and right edges are aligned with it’s superview’s top, left and right edges.
- View 2’s left, right and bottom edges are aligned with it’s superview’s left, right and bottom edges.
- Labels are added just to create references. We will not cover UILabel class in this post.
Let’s start coding..
1. In order to get started, we have to first declare variables – view1 and view 2 – within UIViewController class (or View class if preferred).
2. We have to add View 1 and View 2 as a subview of controller’s main view.
3. This line of code is very important. Here we have to set view1’s and view2’s translatesAutoresizingMaskIntoConstraints property. What this property means that if it is set to true, then it will translate it’s auto resizing mask into Auto Layout constraints. We do not want that since we want to define our own constraints. Therefore, we need to set to property to false.
4. Now we have to set constraints for view1.
- First three lines of the code above sets view1’s top, left and right anchors to be the same as it’s superview’s top, left and right anchors. This is because view1’s top, left and right edges are aligned with it’s superview’s top, left and right edges.
- In order to activate these constraints, you have to set isActive to true. This is very important since by default isActive is set to false.
- In line 4, the height anchor of view1 is set to 1/2 of the superview’s height. This is because view1’s height is 1/2 of the superview’s height. Note: similar to “multiplier” equation used in this case, you can also use a “constant” which can add or subtract.
- Line 5 is setting the background color.
5. Now we have to set constraints for View 2.
- First two lines of the code above sets view2’s left and right anchors to be the same as it’s superview’s left and right anchors. This is because view2’s left and right edges are aligned with it’s superview’s left and right anchors. You can also add bottomAnchor constraint too but we will leave that for later since I want to show you the relation between two views.
- The third line sets view2’s height to 1/2 of the superview’s height.
- Line 4 highlights a very important aspect of Auto Layout. It defines the relationship between view1 and view2. This line of code sets the top anchor of view2 to be equal to the bottom anchor of view1. This is because view2’s top edge is aligned with view1’s bottom edge.
Here is the full code:
Here is another example that you should try creating yourself:
- Referring to the figure above, View is the controller’s main view. You will need to add background color to it.
- Subview 1 and Subview 2 are of same size and are subviews of View.
- Subview 1 and Subview 2 are horizontally centered with a 50 points gap between the two.
- Left edge of Subview 1 is 100 points away from the left edge of View.
- Top edge of Subview 1 is 250 points away from top edge of View.
- Subview 1 and Subview 2 has a width of 400 and height of 200 with a corner radius of 10.
- You should also add labels this time. Tip: Label “Subview 1” is a subview of Subview 1. Label “View” is a subview of View.
- Labels are declared as UILabel. For example:
So try it out and let me know if any questions arise.
In my 10 years of iOS development experience, I have developed and helped monetize apps in various categories. So let’s talk!