From the course: iOS Development: Auto Layout Programmatically

Size views with multipliers - iOS Tutorial

From the course: iOS Development: Auto Layout Programmatically

Start my 1-month free trial

Size views with multipliers

“

- [Instructor] I wanna show you something. Go run the app on the iPad. You take a look at the buttons, you'll notice they don't feel the same as the ones on the phones. The wider display makes them slightly thinner. And sometimes, even too thin. Often with width and height, we like a proportional size that fits the device. In Auto Layout, that's what a multiplier does. Go ahead and stop the app, and go to the orderButton Layout code. Find the height constraint, we have this as a constant. With the multiplier, let's make it a proportion of a view. In the notation we've been using, I'd represent 10% of the view's height like this. So instead of orderButton.height, I'll make it view.height * 0.10. In the constraint, I'll change the second item to a view with an attribute of height, the multiplier to 0.10, and the constant to zero. So go ahead and pink here, the item becomes view, the attribute becomes height again, the multiplier is 0.1, and we'll have a constant of zero. Okay, run that on the iPad simulator again. Click French Toast, and the buttons are much bigger now. Pop up the other simulators, launch the app in both of them, and you'll see bigger buttons. Now select the iPhone X, and rotate it with Command + Right Arrow. The buttons shrink in height to accommodate the thinner size. You notice that the constant we were using for the label hasn't changed and still takes up a lot of space here. I'll change that, too. Stop the code, find the label.height constraint, which currently is sitting at 100, change it to view.height, we'll make it 15% of the views. And then again I can change the constraint here by changing nil to view, attribute to height, the multiplier 0.15, and the constant is 0.0. I'm gonna run that on the iPhone X again. I'll select French Toast, and now we have a thinner label. Rotate the phone with Command + Left Arrow, and you'll see the portrait sizes. Now another common use of the multiplier is different sized buttons on the bottom. Go ahead and stop the app, close up the console, and go to the backButton width constraint. We set that one to be equal width to the orderButton. Changing the multiplier changes the size of this button. You can change it to half the size. So you can change this to 0.5, and make this 0.5. Run again, click French Toast, and you'll see that the Back button is proportionally smaller than the Order button. If I wanted it bigger, I'd use a number larger than one. I can also use proportions here, which would be harder to calculate. Suppose I wanted a ratio of five to three with the back button being bigger. I can do this, let's close the app again. And set this up to five for the Back button and three for the Order button, and notice here I'm actually using integers. You can use integers or you can floats, whichever one you'd like to do. Even in the multiplier itself. So I'm just gonna do 5/3 here, so five is for the item one, three is the item two, so the item one will be bigger than the item two. Okay, go ahead and run that. And you see the Back button is bigger than the Order button. Now if I wanted to reverse the proportion, I can change the multiplier, I can make it three to five, or you can change the items. I'm gonna reverse the items this time, so I'm gonna stop this. And I'll change this item here to orderButton, and this one to backButton, and remember to change my comment. Run it again, click French Toast, and now Back button is smaller than Order button. Go ahead and rotate, and you'll see that they have a very different shape. But still we got Order bigger than Back, but nice and thin for this kind of shape. Working with multipliers in your code gives you the power to change the width and height of your views based on other views.

Contents