How I do autolayout

Leave a comment

I find autolayout hard. Really tricky at first. Here are some techniques that I found have helped.

  1. Work it out on paper

Screen Shot 2017-05-26 at 9.12.01 AM.png

  1. Make it happen in Interface Builder

Screen Shot 2017-05-26 at 9.12.51 AM.png

  1. Then convert to code if necessary.

Screen Shot 2017-05-26 at 9.13.43 AM.png

How to add elements to a UIStackView

Leave a comment

Drag out your elementsScreen Shot 2017-05-26 at 6.13.19 AM.png

Shift-Select them all and embed them in a StackView by hitting that little icon in the lower right with the down arrow.

Screen Shot 2017-05-26 at 6.14.28 AM.png

Pin StackView to the 4 corners with constraints

Screen Shot 2017-05-26 at 6.15.57 AM.png

 

Screen Shot 2017-05-26 at 6.16.18 AM.png

Now here’s the thing. The controls in the stackView will expand to fill whatever space is available. That’s why the button is so big. Give the button, and labels all some height constraints.

Screen Shot 2017-05-26 at 6.17.35 AM.png

Screen Shot 2017-05-26 at 6.18.13 AM.png

Screen Shot 2017-05-26 at 6.18.43 AM.png

When you do this you will get constraint violations. Why? Because you have pinned the StackView to the top and bottom, which gives it a height, that the labels and buttons don’t add up to. So to fix, remove the bottom StackView constraint (while centering the text on the labels).

Delete this constraint here.

Screen Shot 2017-05-26 at 6.20.36 AM.png

Now everything lays out beautifully.

Screen Shot 2017-05-26 at 6.21.19 AM.png

Notes

Where are these mysterious leading trailing constraints coming from?

If you are wondering why you get constraint violations every time you  try to add a leading or trailing space to a UIImage or anything else in StackView, it’s because the stackView elements by default always try to fill the entire space.

Screen Shot 2017-05-26 at 6.49.48 AM.png

For example. Here I added 20 leading trailing to this image, but it’s conflicting with regular leading training contraints already in place. Only I didn’t add them!

It’s because the image is trying to fill the space, so those constraints were put there implicitly. To change this you need to change the way the stackview tells it’s elements to fill the space. You do that here.

Screen Shot 2017-05-26 at 6.52.13 AM.png

If you really want to style that image, take it out of the stackview and do it above.

How to layout two views side-by-side portrait and landscape (detailed walkthrough)

Leave a comment

May-16-2017 10-37-35.gif

Setting up landscape

First add a vertitical stackView

Then add x2 UIViews colored red and blue inside it.

Screen Shot 2017-05-16 at 10.48.21 AM.png

Then pin the red and blue UIViews like so.

Screen Shot 2017-05-16 at 10.44.23 AM.png

For red

Screen Shot 2017-05-16 at 10.50.06 AM.png

For blue

Screen Shot 2017-05-16 at 10.50.41 AM.png

Equal height

Screen Shot 2017-05-16 at 10.52.05 AM.png

Give the subviews like read and blue by control dragging them into the ViewController. This will make them more readable.

Screen Shot 2017-05-16 at 10.55.13 AM.png

Screen Shot 2017-05-16 at 10.55.17 AM.png

Then pin the stackView to all x4 corners of the parent.

Screen Shot 2017-05-16 at 10.57.01 AM.png

View should now look like this.

Screen Shot 2017-05-16 at 10.58.22 AM.png

Handling Portrait

Screen Shot 2017-05-16 at 11.00.05 AM.png

So the trick with portrait is you want to turn off some constraints from landscape, while turning on others while in portrait (and vice versa).

There is no simple way to do this. My technique is to basically add one constraint at a time, and then flip back and forth to ensure I haven’t broken something somewhere else.

Here are the constraints we want in landscape. Let’s now set these up.

Screen Shot 2017-05-16 at 11.11.45 AM.png

Select the #1 constraint in portrait mode, and then flip to landscape mode.

Screen Shot 2017-05-16 at 11.13.15 AM.png

Screen Shot 2017-05-16 at 11.13.26 AM.png

Screen Shot 2017-05-16 at 11.13.29 AM.png

Open up the attribute inspect and click the ‘+’ sign beside the word installed.

Screen Shot 2017-05-16 at 11.15.02 AM.png

This is how you add an orientation customization in xcode. You find the attribute. Click the ‘+’ sign, and then whatever orientation and size you are currently in, it will add an exception for.

By clicking add variation here, we are allowing ourselves to turn this constraint off for this orientation and view.

Screen Shot 2017-05-16 at 11.16.31 AM.png

Once you do this, flip back to portrait and make sure everything looks good there (which it does).

Now repeat this process for each of the other constraints.

#2 Contraint – blue height = red height – turn this off in landscape

Now switch to portrait.

The trick here is you want to change the layout so the two views are beside each other. Before you go manually dragging views around however, remember that we are in a stackview.

Meaning we can simply change the orientation of the stackview, and everything should be taken care of for us.

#4 – Stackview orientation

Select the stackview, click it’s attribute inspector, and then click the ‘+’ sign beside ‘Axis’.

Screen Shot 2017-05-16 at 11.27.34 AM.png

Add the Variation, and then change the orientation to horizontal

Screen Shot 2017-05-16 at 11.27.48 AM.png

This will mess up your portrait view, but don’t worry about it. At least now the views will render horizontally in landscape.

#3 Constraint – blue leading – lets turn this off in portrait mode.

Screen Shot 2017-05-16 at 11.31.32 AM.pngScreen Shot 2017-05-16 at 11.31.39 AM.png

Screen Shot 2017-05-16 at 11.31.58 AM.png

Add a blue top in landscape

Screen Shot 2017-05-16 at 11.33.58 AM.png

Equal width in landscape (control drag from blue to red)

Screen Shot 2017-05-16 at 11.34.37 AM.png

Flipping back to portrait we now need to turn off some of these new constraints while in portrait mode.

Turn of equal widths in portrait.

Screen Shot 2017-05-16 at 11.36.22 AM.png

Screen Shot 2017-05-16 at 11.36.30 AM.png

Screen Shot 2017-05-16 at 11.36.38 AM.png

Turn off blue top

Screen Shot 2017-05-16 at 11.37.46 AM.png

Screen Shot 2017-05-16 at 11.37.54 AM.png

Screen Shot 2017-05-16 at 11.38.02 AM.png

And now everything should be good. There should be no constraint violations. If there are, just go over them and see if any are being applied when they shouldn’t. Draw a picture.

Constraints should now look like this.

Screen Shot 2017-05-16 at 11.41.46 AM.png

Screen Shot 2017-05-16 at 11.42.03 AM.png

Note: You will need to repeat this process for iPad and other view sizes if you want to support.

But final product should now look like this.May-16-2017 11-40-08.gif

Happy autolayout-ing!

 

 

How to layout two views side-by-side portrait and landscape

Leave a comment

So the trick with this is two fold.

  1. Use stack views
  2. Center the elements in the stackview

Screen Shot 2017-05-15 at 3.39.42 PM.png

Basically what do is add your constraints to the portrait layout the way you like them.

Then you flip over to your landscape view and disable any controls you don’t want there by hitting the ‘+’ and the uninstalling it for that configuration.

Screen Shot 2017-05-15 at 3.19.43 PM.png

Every time you do this, flip back to portrait and check and make sure that it still looks good.

Then, the other trick, is to setup a constraint so that your stackview renders horizontal when in landscape mode, and vertical for portrait.

Screen Shot 2017-05-15 at 3.21.19 PM.png

Same idea here. You click landscape, click the plus sign, change your orientation, go back to portrait and then disable it there.

That’s the big trick to all this. When ever you add a constraint in one configuration, you need to disable it in the other. And then keep flipping back and force making sure that only the constraints for that class size are enabled.

The other trick with the stackviews is to give the views inside them X and Y centering constraints for each orientation.

Screen Shot 2017-05-15 at 3.24.04 PM.png

Screen Shot 2017-05-15 at 3.24.15 PM.png

Don’t forget to pin your stack to the four corners of the view.

Screen Shot 2017-05-15 at 3.25.08 PM.png

And if you do these things, all should be good. Giddy up!

Screen Shot 2017-05-15 at 3.25.51 PM.png

Screen Shot 2017-05-15 at 3.26.04 PM.png

 

Autolayout Size classes

Leave a comment

Making Apps Adaptive Part 1

https://developer.apple.com/videos/play/wwdc2016/222/?time=511

9min mark

The Specifics of size classes

  • Two classes – horizontalSizeClass, verticalSizeClass
  • Two values – compact and regular
  • Means there are four combinations of traits and values

Screen Shot 2017-05-15 at 1.48.45 PM.png

  • w = width class, h = height class
  • Each one of these can have a value C or R

How does this help me

  • normally you would have to think about 4 combinations
  • But really it’s just two
  • Width is the most common trait you are going to have to interact with

 

How to make specific customizations

  • Demo of size class (21 min)
  • First, note the size of the class you are currently working in (wC hR)
  • This means the customizations you are about to make will apply to this size
  • Screen Shot 2017-05-15 at 2.05.55 PM.png
  • Then in the inspector, any fields with ‘+’ signs means that these are customizable

Screen Shot 2017-05-15 at 2.06.06 PM.png

So if you add a constraint via the ‘+’ sign, like a font, it should override the constraint that applies to all.

How to make work for constraints

So the above works for attributes you add like font and size. But for constraints you need a constraint in place before you can add a modification to it.

So here what you do is click a constraint, hit the ‘+’ sign on the constraint, and then set when it is installed from there. See this.

Autolayout with Paul Hagerty

Leave a comment

Episode 12 – Autolayout

Here is a simple way to view the Class Size diagram for autolayout

Screen Shot 2017-05-15 at 11.13.36 AM.png

If your layout is quite simple, just use these orientations.

But what’s even better is if you have some layout in common, do it in the Any Height Any Width quadrant and just put the differences in the other ones above and below.

Screen Shot 2017-05-15 at 11.14.06 AM.png

%d bloggers like this: