Storyboard (story version) tutorials for Beginners Tutorial 2. Adding constraints to an unconstrained story version

Following the first storyboard novice Tutorial: http://blog.csdn.net/u013582514/article/details/49977059

Continue to explain

3. Add constraint (IMPORTANT)

Check Item1 This is an ordinary VC drag a button to go up

When the button is selected, which control is selected to add a constraint

Angle of view to right Wany Hany Center Bottom

Click the second button

What's the upper gray constraint? I'm not sure. (infrequently used) The last two constraints mean that if the value is 0 vertically centered or horizontally centered, the left selection box is selected and then clicked on the Add Constraints button below

(gray indicates no constraints are selected) to add

Note that when you add a constraint, the constraint does not add a complete error (for example, you only add a distance to the left margin constraint will be an error, different controls "constraint add complete" condition is different)

And look at the third button constraint (simple constraint core content)

Preferred to cancel the selected state of constrain to margins

Constrain to margins means that Apple officially defaults to the margin effect for you. They think distance 8 is a good distance.

So if you select constrain to margins setting the margin to 0 is actually 8 (really meaningless setting ...). ）

Uncheck to see there are actually four constraints

These four constraints are the distance up and down the nearest control distance the current button in the VC view above view also only this button so these four constraints represent the button distance from his Superview four margin But none of these constraints are ready to add state

Now you are ready to add two constraints (click the Red line to change whether or not to add a state) they are the top and left margins, respectively.

At this point, click the Add 3 Constraints button to add a three constraint

There are only yellow lines on the interface and no red line. This indicates that the constraint full condition has been met (the condition of the button is arbitrary as long as the left margin and the top margin are satisfied) Three yellow lines represent what it really looks like it needs an updated perspective to go to the left

Found a little yellow button click on it

Then click on the Yellow triangle

There are a number of options that are typically selected when update frames updates the control's frame

The button means that for all controls to perform this method modification there is currently only one button that does not have to be selected

Select button on the interface after clicking

We can see that the length of the button is screen length and height because there is no constraint so it is adapted to the font size (if there is no left or right margin, the length will be adapted according to the number of words)

Next look at the following constraints

You can see that it is set the fixed length and height of the button (note that at this point the width is not in favor of if set to 320 can be compiled through but on the iPhone6 because the screen size is not 320 will be problematic, if the value set is not 320 will error), at this time set a fixed height of 40 Select the left Selection box and click the Add Constraint button below (this is not a map)

You can find a yellow line number is-10 means that the button height compared to the actual height-10

And look at the following constraints

The last constraint align no use ...

See aspect ratio constraint means the aspect ratio of the control

The view goes to the upper-right corner after adding the constraint

You can find the constraints you've added yourself

A total of five constraints which are aspect ratio constraints Click on the right of edit

The first constant has no practical meaning for the constraint (its value can represent the distance value of the margin)

The second priority represents the default value of 1000, which is the first constraint that is required when you set the precedence value for multiple homogeneous constraints without an error and the constraints that you set are met in order of precedence

The third multiplier is a very important attribute of the constraint, you can see that the button has a length of 40 and 320, so adding a aspect ratio constraint by default is 320:40, which is 8:1, it can change the aspect ratio (but it will be an error when changed, because you set the left and right margin fixed length and a fixed height so your width is actually fixed at this point, except that the constraint satisfies the other constraints so there is no error, in short they are currently similar constraints.

Double-clicking a constraint selects the constraint and then presses the Delete button on the keyboard to delete the constraint.

There are currently two constraints left

Both of these constraints require you to select two controls at the same time, and then add a button

Delete the aspect ratio and fixed height constraints of the first button

Add upper and lower left and right margin constraints for a second button

After adding, we can find the error ~ This is because the compiler does not know how to configure the height for both buttons because it is adaptive to the font, but because you set the top margin for the second button, which is two buttons up and down distance of 0 then how to determine their height. The first adaptive second elongated. The second adaptive first elongate. This is ambiguous.

All we need to do is add a equal heights constraint.

Select two buttons First

You can also look to the left to make sure it's all selected.

If the two button backgrounds are dimmed, they're all selected.

After the addition is completed, it will not be an error update frame

You can find two buttons of the same height

The basic constraint is now complete.

If you don't read it, you can see it again if you haven't read it, Liancheng brother is better than ~23333.