IOS Auto Layout Get started 06 details page (c) layout the left label

In the first two sections we solved the layout of the singer's name label and button, and then we automatically lay out a list of labels in the interface.

to format a label

Select the 5 label selection Align\right Edges:

Add a location constraint to these labels:

• Release year label distance to left border is 0
• 64 Vertical spacing to the top of the Notes tab
• The vertical spacing between each label is 14

Choose Resolve Auto Layout issues->update frames, it looks much better:

Here, we only set the X-axis constraint for the label of release year, and the other 4 labels rely on the right-aligned constraint to determine their position on the x-axis.

For the English program, this is OK, because the release year is the longest, but what if the label is not the longest? Below, let's try adding some code:

Add outlet for release year label

@property (Weak, nonatomic) Iboutlet UILabel *releaseyearlabel;

Before the index++ statement for the nextbuttontapped function, add the following code:

static Nsarray *texts; if (texts = = nil) {texts = @[@ ' year: ', @ ' Very Long Label Text: ', @ ' Release year: '];} Self.releaseYearLabel.text = texts[index% 3];

Execute the program, the effect is as follows:

As you can see, when the release year label becomes very short, the other labels go out of bounds ...

Select the record label label, add leading Space to Superview constraint, select approximately or equal in relation

Run the program, now the effect is this:

The year label's position is not quite right, and we expect it to be right-aligned with the other labels. Now the year label has 2 horizontal constraints, one is leading space and one is right-aligned. Judging from the effect of the program execution, it is clear that the leading space constraint won. We can modify this constraint to be "greater than or equal to". Add another leading space horizontal constraint and reduce its priority to 200:

Because both the label and the button control are aware of their appropriate size (for displaying the caption), adding a second leading space horizontal constraint and setting its priority below 200 is intended so that the year label is not stretched. Because this constraint priority is less than (Content hugging), the label retains its original size.

using Subview

The label and other controls in the middle of the interface are more and more complex, and we'd better add a sub-view that puts the space in this sub-view so that the constraints on these spaces can be centrally managed.

Select all the tabs and buttons in the middle section of the interface and select the Embed In\view option in the editor menu to add them to the child view:

The downside is that adding controls to child view loses the constraints previously set on those controls. We need to add them all back.

Plus back only, we need to add a bottom space for the record label with a 20 constraint that determines the height of the child view.

Then we add a PIN constraint to the child view:

So our child view and the label of the constraint is done:

IOS Auto Layout Get started 06 details page (c) layout the left label