iOS Development learning Note 038-autolayout Automatic layout interface implementation

in the Storyboard/xib automate layout in Files AutoLayout

1. Precautions

• The AutoLayout and frame properties are conflicting, so if you are ready to use AutoLayout, do not manipulate the control's frame property in your code.

• Setup AutoLayout must be set up completely and must include location information and dimension information. In other words, there must be a wide height and coordinate position, indispensable.

2. Simple example

Two view (Redview and Blueview), such as high width, redview distance between the left and bottom is 20, the distance from Blueview is also 20.blueView away from the right and bottom are 20.

2.1. AutoLayout Related property settings

2.2, redview settings, blueview similar

Make sure that each control can calculate location information and dimension information.

Constraint settings for Blueview

2.3. Preview of Effect

Any rotation, always at the bottom, and the spacing remains the same.

3. Complex examples

　The implementation results are as follows:

There are four uiview in view

Each uiview contains two controls, Uiimageview, and uilable.

The Uiimageview is located in the center of the uilable at the bottom.

　　

3.1. Implement automatic layout of internal controls first

The analysis is as follows:

Automatic layout of Uiimageview and uilable.

Uiimageview the relevant constraint information.

Uilable Related constraint information

3.2. Add four identical uiview and set related constraints

One of the redview constraint information

Look at the effect, in different sizes, and rotating state, the effect is consistent.

Summarize:

This is all through the operation of adding constraints, difficult to express clearly in words, see the source code bar (the last side).

4. Special Case Uilable

Sets the uilable constraint, which only specifies the position and width, and the height system is automatically calculated based on the length of the text.
For example, the program:

The middle of the two UIView is a uilabel. Now the text length is like this. Then add a method to implement the Click Screen, which makes the text content shorter.

1 /**2 * Touch the screen to call this method3 4  */5- (void) Touchesbegan: (Nsset *) touches withevent: (Uievent *)Event6 {7     8     //Add an animation effect9[UIView animatewithduration:0.5animations:^{Ten_lab.text =@"ASDFASFASDFADSF"; One         //to perform an animated view A [Self.view layoutifneeded]; -     }]; -}

When you click the screen, the uilable automatically shrinks the height. is not a fixed size.

Source Code Reference:

Http://pan.baidu.com/s/1qW60b5y

Today, tomorrow is still.

2015-06-02

iOS Development learning Note 038-autolayout Automatic layout interface implementation