[iOS development] screen Fit II: XCODE7 using AutoLayout drag and Drop Layout basics (1)

Refer to the automatic Layout tutorial one we implemented this interface in Xcode7 (because the tutorial was done again since the earlier version of Xcode), the PIN option is not available in Xcode7.

The design diagram is as follows:

Implement Step one: Drag and drop three view on Stroyboard with different colors, change them to the size similar to the design diagram as follows

Implementation Step two: Through the observation of the design chart can be found three view, the upper half of two view width, command Click to select Three view, using the AutoLayout constraint for equal height, also select the upper two view constraints for equal width, the implementation process is as follows:

The same way to handle the equal width of the top half of the two view

Implementation step Three: Adjust the view position according to the design diagram and set the view and Super view constraints (now constrained errors do not need to process), a single check view1 set his top and left constraints of 20

Using the same processing method to set the VIEW2 top and right margin constraints, view3 of the Bottom,left, right margin constraints, the constraint value is 20, the implementation of the effect is as follows:

Implementation step four: Set the relative distance between the three view, check VIEW2 set lift constraints back to find there are two options, a value is smaller, a value is larger, the default is the value is smaller, the value of the smaller option is relative view1 distance value is relatively super View distance, where the default constraint values are used:

Using the same method to handle the relative distance between view relative View1 and view2, the processing is done as follows:

The final step: this time you will find that the red error has disappeared, leaving only the yellow warning, which shows that you have no problem with the constraint, the rest is only the control frame problem. The next thing to do is to click each warning to step through each warning issue. You can also select all view direct update frame to solve all problems, the final effect is as follows:

Take a look at the results (this is the end of the first section of the layout basics is not very simple):

Direct execution Effect:

Hey, spin it again:

OK test end, willing to give the person, answer questions.

[iOS development] screen Fit II: XCODE7 using AutoLayout drag and Drop Layout basics (1)