Practical Auto Layout: Beginning Auto Layout Techniques for iOS8 (2015)

Chapter 7. Proportional Sizes and the Multiplier

Currently, the text view and the buttons are the same size, which is a bit boring. What if we make the buttons bigger than the text area or the text area bigger than the buttons?

There is a way to do this. One of the properties of a constraint we have yet to play with is the multiplier. By changing the multiplier for Equal Widths, we get a Proportional Width constraint which takes the multiplier as a ratio of the two elements in the constraint.

Let's try this out. Select the text view in the project. and then click Edit in the Equal Width to Pepperoni constraint in the size inspector. You'll find the multiplier text box there.

Change the multiplier to 1:3.

You will see the button be three times as large as the text view.

Now try 3:1.

You will see the text view is now three times as big as the buttons.

For a good look in this app, lets have the buttons be one and a half times as big as the text view. We can type that in by 1.5.

That looks good.

Multipliers have several formats. We can also use 1.5:1, 3:2 or 3/2 to get the same result. We will be using this technique on the iPad to make a line of buttons with different sizes in the next section.

Reverse Multipliers

If the multiplier above did the opposite of the illustrations for you, don't panic. There is a reason. The order you control-drag to and from, or the order you add the views sets up a different relationship. We control-dragged from Pepperoni to Text View. If you did a multiplier of 1:3 gets you a smaller text view and 3:1 gets you a larger one.

However if you dragged from the text view to the Pepperoni button you get the opposite.

If you change the multiplier to 1:3.

The buttons are three times as small as the text view.

For a multiplier of 3:1.

You will see the text view is now three times as small as a the buttons.

If this happens to you, don't fret. The great thing about the multiplier is the control-drag order numbers are reciprocals of each other. If you are using a proportion of 3:2 and it is the opposite of what you want, make it 2:3. If you are using a proportion of 1.5, just make it 1:1.5 and everything will be fine.

Getting the order right is near impossible to remember. Using a multiplier that works for that situation is a lot easier. Apple is very aware of this issue, and in the drop down for the multiplier, includes a Reverse Multipler selection for quick changes.