iOS uses automatic layout AutoLayout

In the development of iOS often use automatic layout, such as screen rotation, the interface will be newly placed, or will not be displayed.

Automatic layout must be set in the storyboard interface, not in the form of pure code to write

To use automatic layout, first make sure that the using auto layout and use Size Classes option in the Interface Builder document is checked?? On the

Figure 1: Open Auto Layout

Several graphical buttons appear in the lower right corner of the storyboard: stack, align, pin, and resolve auto layout issue.

Now we can start setting various constraints on automatic layout.

Method One: Use the Blue Line to assist:

In this example, I put the THING0 in the upper left corner, there will be two blue lines, and then click Reslove Auto Layout issue inside the reset to suggested Constraints with the proposed constraint to reset, After resetting, click Thing0 to see the constrained line, on the right of size inspector can see various constraints

Figure 2: Setting THING0 near the Blue Guide

Figure 3: Setting Constraints for system recommendations

Figure 4: You can view all constraints and set constraint values in the dimensions panel

Click Edit to edit the values of the constraints, we generally choose standard values, because we do not want to see the magic number, with the magic number is a bad habit.

Figure 5: A workaround for many warnings when setting constraints on auto layout

Here, my Thing0 has been stretched by me, so there is a yellow warning in the file outline??, click warning?? Enter the warning list, there are various constraint warnings, click on the warning character??, Xcode will pop up to let you choose the solution, choose the solution you want to use, then the Fix button, fix.

Figure 6: Running the program

Run the program, regardless of vertical screen or horizontal screen, Thing0 are placed in the place I want to put

Method Two: Click the control to press CTRL + Mouse movement direction to set

This method is similar to setting the output port outlet and clicking the event action:

Here I put Thing1 and THING0 close, I want to let Thing1 automatic layout relies on THING0, click Thing1 Ctrl-Drag mouse to THING0, release after Xcode will be the frame let you choose constraints, you can choose leading, Center horizontally, trailling, respectively, is the forefront, the center level, after the face alignment, add the desired constraints after the Click Thing1 can see the constraint line

Figure 7: Setting constraints in a drag-and-drop manner

Figure 8: Running the program

Run the program, vertical screen horizontal screen can be placed correctly;

Method Three: Add the constraint directly after clicking on the control

In this case, I emptied the THING0 constraint without any constraints or with the help of the Blue Line.

Click Thing0, then click on the four controls: the pin in the third, will pop up let you set constraints of the various conditions, including up and down the spacing constraints, and so on.

After setting the constraints, click the Add 2 constraints control THING0 the constraints are set.

Figure 9: By clicking on the control to directly

Figure 10: Program run

Program running, THING0 placed correctly

iOS uses automatic layout AutoLayout