UIStackViewTom Bowden

Tokyo, December 2015

Some History• Before 2012, apps resized on rotation using autoresizing

masks. This made use of simple springs and struts.

• With iOS 6 in 2012, auto layout was born: “a powerful constraint-based layout engine that can handle a variety of user interfaces.”

• In WWDC 2014 (iOS 8), adaptive layouts with size classes were introduced. iOS defines two size classes: regular and compact.

1/40

More iOS Device Sizes• iPhones/iPod touches now come in 4-inch, 4.7-inch,

and 5.5-inch varieties. And we have the iPad mini, iPad Air, and iPad Pro. And who knows what else is coming?

• Auto layout is hard to do, and hard to maintain, especially with all these devices now in the ecosystem.

• With WWDC 2015, and iOS 9, Apple introduced a special type of view to alleviate the complexity of dealing with layouts: the stack view.

2/40

Stack View• The stack view takes two or more views and stacks

them either vertically or horizontally.

• The stack view is a view which is designed purely to help layout other views, its arranged subviews.

3/40

UIStackView• On iOS, the stack view has the class UIStackView. On

Mac OS, its class is NSStackView.

• The stack view addresses the problems we face when we try to put layout constraints on subviews that are configured in a horizontal row or a vertical column.

• In practice, it turns out that the vast majority of complex layouts can be expressed as such an arrangement, since the stack views can be nested inside one another.

4/40

Promised AdvantagesApple is encouraging developers to use Interface Builder to do layouts. At WWDC 2015, Apple engineers said that stack views are:

• Easy to build

• Easy to maintain, since there are less constraints to worry about

• Composable, that is, can be nested inside each other

• Lightweight, and therefore fast and performant

“We feel that you can build most of your user interfaces with stack views. So, we recommend starting with stack views and using constraints as needed.”

(Jason Yao, Engineer at Apple, WWDC 2015)

5/40

Properties of UIStackView• Stack views have no visible appearance. If you give its

background a color, it will be ignored. They do not do drawing. It does one thing: it manages auto layout constraints for you. It (usually) does this by using the intrinsic content sizes of its arranged subviews.

• A stack view’s horizontal or vertical dimension is called its axis.

• A stack view has additional properties for alignment, distribution, and spacing.

6/40

Alignment• This property of a stack view determines how it lays

out its arranged subviews perpendicular to its axis.

7/40

Distribution• This property of a stack view determines how it lays

out its arranged subviews along its axis.

8/40

Spacing• The (minimum) distance in points between the

adjacent edges of the stack view’s arranged views.

9/40

Constrain to ContainerYou are responsible for defining the position and (optionally) the size of the stack view using constraints. The stack view then manages the layout and size of its content.

10/40

Detailed ExamplesFour image views, simply dragged onto a Storyboard in IB…

11/40

Embed in Stack ViewEmbed into a stack view with horizontal axis…

12/40

Default Horizontal Stack UIStackViewAlignmentFill

Added constraints to all four sides, to the nearest neighbor. Default settings for the stack view are: Alignment Fill; Distribution Fill; Spacing 0.

The UIStackViewAlignmentFill setting does not use the subviews’ intrinsic content sizes. They are simply resized to fill the space vertically (for horizontal stack).

13/40

Horizontal Stack UIStackViewAlignmentTop

A layout for horizontal stacks where the stack view aligns the top edge of its arranged views along its top edge.

14/40

Horizontal Stack UIStackViewAlignmentCenter

A layout where the stack view aligns the center of its arranged views with its center along its axis.

15/40

Horizontal Stack UIStackViewAlignmentBottom

A layout for horizontal stacks where the stack view aligns the bottom edge of its arranged views along its bottom edge.

16/40

Horizontal Stack UIStackViewAlignmentFirstBaseLine

A layout where the stack view aligns its (text-based) arranged views based on their first baseline.

*This alignment is only valid for horizontal stacks*

17/40

Horizontal Stack UIStackViewAlignmentLastBaseLine

A layout where the stack view aligns its (text-based) arranged views based on their last baseline.

*This alignment is only valid for horizontal stacks*

18/40

NOTE

Baseline alignment only works on views whose height matches their intrinsic content size’s height.

If the view is stretched or compressed, the baseline appears in the wrong location.

19/40

Default Vertical Stack UIStackViewAlignmentFill

Default settings for the stack view are:

Alignment Fill; Distribution Fill; Spacing 0.

20/40

The UIStackViewAlignmentFill setting does not use the subviews’ intrinsic content sizes.

They are simply resized to fill the space horizontally (for vertical stack).

Vertical Stack UIStackViewAlignmentLeading

A layout for vertical stacks where the stack view aligns the leading edge of its arranged views along its leading edge.

21/40

Vertical Stack UIStackViewAlignmentCenter

A layout where the stack view aligns the center of its arranged views with its center along its axis.

22/40

Vertical Stack UIStackViewAlignmentTrailing

A layout for vertical stacks where the stack view aligns the trailing edge of its arranged views along its trailing edge.

23/40

Horizontal or Vertical Stack UIStackViewDistributionFill

A layout where the stack view resizes its arranged views so that they fill the available space along the stack view’s axis.

24/40

CHCR Priorities CH = Content Hugging; CR = Compression Resistance

A view with an intrinsic content size generates constraints implicitly on its size, along one or both of its axes (of class NSContentSizeLayoutConstraint).

A view’s content hugging priority (along an axis) determines its resistance to growing larger than its intrinsic size. The higher this priority, the more it will try not to be stretched. In effect, it’s an inequality constraint saying that the view’s size should be <= its intrinsic size. Its default priority is usually 250 (=UILayoutPriorityDefaultLow).

A view’s content compression resistance priority (along an axis) determines its resistance to shrinking smaller than its intrinsic size. The higher this priority, the more it will try not to be squashed. In effect, it’s an inequality constraint saying that the view’s size should be >= its intrinsic size. Its default priority is usually 750 (=UILayoutPriorityHigh).

25/40

Example: CH Priorities in Vertical Stack for UIStackViewDistributionFill

26/40

If the arranged views do not fill the stack view, it stretches the views according to their content hugging priority. If there is any ambiguity, the stack view resizes the arranged views based on their index in the arrangedSubviews array.

Horizontal or Vertical Stack UIStackViewDistributionFill

27/40

REVISITED!

Here, each image view has a CH priority (along each axis) of 250 and a CR priority (along each axis) of 750.

stretchedsquashed

Horizontal or Vertical Stack UIStackViewDistributionFillEqually

28/40Note: added spacing = 50

A layout where the stack view resizes its arranged views so that they fill the available space along the stack view’s axis. The views are resized so that they are all the same size along the stack view’s axis.

Horizontal or Vertical Stack UIStackViewDistributionFillProportionally

29/40Note: added spacing = 50

A layout where the stack view resizes its arranged views so that they fill the available space along the stack view’s axis. Views are resized proportionally based on their intrinsic content size along the stack view’s axis.

Horizontal or Vertical Stack UIStackViewDistributionEqualSpacing

30/40Note: added spacing = 50

A layout where the stack view positions its arranged views so that they fill the available space along the stack view’s axis.

When the arranged views do not fill the stack view, it pads the spacing between the views evenly. If the arranged views do not fit within the stack view, it shrinks the views according to their compression resistance priority.

If there is any ambiguity, the stack view shrinks the views based on their index in the arrangedSubviews array.

Horizontal or Vertical Stack UIStackViewDistributionEqualCentering

31/40Note: added spacing = 50

A layout that attempts to position the arranged views so that they have an equal center-to-center spacing along the stack view’s axis, while maintaining the spacing property’s distance between views.

If the arranged views do not fit within the stack view, it shrinks the spacing until it reaches the minimum spacing defined by its spacing property. If the views still do not fit, the stack view shrinks the arranged views according to their compression resistance priority.

If there is any ambiguity, the stack view shrinks the views based on their index in the arrangedSubviews array.

UIStackViewDistribution Comparisons

32/40

.Fill .FillEqually

.FillProportionally .EqualSpacing .EqualCentering

Some Code

33/40

layoutMarginsRelativeArrangement

34/40

• The layoutMarginsRelativeArrangement property determines whether the stack view lays out its arranged views relative to its layout margins.

• If true, the stack view will layout its arranged views relative to its layout margins.

• If false, it lays out the arranged views relative to its bounds. The default is false.

layoutMarginsRelativeArrangement Example

35/40

Animating the Hiding of an Arranged Subview

36/40

Stack View + Additional Constraints

37/40

• You can also fine tune an arranged view’s appearance by adding additional constraints to the arranged view.

• For example, you can use constraints to set a minimum or maximum height or width for the view.

• Or you can define an aspect ratio for the view. The stack view uses these constraints when laying out its content.

• NOTE: Be careful to avoid introducing conflicts when adding constraints to views inside a stack view. As a general rule of thumb, if a view’s size defaults back to its intrinsic content size for a given dimension, you can safely add a constraint for that dimension.

Real Experience

38/40

• Theoretically, stack views are great

• In practice, we have experienced some bugs, especially related to using stack views in scroll views, and self-sizing cells

• Clearly, UIStackView is very much a “Version 1.0”

• But, we have high hopes for UIStackView

• Only works for iOS 9, but back ports are out there (e.g. OAStackView, with support back to iOS 7)

Sources

39/40

• WWDC 2015 Video “Mysteries of Auto Layout 1”

• Matt Neuberg’s book “Programming iOS 9”

• Paul Hudson on YouTube (@twostraws)

• Simon Allardice (iOS 9 Fundamentals Tutorial, Pluralsight)

• Apple’s UIStackView Class Reference

Thank You for Listening!

tom@eventacular.net

http://eventacular.net

Now: Q&A40/40