Transcript

Welcome to this quick lesson on auto layout and proportional spacing of elements.

In the previous videos, we used equal widths to set the spacing for  various elements in auto layout.

But what if you want the sizes to be different? For example, what if in the app we are working with the buttons need to be bigger than the text area or the text area needed to be  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 constraint in the inspector. You’ll find the multiplier text box there.

Change the multiplier to 1:3 and 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 a 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:1.

That looks good.

We can also use 1.5,  3:2 or 3/2 to get the same result.

As we’ll see in the next lesson in this series,  This will let us make a small done button on a line of buttons for our iPad layout.