IOS Auto Layout auto layouts Getting Started 06 details page (middle) button layout

In the previous section we completed the layout setting for the singer name label, which we configured for the bottom three buttons layout.

First select the three buttons, set size to fit Content, so that the three buttons have the appropriate size:

To make it easier to see the size of the button, we set a background color for the button and set the constraint as shown:

In the preview window, the rotation screen is horizontal, and you can see that the layout of the three buttons is acceptable:

If the three buttons are the same width and look better, then we'll set the three buttons to equal width:

Since the constraint is always between 22, we will see that there is a button with two equals signs, which is normal.

If it is English, it looks good, but if our program to support internationalization, some languages longer than English, such as the Dutch Next is "Volgende artiest", then what will our program become?

As you can see, the delete and Cancel buttons overlap together:

So we're going to modify our constraint so that it is: if there is enough space to Rongan all the elements, make all the elements equal width.

Next, we add a horizontal spacing constraint for the delete and Cancel buttons, select the Horizontal spacing constraint, modify its constant-bit standard, and modify the relation to greater Than or Equal:

In this way, the button looks like the layout shown:

As you can see, the buttons in the horizontal mode, look good, but in the vertical mode although there is no overlap, but the last button is not complete the whole word of reality.

We can prioritize constraints, with a value range of 1 to 1000,1000, meaning that the constraint must always be met.

Select the equal width constraint, change their priority to 700, and the Orange Line, then update frames to resolve:

When modified, the constraint effect is as follows:

With size inspector, you can see that the delete and Cancel buttons are all 76 wide, and the Next button is not, because its equal width constraint cannot be met.

If you modify the delete to Verwijderen, and then look at the width of the three buttons, you can see that they are not of equal width because the width of the screen does not satisfy the equal width constraint, which is exactly what we expect from the adaptive effect.

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

IOS Auto Layout auto layouts Getting Started 06 details page (middle) button layout