Home iOS & Swift Books Auto Layout by Tutorials

3
Stack View Written by Jayven Nhan

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

UIStackView is a smart view container that intelligently arranges its subviews. Using stack views, you can create adaptive layouts with fewer constraints because most of the heavy layout work is done for you. In fact, Apple recommends that developers use stack views over manual constraints where possible.

To effectively use stack views, you need to familiarize yourself with their behavior. You need to understand how a stack view decides to align, distribute, space, size and position its subviews. The configurable stack view properties determine these factors.

In this chapter, you’ll learn about the following stack view topics:

  • Embedding views inside a stack view.
  • Adding constraints to a stack view.
  • Aligning and distributing views within a stack view.
  • Nesting stack views.
  • Deciding when and when not to use stack views.

These topics will help you understand how stack views operate. By the end of this chapter, you’ll have gained a solid foundation of stack views and be able to implement adaptive layouts with stack views in your projects.

Implementing a vertical stack view

Adding a stack view onto a view controller’s view using Interface Builder is similar to adding any other standard view object: You drag and drop a stack view object from the Object Library onto a view controller’s view. However, instead of doing that here, you’ll learn how to embed existing views into a vertical stack view.

First, open the starter project. Then, in the Storyboards group, open Profile.storyboard.

In the editor’s document outline, use Command-click to select the Profile Image View and the Full Name Label.

At the bottom of the editor, click Embed In.

From the dialog, select Stack View.

In the document outline, you’ll see a stack view with the profile image view and full name label embedded. You may notice that some constraints are missing in the embedded views. For instance, the constraint that spaces the profile image view’s bottom edge and the full name label’s top edge.

Your next task is to add constraints to the stack view.

Adding constraints to a stack view

Select the Profile Image View and open the Size inspector. Use Shift-click to select all of the view’s constraints, then click delete to delete the constraints.

Embedding views into a horizontal stack view

A stack view distributes its views in one of two axes: horizontal or vertical. In this section, you’ll implement a stack view that distributes its subviews on the horizontal axis. For this exercise, you’ll create a horizontal stack view with three embedded buttons.

Alignment and distribution

You’re ready to learn about stack view’s alignment and distribution properties.

Alignment

Alignment defines the stack view’s subviews layout arrangement perpendicular to the stack view’s axis. The alignment property values are different for a horizontal stack view versus a vertical stack view. You won’t implement all of the possible property values in this book; however, you’ll get to see the effect each property has on a stack view.

Horizontal axis fill alignment

In a horizontal stack view, a fill alignment makes the views take up all of the vertical space inside the stack view.

Horizontal axis top, bottom and center alignments

The top and bottom alignment properties arrange the subviews toward the top and bottom edge of the stack view, respectively. The center alignment property arranges the subviews directly in the middle of the stack view’s axis.

Horizontal axis first baseline and last baseline alignments

Imagine a yellow notepad. When you write on the notepad, you have lines on which to write your letters. These lines help you write in a straight line and mitigate the chances of letters moving in all kinds of directions.

Vertical axis alignments

The alignment options for a vertical stack view are: leading, trailing, fill and center.

Distribution property

You’ve seen that alignment controls the views’ layout perpendicular to the axis. Distribution controls the views’ layout parallel to the axis.

Nesting stack views

Just when you think stack views couldn’t get more powerful — BAM! — nested stack views. Yes, you read that right. It’s possible to have a stack view of stack views.

When not to use stack views

When you layout the UI, the first tool that comes to mind should be the stack view. A stack view reduces the number of constraints, makes adding and removing views trivial, supports intuitive animations and more.

Challenges

The profile view controller could use a facelift. Add a background view with the following specifications:

Key points

  • The stack view is a smart container that positions and sizes the views contained within itself.
  • Stack views empower developers to create adaptive layouts using fewer Auto Layout constraints.
  • Use stack view properties to modify the positions and sizes of the views within itself.
  • You can nest stack views within another stack view.
  • When creating layouts, a stack view should be your go-to tool. However, there are occasions where you may not want to use stack views.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.