IOS Auto Layout Get started 06 details page (d) Layout the right label

Next, we typeset the controls on the right side of the detail page.

First, drag the right side of the space to the appropriate location:

Add a horizontal spacing constraint between labels:

Only horizontal spacing constraints are not enough, and you need to add a y-axis constraint to these three labels, where we use the align\baselines constraint on the editor menu to add a constraint for each row's two labels:

Next, we add the content for album value label by encoding, first creating a outlet for it:

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

Then modify the Nextbuttontapped method:

static Nsarray *albums; if (albums = = nil) {albums = @[@ ' The Complete Riverside recordings ', @ "Live at the Blue Note"];} Self.albumValueLabel.text = albums[index% 2];

Execute the program as follows, and the sliders and rating labels overlap:

Add a tailing space constraint with a value of-4 for the album Value label:

As you can see, the record label has also been changed, which is what we need to use the content Compression resistance priority, which is the function of controlling whether the space will be compressed. When the left and right labels use the same priority, the automatic layout compresses the labels on both sides when needed, but if we change the priority of the 5 labels on the left to 751, the auto-layout compresses only the labels on the side:

Execution of the program, the left side of the label can always be fully displayed, but there are problems in the horizontal mode:

Because there is a horizontal spacing constraint between the label on the left and the label on the right, which causes them to be arranged together by constraint, we need to change the trailing space constraint of the album Value label to >=:

We continue to refine this program to add constraints to text edit boxes and sliders.

First add the top space,heading space and trailing space constraints to the text box:

After adding these 3 constraints, the program performs the following:

We need to change the content hugging priority of the edit box to 199 so that the edit box is stretched when needed:

Finally, we add the following constraints to the sliders and 4/5 tags:

Add the left and right constraints for ImageView to Superview, to the upper constraints on the child view, and to the lower constraints on a button:

I'll try everything. Preview this app on 3.5-inch, 4-inch, 4.7-inch and 5.5-inch iphone to see how it works:

Reprint Please specify source: http://blog.csdn.net/yamingwu/article/details/44246805

IOS Auto Layout Get started 06 details page (d) Layout the right label