Auto layout is used in IOS application development to fit different screen sizes _ios

Brief introduction
Auto Layout is the new layout of Apple in Xcode 5 (IOS 6) designed to address the adaptation of 3.5-inch and 4-inch screens. Screen adapters have become more important after the IPhone 6 and plus release, and the amount of "stupid" work has increased dramatically, so many people are learning to use the Auto Layout technology.

Initial experience
0. Development environment

The development environment for this series of articles is:

OS X 10.10.3
Xcode Version 6.3.1 (6d1002)
1. New Application

Create a new single View application, named AutoLayout, as follows:

Click to select Main.storyboard, the right side of the content is as follows:

The two buttons will have a huge impact on future development, and they will have the global name of the article series: Button 1, button 2. Please make a note of their position first.

2. Direct use, start using

This is my basic learning method for learning new software programming Techniques: there is a specific objective-driven goal, such as making a real software for customers, rather than "improving yourself for learning new technology".

Let's get started: Draw a button that has a certain distance, a fixed height, and a vertical center at the right and left sides, called Swift on IOS.

The first step, drag from the right side of a button, placed in the middle of the page. There will be guides appearing, and this step is easy:

Select this button to set the background and foreground color of the buttons as follows:

Drag the left edge of the button to the left until it is automatically adsorbed, leaving a certain distance. Do the same on the right:

Select this button and change the text to Swift on IOS:

Select this button and click button 2 to select this item:

There are some blue lines around the button, which are the constraints of Auto Layout.

3. Finished, view the effect
3.5 inch:

4 inch:

4.7 inch:

5.5 inch:

4. Analysis
Select this button to view the automatically generated constraint items on the right:

There are only three entries, and the three meanings are: Align vertically with the parent view, the right and the parent view, the left, and the parent view.

It's easy to understand that it's possible to locate a button, but it's always a little bit less. In fact, these three automatically generated constraint items do not describe the position of a button, because a key attribute is missing: the height of the button. We will discuss it in detail later.

5. Core Ideas
Essential Analysis

The essence of Auto Layout is to rely on some constraints to achieve the positioning of an element. We can use only one constraint at a place to achieve a small goal, such as preventing content from being obscured, preventing boundary overflows, and so on. But my best practice proves that if the position of each element on the page is "strictly constrained" with auto Layout, then the auto Layout can save us a lot of code to compute the frame.

What is "strict constraint"?

In simple terms, strict constraints are the absolute positioning of an element so that it has a unique position under any screen size. The absolute positioning here is not a dead position, but a perfect constraint on an element.

Let's take a look at the illustrated words:

We're going to describe a rectangle in a rectangular coordinate system.
Then you just need to specify the position and size of the rectangle.
So just give the four values in the above figure: the distance to the left edge, the distance to the upper boundary, the width, the height.
These four constraints are the simplest of cases. When you strictly constrain an element, build the element directly in your brain and add a few constraints, and if he cannot zoom and move, then the strict constraint is successful!
It must be borne in mind that the most important thing when using Auto Layout is to have strict constraints on every element on the page, and that tight constraints are the source of all evils.

6. Realization of the Third Division
The design idea of the three halves

Many people just start to contact Auto Layout, may think it can only achieve the above 1, 2 functions, in fact, the back 3, 42 functions is strong, special place. Next we will try to design the horizontal three halves:

The first element is a certain distance from the left.
The last element is a certain distance from the right.
The three are of constant height and equal width. (Here we set the Height property), if you need a fixed aspect ratio, you need to set the Aspect Ratio property)
The transverse spacing between 1 and 2, 2 and 3 is fixed.
Dry goods, the realization of the process of moving diagram:

Run results

4 inch:

4.7 inch:

The vertical three equal equal realization way is similar, everybody can try for oneself Oh ~