IOS note UI -- use storyboard to add Constraints

IOS note UI -- use storyboard to add Constraints

Note: This is my study note. If you have any mistakes, you can leave a message to discuss them together.

Visual UI building is very efficient, so Apple officially recommends it. Let's learn how to use the storyboard provided by the system to build the UI. You can use storyboard or xib to build a visual UI. In fact, it is very easy to use them. You only need to write the control name in the lower right corner of xcode and drag it to the story board,

After dragging. It is to set the control size and screen adaptation as needed (iphone4 ~ IPhone 6 s plus. We need to use constraints for setting the size point. In the past, constraints were used to constrain the size of each control. So the concept of constraints will not be discussed. (If you really don't want to use constraints, you can actually adapt the screen. You can set the ratio, similar to h5 ). Now I will talk about how to implement it, how to operate it, and add constraints to the control.

I will drag a UIView to set a constraint from the top.

After the settings are complete, the following phenomena will occur:

If there is a red color, the constraints are still insufficient. The line at the top is the constraint we added. Assume that the distance from the top is 133 first. No matter which screen we switch to, the size of the screen is 133.

Add a constraint to the left and set its width to 100. That is

After the constraints are completed, you can

In this way, the size and position of the UIView after the constraints are fixed. In the future, no matter which screen you change it to, it will be the same.

However, there is a disadvantage that the distance and size are absolute, not relative. If you use iPhone 4 to display this interface, you may think it is biased. Then, if you use iPhone 6 S, it will look similar or just right. Let's look at it with an example,

Therefore, we should use relative positions and relative sizes. If we want to align it horizontally, we will delete the original left constraint and add a horizontal center constraint.

In this way, the data is horizontally centered. Run it again.

In this way, the data is horizontally centered. Since it is a relative constraint, of course, we can only center horizontally. For example, what should I do if I want to be a little left? What should I do if I am right? Change the horizontal center coefficient,

Click "edit" and modify the Multiplier. The value is a numerical value. If the value is smaller than 1, the value is left. If the value is greater than 1, the value is right. Let's set the effects of 0.6 and 1.8.

Is this obvious? In this way, we can set the location we need based on actual needs. This is also true for vertical center settings. Vertically)

After writing the relative position, we should think about how to set the relative size. To facilitate the demonstration, delete the original one and pull a new UIView. Set its size and screen to a height equal to width.

You can check equal widths and equal heights and add them. This is the case after the settings.

It is because we have not added the location constraint. We will give it 0.0 on the left and above, so that we can.

OK. The relative size can be achieved here.

Similarly, we want to modify the full screen size or use the coefficient.

Change to 0.4

The same is true for width and height.

Here, we have learned the constraint of adding absolute values and the constraint of adding relative values. The following combinations are based on the actual needs of the project and your imagination. Come on!