In the conclusion of our series on auto layout, we’ll discuss the regular size for iPads and one side of the iPhone 6 plus. We’ll make a line of evenly spaced buttons using auto layout, first for the iPad, then again for the iPhone 6 plus in landscape with its odd regular width, compact height size.

Transcript

Hello, welcome to our final installment in the beginning auto layout videos. I’m Steve from MakeAppPie.com

With size classes we’ve discussed there are three classes: Compact, Any and Regular.

We’ve already discussed most iPhones have compact sizes, and in the previous lessons set up a special arrangement in compact height for landscape with buttons on the side.

This lesson will be on the regular class. In its default settings, an iPad and an iPhone 6 plus in landscape have regular sized sides.

iPads have regular sizes on both sides. The iPhone 6 plus has one regular side and one compact side.

In our demo, we’ll continue working with the layout from the previous videos. We’d like to have side by side buttons just below the label in regular views. We’ll also make the Done button proportionally smaller than the rest of the buttons.

We would like to keep our buttons proportionally sized on different devices. However the actual size of the view changes. There are a few techniques in auto layout we will use to accomplish equally sized buttons.

The key to equally sized buttons is keeping the beginning and end buttons in a specific place. We then add constraints to keep aligned vertically and the same space away from every other button. Next, we make all the buttons the same size and height as the beginning button and specify the width and height as necessary for the beginning button. Our final step will be to make one button proportionally sized smaller than the rest.

Let’s do this for all regular width devices. Change the size class to regular width any height.

If you cannot see it, move the preview over to show the iPad preview.

Our vertical constraints for the text view are currently set to be 10 points from the Cheese button and 10 points from the Done button. Those buttons will be moving and will mess up our text view when moved, so we’ll constrain the top and bottom constraints to the container view’s margins instead.

Control drag the text view to the bottom space and click Bottom space to Bottom Layout Guide to make a new constraint for the bottom view.

We’ll also do the same to the top margin of the text view. Control drag from the text view to the top of the container. Select Top Space to Top Layout Guide.

Often it’s best to clear constrains instead of changing them when making big changes. Clear the constraints on the Done button

Clear the constraints on the cheese button as well.

We will need some space to put the done button. Resize the Cheese button by dragging the right handle over until there is some space for a done button. Don’t worry how much, we will be setting sizes later.

Move the Done button to its new position and resize it to generally fit. Again, we don’t have to be anywhere close to perfect, as the constraints will do that for us. You can use the recommended choices from the guides as they show up.

Control drag to the right and select Trailing Space to Container to anchor this to the right margin.

Once done, control drag from the Done button to the Pepperoni button. Shift select Top, Equal Heights and Equal Widths.

Since the Pepperoni button is already anchored and sized we don’t do anything with it. We now need to set the middle Cheese button. Control drag the Cheese button to the Pepperoni button. Shift select Horizontal Spacing, Top, Equal Heights, Equal Widths.

Now control drag from the cheese to the done button. Shift select Horizontal Spacing, and Top.

Update the frames. We now have three buttons of equal widths aligned.

We want the Done button to be smaller than the other buttons. Select the Done button and then click Edit for Equal Width to Pepperoni. Change the multiplier to 1:3.

And we’re done. It looks good on the iPad.

However the preview in iPhone 6 plus in landscape is a big mess. The regular width, compact height has too many constraints and can’t figure out what to do. Change the size class of the storyboard to regular width, compact height.

Select Done and you will see far too many constraints. This is the point that is best just to get rid of it all.

Select the text view, which also has too many constraints and clear its constraints. Move and resize the text view using the guides.

Let’s do the same for the Done button. Select the Done Button and clear its constraints. Move the Done button over to the right margin aligned with the other buttons.

Now let’s get the Cheese button cleaned up. Select and clear the constraints. Move the cheese button to the center.

To finish our cleanup, clear the constraints on the Pepperoni button. It is in the right position so we don’t have to move it.

Select the text view, and then the pin menu. add i-Beams on the bottom, left and right. Pin the left margin to 0 points, the right margin to 0 points, and the bottom to 20 points. Set the height to 240 points.

Select the Pepperoni button. Pin 10 points to the top,10 to the bottom, 0 to the left margin, and update constraints. Remember this is to the nearest views, so we are 10 from the label and 10 from the text view.

Select the Done button. Pin 10 points from the top 10 points to the bottom, 0 points to the right margin, and again update the constraints.

Select the Cheese button. Pin left 10 points and right 10 points but don’t update its constraints. There are placement errors at the moment but we will deal with them after we set the vertical alignment and size.

Control drag from Cheese to Pepperoni and select Top.

Control drag from Cheese to Pepperoni again. We already have horizontal spacing and top defined. Shift click equal widths equal heights.

Set the size of the done button. Control drag from Done to Pepperoni. Shift click equal widths and equal heights.

Now everything is set up correctly. On the resolve menu, click update all frames.

We still need to make the done button smaller. Like before, select the Done button. In the inspector click the Edit button on Equal Width to Pepperoni. Change the multiplier there to 1:3.

Going over to the preview pane, we see the iPhone 6 plus is now set up correctly.

We’ve now completed the size class and auto layout of this app’s storyboard. a general lesson to remember is to start with width any, height: any and work your way to more detailed size classes if you need to make changes.

Thank you for watching this short series on beginning auto layout and size classes. For more cool stuff on iOS app development head over to makeAppPie.com.