- Intro to course
- Learning Objectives
- What is AutoLayout?
- Constraints
- StackView
By the end of this lesson, students should be able to:
- Identify the role of AutoLayout in iOS development.
- Identify the anatomy of a constraint.
- Use constraints within the interface builder.
- Implement StackViews when proven to be an optimal solution.
Is a constraint-based layout system. It dynamically calculates the size and position of all the views in the view hierarchy, based on constraints placed on those views.
Allows us to create adaptive UI, that will look good in multiple screen sizes and device orientations.
This happens because when adding the label, we hardcoded the origin in the screen and since iPhones have different screen dimensions it shows in a different place every time. We should handle this properly, good thing we have AutoLayout to help.
You can check all screen sizes in this guide:
The Ultimate Guide To iPhone Resolutions
You might have noticed that there is a distinction between points and pixels. We use points to make development easier. Screen resolutions might continue to change, but we can use points without worrying about it. The conversion to pixels is done automatically by iOS.Constraints are the rules that we apply to UI elements and determine their size and position.
The layout of a view hierarchy is defined as a series of linear equations. Each constraint represents a single equation. The goal is to declare a series of equations that has only one possible solution.
Can you describe verbally what the constraint states?
This constraint states that the red view’s leading edge must be 8.0 points after the blue view’s trailing edge.- Item 1. The first item in the equation—in this case, the red view. Must be a view or layout guide.
- Attribute 1. The attribute to be constrained on the first item in this case, the red view’s leading edge.
- Relationship. The relationship between the left and right sides. The relationship can have one of three values: equal, greater than or equal, or less than or equal. In this case, the left and right side are equal.
- Multiplier. The value of attribute 2 is multiplied by this floating point number. In this case, the multiplier is 1.0.
- Item 2. The second item in the equation in this case, the blue view. Unlike the first item, this can be left blank.
- Attribute 2. The attribute to be constrained on the second item in this case, the blue view’s trailing edge. If the second item is left blank, this must be Not an Attribute.
- Constant. A constant, floating-point offset in this case, 8.0. This value is added to the value of attribute 2.
Full list of attributes in the Apple Docs
Attributes define a feature that can be constrained. In general, this includes the four edges (leading, trailing, top, and bottom), as well as the height, width, and vertical and horizontal centers. <iframe src="https://www.youtube.com/embed/5QRes2qrNIU" data-autoplay width="700" height="500"></iframe>
- Now you try it, do the same layout as the demo.
- Watch this video with common constraints and try them out yourself.
- If you get blocked, ask the instructor to help out 😀
You typically select two or more views before using the Align tool. However, the Horizontally in Container or Vertically in Container constraints can be added to a single view.
- View them in the editor (different lines and colors have different meaning)
- View the list in the document outline
- View them in the Size Inspector
The constraint’s identifier property lets you provide a descriptive name so that you can more easily identify the constraint in console logs and other debugging tasks.
In the previous example we applied constraints that defined width and height of the views.
Some views have a natural size given their current context. This is called intrinsic content size. This is information that a view has about how big it should be based on what it displays.
- A
UIImageViewknows how big it should be based on the image it contains. - A
UILabelknows what size it should be based on the text it contains.
Auto Layout represents a view’s intrinsic content size using a pair of constraints for each dimension. The content hugging pulls the view inward so that it fits snugly around the content. The compression resistance pushes the view outward so that it does not clip the content.
Each of these constraints can have its own priority. By default, views use a 250 priority for their content hugging, and a 750 priority for their compression resistance.
Therefore, it’s easier to stretch a view than it is to shrink it.
For all other constraints, they have on their horizontal and vertical axis, a priority attached to them (1000 initially).
The constraint priority determines how important a constraint is in relation to other constraints; 1000 is a required constraint. 100 is considered low priority.
When there are AutoLayout conflicts, these values are used to resolve them.
Powerful tool to create interfaces very quickly.
It groups views together and automatically applies constraints for you. As a result, views can adapt to different screen sizes!
<iframe src="https://www.youtube.com/embed/0ti3y2lQi-8" data-autoplay width="700" height="500"></iframe> Now you try it, do the same as the example. You can use a regular view instead of an image, if you are trying live in class.
Article to cover Axis, Alignment and Distribution
Video Exploring changes in CHP & CCRP
- 30 minutes to finish the layout specified here
- 10 minutes to go over questions
Read about the type of errors you can encounter while working with constraints.
Then read about how you can debug them with these tips & tricks. Identify the tip that you think will be the most useful to you. We'll share them during the next class.
Finish Tip Calculator Tutorial