IOS AutoLayout (2)-dynamic diagram (iosautolayout)

IOS AutoLayout (2)-dynamic diagram (iosautolayout)

Original Blog, reprinted, please indicate the source
Blog.csdn.net/hello_hwc

Preface:

The previous article introduced some preparations for AutoLayout. This article continues to explain how to use Storyboard to create AutoLayout. The next article will explain how to use Code to create a Storyboard.

Use Control + Drag to create

-For the constraints of a View relative to the SuperView, Control + drag the mouse to the Superview
-For two views, Control + mouse drag to another View

For example:
I want to achieve this effect

The procedure is as follows:
Step 1
Drag an ImageView and place it in the center of the View according to the Blue Line Reference Line. Then Control + drag adds two constraints to the ImageView so that it is in the center of the View both horizontally and vertically.
Animation

Step 2
Control + drag this imageview to its own, add constant constraints of Width and Hight.

In this way, the ImageView constraint is created. If a warning appears after creation, you can select

Click Update Frames. XCode updates the View Frame according to the constraints.

Step 3: drag two buttons and create constraints. I want the buttons to be placed in the two corners of the ImageView. Note: When dragging, follow the reference blue line.
The process is as follows:

The same method is used for Button2. At this time, we are done to complete what we want.

Of course, control + drag can create more than that. In actual development, you can drag and drop to find the desired constraint options.

Don't forget. You can drag it in the outline.

This is especially useful when there are many views on the Storyboard.
Drag to yourself

Drag Button1 to Button2

Create with some buttons of XCode (recommended)

I like this method, because the drag method is sometimes hard to drag.
These buttons are at this position

Then, I use these buttons to create the same constraints as above.
1. create constraints for ImageView

• Make it in the View Center

Select ImageView

• Add height and width unchanged
  Select ImageView
  

• Add constraints for Button1 so that the vertical distance from the ImageView is 8 (default control distance)
  Select Button1
  

• Add constraints for Button1 to align them with the ImageView Header
  Select Button1 and Imageview
  

Similarly, for Button2, the alignment of Button2 is tail alignment. If warning information appears, updateFrame

Finally, we will briefly explain the functions of each button.
The first one is used to process alignment.

Note that if you want to select two views in Qi city

The red circle is the image description.

The second processing distance information, for example, the distance from the adjacent control remains unchanged, and the width remains unchanged. For example, when resize, the height of the two views remains the same.

Third, when the current position of the control is inconsistent with the position restricted by the constraint, the Update frame or Update constraint can also be automatically created by XCode.

The fourth is the constraint policy when the View Size changes.

Link to AutoLayout in the previous article

Http://blog.csdn.net/hello_hwc/article/details/43967561

Finally, I complained: do not forget to mark the source of my blog !!! It's not easy to make an animation !!