Using Auto Layout, you can change the size of objects based on the size of the screen. This tutorial shows how to create responsive apps by adding Auto Layout pins.
- [Instructor] Using auto layout we can modify the frame rectangle of an object at runtime. So, what we've done so far is we have this object that is a certain size and then it moves or changes its X-Y coordinates based on the orientation of the device so that it always stays in the center. If you look at the X-Y coordinates, notice that they change when I go into landscape and change back when I go into portrait. So, let's say instead of doing that, we wanted the object to expand or contract in size based on the available screen real estate, so maybe it's the size on this screen but if we go to a smaller screen, maybe we give a little bit more space to the edges, so let's look at how to do that.
I'll go back to the iPhone XR and I'm going to remove the width and height constraints, so one way to remove a constraint is to select the object and then head over to the size inspector and then select the constraint you to delete, so let's say I want to delete the height constraint, I can just click on height right here, hit delete on my keyboard and it's now gone and of course the lines have changed to red showing that we don't have anything to indicate the height of our object and that's fine. You can also select a constraint by clicking on it, so I'll just click on this width constraint right here, hit the delete key and now we no longer have width and height constraints.
What we want to do instead is constrain the aspect ratio, so it's always going to be a square, it's just going to change in size based on the available screen real estate. So, to do that, you can right click and drag from the bottom up a little bit or diagonal, however you want, you just right click and drag within the object and release your mouse button and then choose Aspect Ratio. It's going to say instead of keeping the object a specific size, it's keeping it a specific aspect ratio, so we already have 150 for the width and the height and if you click on these pins and select 'em, you can go to the size inspector or the attributes inspector, both show the same data.
You can say that we have this first item is the View.Width, it's equal to the View.Height, so that's the second item right here and the multiplier is one to one. So, this is the pin that maintains the aspect ratio of the object. So, now what we need to do is specify one more thing because we know that it's supposed to be the same aspect ratio, we know it's supposed to be in the center but auto layout is missing some information and that's why we're seeing these red pins right here, so we need something else to specify how big the object should be and to do that, I'm going to create another auto layout pin to the right edge of the screen, so just right click and drag from the box to the right edge and then choose Trailing Space to Safe Area.
And that creates a pin right there and so, it says it needs to be this many points away from the right edge of the screen and it's going to maintain its aspect ratio, so watch it change in size when I go to a smaller device and the square is nice and small there. Well, maybe that's too small for this device, so what we can do is just click on that pin and modify its value, so with it selected, head over to the attribute inspector or the size inspector and change the value of the constant, so see where we're pinning that first item, Safe Area.Trailing which is the right edge to the second item which is View.Trailing, the right edge of the view.
So, all we need to do is just change this number for constant and then it will change the size of the object on the screen. So, it's 132 points from the edge now. If we decrease this value to 100, it'll make the object get a little bit bigger. So, you can customize that to your liking and it's still scaling in size but we have it a little bit bigger on the smaller devices. So, now we have an object that successfully scales in size based on how much space there is on the screen.
- Installing and using Xcode
- Working with storyboards
- Working with UI objects and events
- Resizing objects and layouts dynamically
- Coding UI objects such as buttons
- Loading and displaying data in table views
- Testing your iOS app