How to use auto layout (1) – initial experience

Time:2019-12-10

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.

brief introduction

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.

First experience

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:

How to use auto layout (1) - initial experience

Click to select main.storyboard, and the content on the right is as follows:

How to use auto layout (1) - initial experience

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”.

  1. First, drag a button from the right to the middle of the page. There will be a reference line, which is easy:
    How to use auto layout (1) - initial experience

  2. Select this button to set the button background color and foreground color as follows:
    How to use auto layout (1) - initial experience

  3. Drag the left border of the button to the left until it automatically absorbs, leaving a certain distance. Do the same on the right:
    How to use auto layout (1) - initial experience

  4. Select this button and change the text to swift on IOS:
    How to use auto layout (1) - initial experience

  5. Select this button, click button 2, and select this item:
    How to use auto layout (1) - initial experience

At this time, there will be some blue lines around the button, which are the constraints of auto layout.

3. Success, check the effect

3.5:
How to use auto layout (1) - initial experience

4:
How to use auto layout (1) - initial experience

4.7:
How to use auto layout (1) - initial experience

5.5:
How to use auto layout (1) - initial experience

4. analysis

Select this button to view the automatically generated constraints on the right:
How to use auto layout (1) - initial experience

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.

Core idea

Essential analysis

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:

How to use auto layout (1) - initial experience

  1. We want to describe a rectangle in a rectangular coordinate system.
  2. Then you only need to specify the location and size of the rectangle.
  3. 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.
  4. 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!
  5. 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