[Rookie growth Kee]ios develop self-study note 04-autolayout Automatic layout

With the advent of iphone6, Apple has further increased the size of the mobile phone screen, and according to the current trend to judge, there should be a bigger screen in the future mobile phone. If there is no AutoLayout then the iphone has 4 sizes of screens and the ipad is available in two sizes. and an application that wants to be compatible with all of these different sizes of screens must have the program do some special processing, such as in the program to get the screen size and then according to the specific size to create a different UI layout, it is obvious that every one of the screens need to add a processing, which is obviously cumbersome and not economical. The use of AutoLayout can use the function of constrained objects to achieve a single layout in a variety of screens common purpose, even the device can be rotated to achieve a very good result.

Let's start by describing the types of layout constraints that are often used by several AutoLayout automatic layouts.

• Width indicates the fixed width of the constrained UI control
• Height represents the fixed height of the constrained UI control
• Leading Space to Superview maintain a fixed distance from the left edge of the parent view
• Trailing Space to Superview maintain a fixed distance from the right boundary line of the parent view
• Top Space to Superview maintains a fixed distance from the top boundary line of the parent view
• Bottom space to Superview maintains a fixed distance from the bottom boundary line of the parent view
• Horizotal Spacing The horizontal distance between two sub-views remains fixed length
• Vertical Spacing The vertical distance between two sub-views remains fixed length
• Width equally maintain equal widths between two sub-views
• Height equally maintain equal heights between two sub-views

Create a new single view Application Template project, Drag the two button buttons to Main.stroryboard to set the background color to purple and green, and you can see that the correct two buttons on the canvas appear to be running differently on devices with different screen sizes.

Operating effect on the actual device:

Operating effect on IPhone 4s

Because I want these two buttons to always be the same size: two buttons and Gaoyao are equal, while two buttons stay at a fixed distance from both sides of the screen, and the distance between two buttons remains the same, add the following constraint:

• Select two buttons individually and click Editor->pin->width,editor->pin->height to set their fixed width and height
• Select two button respectively and click editor->pin->leading space to superview,editor->pin->trailing space to Superview fixed the boundary distance between its and the parent view
• Hold down SHIFT and click on the two button, and click Editor->pin->horizontal Spacing to set the length distance between the two buttons to remain fixed
• Hold down SHIFT and click on the two button, and click Editor->pin->width equally to set two buttons with equal width

By adding the above constraint, you can see that the program is running with a display that doesn't look so ugly.

And even rotating the screen can get better results:

[Rookie growth Kee]ios develop self-study note 04-autolayout Automatic layout