Let’s learn autolayout’s ratios features: this allows us to say a UI element should fill up a certain amount: half its container vertically, for example.
First create a label, give it a coloured background. Put it in the rough centre of your screen. Control drag it a little into its parent view, and from the popup select
In the right pane, under the view, they’ll be a
Constraints blue icon, with an arrow to expand, which you should press. Select the new constraint, and in the
Attributes inspector tab in the right hand pane, you’ll see
The first item should be our label with the width property, the relation should be
equals and the second item should be the super view with the width property. If they’re not like that, change them so they are.
Below that list of boxes, there’s a
multiplier box. Putting 0.75 in it would mean we want our width to be 0.75 of the superview’s width. Do that.
Xcode should be bitching to you by now about the label having no x or y position. As we learnt a couple of tutorials ago, align the label to top left margin.
Now if you open the simulator in both iPad, iPhone 5 etc, you’ll always have the label taking up 0.75 of the parent view.
Previously, we constrained a button based on app margins. We can do the same with other elements.
Add another button to the screen. Control drag from that to the other button we have. Then select
Vertical spacing. A new constraint will be added to the Left pane under the views.
Click on that, and on left hand pane, click on the sizing tab. You can now change the value of the spacing. Change
Constant to 16.
Now when you run the simulator, you can see the button is 16 pixels above the other button.
If you control drag from a ui element to a container, like the root container, then you’ll have the option to centre vertically or horizonally align, too.
Before we do any coding, we’ll work out how to use auto layout. Auto layout is the ability to expand/pin elements to the width, height etc of the varying screen sizes of iOS devices.
Go to your story board. On the right hand pane, open the file inspector tab. In the interface builder document section, ensure
Use auto layout is clicked.
Now add a button to your layout. Place it near the bottom of the screen, in the left hand corner.
Normally, when you show this on a bigger device, the button won’t be at the bottom of the screen, but only at pixel 410 or whatever is standard on the screen size for which you’re designing.
Let’s add an auto-layout constraints to change this. In the toolbar below the main design screen, there’s a little button that looks like a square X-Wing. It’s called
pin. Click it. It should popup a dialogue.
First, uncheck the
constrain to margins button. I don’t know what it means. I’ve been told to uncheck it. You should see a little graphic with four boxes around it, left, right, top, bottom.
Insert 16 in the left and right box and 20 in the bottom box. And click the little red lines. The button at the bottom should now say
Add 3 contraints. Click that.
Open the app in different screen sizes via the simulator. The button should now expand at the bottom of the screen.
It will place it there irrespective of the actual width of the button that you set, or the vertical location: the auto layout constraints override that.
You can also click on the button on next to
pin, which gives you update frames and update constraints options, which updates the views based on the auto layout values.
Open up Xcode. I’m on 8.0. Create a new project. Choose Single View Application. Why not? It’s simple. We’ll build up. And we’ll learn more.
On the left hand pane, click on the top icon there, the one that represents our application. In the screen that appears, you’ll have a
Deployment info section. You’ll see the
Main Interface box.
This should reference one of our storyboard files. Let’s create a new one, for edification purposes. File -> New -> Storyboard.
It’ll be empty. From the bottom right pane, click on
Object Library tab. And then drag a
ViewController into the main Storyboard file. Add a Label or something onto that.
On pane above, click on the
Attributes Inspector tab. And click, not the label anymore, but the overall
ViewController on the pane on the left. Back on the right-hand pane, in the attributes inspector, click on
Is Initial View Controller. This will allow our Storyboard to start this
ViewController when we launch the Storyboard.
Finally, go back to the click on the top icon again that represents our application, on the left hand pane. Now chose this Storyboard as our
Main Interface. Run the simulator. We’re now presented with our Storyboard on launching the app.