iPad multitasking and StackView Jan 3 2019

To make the user experience better on iPad for multitasking remember that you can change the axis of your StackViews depending on the size class of your view or view controller.

Size Class

Size classes represent the relative space of the view or view controller on the device. There are two size classes, compact and regular, this means Compact has limited space and Regular has the regular/normal space. So this is how it looks for iPhone and iPad

For example, if we are talking of a single app then, for iPhones on portrait height will have a size class of Regular and it's width would have a class size of Compact, but depending on the model of the iPhone (plus sizes, for example) when they are in landscape some models would have a compact class size while the bigger models will have a regular class size.

1
2
3
4
5
6
7
8
on Portrait
      -----
      |   |
H = R |   |
      |   |
      -----
w = C

For an iPad in portrait or landscape, all of their size classes would be regular.

Multitasking

Multitasking changes this, we can now split the screen in two with two apps running at the same time. And when we have two apps taking screen space, we will change from regular to compact in some cases.

Multitasking is supported by iPad, and some iPhones, if you want to know all the cases check Apple's docummentation.

Here is a simplified version for iPads:

Landscape

1
2
split 1/2 each => both screens have horizontal class size of Compact   
split 2/3 left 1/3 right => left screens have horizontal class size of Regular and right Compact

Portrait

1
split 2/3 left 1/3 right => both horizontal class size of Compact

Trait Change

Users will normally change the orientation of their device while using our apps, it would be nice if we provided a nice user experience when this happens. What normally happens is that we only use StackView on a specific orientation and leave it at that, and it works but we can do better than that.

We could implement traitCollectionDidChange to handle this event. Imagine we have an IBOutlet called stackView where we want to display it's subviews neatly side by side, we tell stackView to stack the items horizontally when we have enough horizontal space (a regular class size) but when this changes we would like them to stack themselves vertically because we would have more space that way. To do that we can change the StackView's axis, this is what tells the StackView to stack items vertically or horizontally so the code would look like this:

1
2
3
4
5
6
7
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        if traitCollection.horizontalSizeClass == .compact {
            stackView.axis = .vertical
        } else {
            stackView.axis = .horizontal
        }
    }

It is a small change but will make our app seem more polish. Hope this helps and next time you use StackViews or other AutoLayout elements you take advantage of class sizes to give your user a nicer interaction, remember you can add constraints based on class sizes too.