Fix Stack View Disasters

Stack views are supposed to help make layout and auto layout easier, but often they will leave you very frustrated. Take a look at this storyboard, which you can download from the exercise files. It’s a mess.


Let’s discuss some solutions for a mess a like this. You’ll see on the error panel I have a lot of errors, much of this is from stackviews being a set of constraints.

But let’s add one more stack view first. Select the Chicken, fish vegetable and beef buttons. Embed them in a stack view. In the attributes, You’ll see the Axis is vertical.

The stack view guesses at attributes and is often wrong. Change to horizontal. Change the Alignment to Fill and Distribution to Fill Equally.

That gives us a different looking stack view.

Now we can get to one of the first important places to check: the spacing. Xcode uses the inherent spacing of the buttons. A large chunk of this mess is this spacing issues, which is causing some conflicting constraints. Open the document outline and select all the stack views.

I’ll change all the stack views Spacing to 8.

That changes a lot:

Select the Stack view details. The alignment here is trailing. I’ll make that fill.

That already looks better, We’ve got some errors still, one set relating to hot and cold. The Temperature stack view Distribution is set to Fill. This leaves some ambiguity among the views, which you can see in teh error panel.

You can do a couple of things here. The first is use Fill Proportionally, and the size of the text dictates the size of the button.

I like using Fill, and use size constraints on the subviews. I’ll make the Hot and Cold buttons equal widths by control – dragging between them on the outline and select Equal Widths.

That give me equal sized buttons

I’d Like more space for my image. I’ll drag up from the soup image in the document outline to the Stack View Image, select Equal Heights

In the size attributes, Change the Multiplier for the constraint to 2/3 so it is 2/3 of the upper stack view

Nothing changes and there are errors here because I’m on Fill Equally distribution for Stack View Image, and need to be on Fill to use sizing. Change that setting and things look better still

We still have errors. Sometimes they come from outside the stack view. Take a look at the Search for Soup button in the size inspector.

It has a proportional height which conflicts with the vertical sizing of the stack view. Delete the size and more errors disappear.

The Add Crunchies!! button is huge. I can change the size of the Add Crunchies!! button and the soup base buttons to be their intrinsic content size, which is the height of the font with some default padding. An easy way to solve this is to grab a empty view, and place it at the bottom of the stack view.

Set its Background color to Clear. The view had no intrinsic size and can stretch and compress much easier the buttons. I still have errors all over the place. This is another distribution error on the root. Change to Fill equally, and it disappears.

This all looks good until you rotate the phone.

That’s why I made two halves in stack views embedded in a stack view. Click the Stack View Root. We can vary the Axis when in landscape on an iPhone. Hit the + next to the Axis. Change this to Any for Width, so we include plus size phones in landscape orientation. Add the variaton

You’ll get an axis variation. Change it to Horizontal

That looks a lot better.

You can keep going like this. The key is to check yourself on other devices and orientations to make sure you don’t get conflicts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.