Proportional Sizes in Autolayout


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?
Size classes Keynote 2.003

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.
Size classes Keynote 2.005

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.
frame 001 112514

Now try 3:1. You will  see the text view is now three times as big as a the buttons.
frame 002 112514
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.
frame003 112514
That looks good.

We can also use 1.53: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.

2 thoughts on “Proportional Sizes in Autolayout”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s