IOS Storyboard Constraints Detailed

Links: Http://www.jianshu.com/p/b88c65ffc3eb

A constraint means ... 10,000 words are omitted here ... All understand, will not say. directly into the actual combat link.

The control constraints in this article are all centered around the UITableView.

UITableView constraints:

The TableView in Uitableviewcontroller is not added to the constraint and has been bound.

UITableViewCell constraints are also not added, the width is consistent with its uitableview, height by the protocol method:

TableView (Tableview:uitableview, Heightforrowatindexpath Indexpath:nsindexpath) to decide.

the basic of the constraint

Constrain the base content to constrain its position and size.

Position

The position can be basically constrained by the x-coordinate (the distance from the left to the parent view), the y-coordinate (the distance from the top to the parent view), or constrain its center position.

Size

The size can be constrained by its width (height), or by the constraint of the x-coordinate, the y-coordinate, the distance from the right to the parent view, and the distance from the bottom to the parent view (provided that the parent view is already constrained), and so on.

Constraint type

Distance constraint

Below, add UITableView in Uiviewcontroller, and add constraints.

Constraint UITableView

First, look at this popup box

Constraint pop-up box

One should know that the top four items refer to the distance between the upper and lower left and right to the parent view.

Down this constrain to margains option to remove, without removing the words, even if you set the spacing to zero, it will not cling to the parent view, there will be a gap. About constrain to Margains, check the information yourself. This option is not normally checked.

Next, add the constraints of the parent view up and down, we set the value to 0, note that the red dashed point to a solid line to calculate the added,

Add a Distance constraint

Finally there is a step, click on the bottom of Add constants, or enter. Otherwise, not added.

Constraint determination

Many times, you will find that after adding the constraint, there will be a yellow arrow, meaning that you do not have update Frames (update location size), that is, the current position size is inconsistent with the size of the position after the constraint has been added.

Yellow Arrow

Click on update frames to operate as

Update Frames

You will find that its size has changed.

Update Frames Menu

The first update Frames is the size of the currently selected view, and the second update Frames
Is the size of the view that updates all (on the current same parent view).

The upper UITableView constrains the distance between the upper and lower left to the parent view, the x-coordinate, the y-coordinate, the width height is not ok? Think about it yourself.

When the constraint is not over, or the constraint is contradictory (for example, the distance from the left to the parent view is 0, but you add a constraint with a distance of 10 to the left to the parent view), there will be a red arrow

Constraint contradiction

Clicking on the red arrow will prompt you for a missing constraint or a contradiction, such as:

Constraint error Hints

Width height (width, height) constraints

Next we add a cell on the UITableView, and then add a uiview on the cell, called the View1, to the left of the UIView constraint, the top to the parent view, the distance is 0, the width height is 100, 44;

Width and height constraints

Width and height respectively constrain its width and height of the specific value, I think there is no need to say more, remember to add the point on the front of the tick on the good, do not think just fill in the value is good.

Wide Height

Equal height, equal width constraint

Add another uiview on top, called View2, with the constraint: the distance from the left to the View1 is 10, the distance from the top to the parent view is 0, the width and height are the same as the View1, the operation is as follows:

and other high-width constraints

Note the point:

1.view2 put up, the left and View1 to a little distance, if View2 left cover the view1 part, then add the left constraint, add is View2 left to the parent view of the distance, the error diagram is as follows, do not imitate:

Error map

2. To add the equal width equal height two constraints, to select both View1 and VIEW2 (Command key),

Check two figure

Otherwise, the two options for the menu bar are gray:

Grey Menu

Multiple views equal width or equal height, can be selected at the same time multiple, not necessarily two, but at least two.

Proportional constraints

Add a uiview on the cell called VIEW3, constrained to: Left distance view2 is 10, top margin parent view is 0, Width 100, width height ratio 4:1

Demos such as:

Proportional constraints

Note the point:

The precondition of proportional constraint is to constrain one of the wide heights

Then, tick aspect Ratio

Proportion

Last modified scale value

Scale value

Edge Alignment constraints

Add UIView, called VIEW4, constraint: its top to view3 distance is 10, and view3 left aligned, width and height are 44

Demos such as:

Left alignment constraint

Note: You must select both VIEW3 and VIEW4 to add alignment constraints, such as:

Align constraint menu

The four options are left-aligned, right-aligned, top-aligned, and bottom-aligned. Consistent usage.

Center alignment constraints

Add UIView, called VIEW5, add constraint: view5 and view4 Horizontal center alignment, top distance view4 is 10, width height is 100, 44;

The demo diagram is as follows:

Center Alignment

Note: The same as the edge alignment constraints, to select two view, multiple also.

The menu is as follows:

Center Align Menu

Three options are horizontal center alignment, vertical center alignment, and baseline alignment, respectively. Sense baseline alignment with the bottom alignment, no drill, nor often, perhaps my understanding is wrong, even the translation is wrong, there are problems please correct me, thank you.

Parent View Center Alignment

Add UIView, called VIEW6, add constraint: Aligns with the parent view horizontal center, the top to view5 distance is 10, and the width height is 100, 44, respectively.

The demo is as follows:

Parent View Center Alignment

Note: Simply select the current view to add the alignment to the parent View Center.

shortcut Constraints

Add UIView, called VIEW7, constraint: The top distance view6 is 10, the distance between the left and right to the parent view is 100, the height 44

The demo is as follows:

Shortcut constraints

Note: On the selected view, hold down the right mouse button, drag to the corresponding view to add constraints to release, the width of the height (drag around, drag up or down) constraints in this view to release.

common control constraints and Constraints FAQ

Practice:

Put three uiview on the cell, three view of the upper and lower distance of the parent view is 0, left and right adjacent, and equal width, width is the cell width of 1/3;

Demos such as:

Practice

This doesn't have to be talked about much.

UILabel, UIButton constraints

Add a Uilabel on the cell, constrain: the distance from the left to the parent view is 15, centered,

Demonstrate

Label constraint

You will find that only the position of the Uilabel is constrained, there is no constraint width, and there is no Red arrow warning on the top. This is because the width of the Uilabel can be changed with the number of words, font size and default. UIButton is similar to it. The distance between the right and the parent view of Uilabel is generally constrained to prevent the word from running to the outside of the screen. Other controls are subject to availability and are known for their characteristics when used more.

Problems:

1. Add a uiview, whose horizontal center to the left of the parent view is 1/3 of the width of the parent view, how do I add it?

1/3 pitch

Multiplier is a factor that defaults to 1. As you can see, the center position of the =1x1/2x is the width of the parent view when it is centered horizontally. The center is 1/3 of the parent view width, just change the factor 1 to 2/3.

2. For example, sometimes you want the picture to be centered on the whole text, not just the text center, how about half?

Center

The demo is as follows:

Center Demo

Understand it for yourself.

IOS Storyboard Constraints Detailed