Exploring UIStackView

If you have used Xcode 7 for any length of time, sooner or later you are bound to notice a new icon in the bottom right corner of storyboard editor called Stack.

bp02_im01_augmented

This icon is related to a new class introduced in iOS 9 called UIStackView. A stack view is a non-rendering subclass of UIView that allows you to layout a collection of views either horizontally or vertically. You can embed stack views within stack views to create complex layouts.

Print

Note: A stack view does not provide a user interface of its own, instead it just manages the size and position of views. Because of this, you cannot override drawRect, drawLayer, or similar methods in a stack view and setting some properties like backgroundColor wll have no effect.

A stack view manages the layout of its contents automatically, without you having to provide explicit auto layout constraints for the contents. You will however, need to specify the size/position of the stack view itself. (more on this later).

Going back to the previous example with embedded stack views. If you observe the document outline for the storyboard scene, you will see that the only constraints applied are to the stack view itself, and that there are no constraints setup for any of the contents (including embedded stack views), yet the user interface adapts to different screen sizes with ease.

Print

The views managed by a stack view are accessible through an array property called arrangedSubviews. The views are laid out along the stack views axis (horizontal / vertical) in the order in which they appear in the array. The exact size and position of the views is also influenced by the stack view’s distribution, spacing, and alignment properties.

Adding a UIStackView to a Scene.

There are two ways to add a stack view to a scene. The first involves dragging a Horizontal Stack View or Vertical Stack View from the object library onto a storyboard scene and then using further drag and drop operations to add buttons, labels, views onto the stack view. As you add more content to the stackview, the new content will be laid out horizontally or vertically (depending on the type of stacview).

Print

Print

Print

The second method involves selecting multiple existing items in a storyboard scene and using the stack button to embed them in a stack view.

Print

You can use the Attribute Inspector to change the attributes for the stack view (including its Axis), thus affecting the appearance of the content in the stack view.

Axis

The axis of a stack view is the line along which content is laid out, it can be either horizontal or vertical. In addition to the axis, three other properties influence the appearance of content in the stack view, these are the stck views alignment, distribution and spacing.

Print

Alignment

A stack view is basically a rectangle, and has two sides. The alignment property influences the side that is perpendicular to the axis

Print

For a horizontal stack view, Alignment can have four values Fill, Top, Center, and Bottom.

Print

  • Fill : Content views are resized so that their height equals the height of the stack view.
  • Top: Content views are positioned to be flush with the top edge of the stack view
  • Center: Content views are positioned to be centered around the axis of the stack view.
  • Bottom: Content views are positioned to be flush with the bottom edge of the stack view

For a vertical stack view, Alignment can have four values Fill, Leading, Center, and Trailing.

Print

  • Fill : Content views are resized so that their height equals the height of the stack view.
  • Leading: Content views are positioned to be flush with the left edge of the stack view
  • Center: Content views are positioned to be centered around the axis of the stack view.
  • Trailing: Content views are positioned to be flush with the right edge of the stack view

Distribution

The distribution property influences the side that is parallel to the axis.

Print

The most common values for distribution are:

  • Fill Equally: Content views are resized so as to have the same size parallel to the axis of the stack view.
  • Equal Spacing: The stack view is resized so as to have equal spacing between its contents parallel to the axis of the stack view. The amount of space is controlled by the spacing attribute.
  • Equal Centering: The stack view is resized so that the displacement parallel to the axis of the stack view between contents is equal.

Print

Spacing

The spacing property controls the spacing between elements in the collection view.

Print

Hiding/Showing contents dynamically

The views that have their size and position managed by a stack view are accessible via the stack view’s arrangedSubViews property.

You can hide/show a view whose layout is managed by a stack view, by changing the value of the hidden property of the view. When a visibility of a view within a stack view is changed, the stack view will recompute the size and position of all the members in the arrangedSubviews array.

Print

You can also add/remove an item from the arrangedSubviews array using the insertArrangedSubview and removeArrangedSubview methods. Adding a view into the arrangedSubviews array will also add the view into the stack view’s subviews array .

Note: A UIStackView inherits from UIView, and thus has a property called subviews just like any other UIView. A view can exist in the subviews array of a stack view, but not in the arrangedSubviews array.

Removing a view from the arrangedSubviews array will not remove the view from the stack view’s subviews array. This means that the view’s size and position will no longer be managed by the stack view, but the view will still be visible.
When this happens, the view whose layout is not being managed by the stack view any more is positioned at the top-left corner of the stack view. This is illustrated in the following illustration:

Print

To remove the view from the stack view’s subviews array, simply call the removeFromSuperview method on the view.

Leave a Reply

Your email address will not be published. Required fields are marked *