This series of articles will introduce auto layout from the perspective of a novice who is slowly exploring, and tell me how I feel about it bit by bit in my two-month study. The ultimate goal is to let everyone use it on their own after reading, and complete most simple layout conventions.
The code warehouse of this series of articles is located at https://github.com/johnlui/autolayout. If you don’t understand, you can refer to my auto layout settings. Just download it and open it locally.
Auto layout is a new layout method introduced by apple in Xcode 5 (IOS 6), which aims to solve the problem of 3.5-inch and 4-inch screen adaptation. Screen adaptation has become more important since the release of iPhone 6 and plus, and the workload of “stupid methods” in the past has increased significantly, so many people began to learn to use auto layout technology.
0. Development environment
The development environment of this series of articles is:
- OS X 10.10.2
- Xcode Version 6.2 (6C131e)
1. New application
Create a new single view application named AutoLayout, as follows:
Click to select main.storyboard, and the content on the right is as follows:
Buttons 1 and 2 will play a huge role in future development. They will have the global names of this series of articles: button 1 and button 2. Please note down their location first.
2. Start using
This is also my basic learning method for learning new software programming technology: there is a specific objective driven goal, such as to make a real software for customers, rather than the pseudo goal of “to learn new technology and improve yourself”.
Let’s start directly: draw a button with a certain distance, fixed height and vertical center from the left and right sides, called “swift on IOS”.
First, drag a button from the right to the middle of the page. There will be a reference line, which is easy:
Select this button to set the button background color and foreground color as follows:
Drag the left border of the button to the left until it automatically absorbs, leaving a certain distance. Do the same on the right:
Select this button and change the text to swift on IOS:
Select this button, click button 2, and select this item:
At this time, there will be some blue lines around the button, which are the constraints of auto layout.
3. Success, check the effect
Select this button to view the automatically generated constraints on the right:
There are only three items, which mean: align vertically with the parent view, align right side with the parent view, align left side with the parent view.
It’s easy for us to understand that it’s possible to locate a button, but there’s always something missing. In fact, these three automatically generated constraints do not describe the position of a button, because there is a key attribute missing: the height of the button. We will discuss it in detail later.
The essence of auto layout is to rely onSome constraintsTo locate an element. We can use only one constraint in a certain place to achieve a small purpose, such as preventing content coverage, preventing boundary overflow, etc. But my best practice has proved that if you use auto layout to locate every element on the pageStrict constraintsIf so, auto layout can save us a lot of code to calculate frame.
What is “strict restraint”?
In short, strict constraints are absolute positioning of an element so that it has a unique position in any screen size. The absolute positioning here is not to fix the dead position, but to an elementPerfect constraints。
Let’s look at the picture:
- We want to describe a rectangle in a rectangular coordinate system.
- Then you only need to specify the location and size of the rectangle.
- So just give four values in the above figure: the distance to the left boundary, the distance to the upper boundary, the width, and the height.
- These four constraints are the simplest case. When strictly constraining an element, please build the element directly in the brain and add several constraints. If it can’t scale and move, then strict constraints are successful!
- It must be kept in mind that when using auto layout, the most important thing is to strictly restrict every element on the page, and the source of all evils is not strict constraints.
Next step: using experience of auto layout (2) – realize three equal parts
The original text is published on my personal website: Auto layout experience (1) – initial experience