iPad Multitasking Size Classes

Saturday, June 20, 2015 – 751 views

— by jazzychad

I wanted to better understand the different size classes involved in creating new iOS 9 iPad Multitasking apps, so I made a simple demo app that displays the current size class properties in every multitasking configuration.

The UI was made in Interface Builder using 5 labels, 3 stack views, and a few extra auto-layout constraints.

Here are the results:


Landscape Orientation

One active app

(W: Regular - H: Regular)

___


Slideover

Main app: (W: Regular - H: Regular)

Slideover app: (W: Compact - H: Regular)

___


Uneven Split

Left app: (W: Regular - H: Regular)

Right app: (W: Compact - H: Regular)

___


50/50 Split

Left app: (W: Compact - H: Regular)

Right app: (W: Compact - H: Regular)

___


Portrait Orientation

One active app

(W: Regular - H: Regular)

___


Slideover

Main app: (W: Regular - H: Regular)

Slideover app: (W: Compact - H: Regular)

___


Uneven Split

Left app: (W: Compact - H: Regular)

Right app: (W: Compact - H: Regular)

___


(Note: There is no 50/50 split in Portrait orientation)


Summary

The verticalSizeClass (height) of all configurations on iPad is Regular, and the horizontalSizeClass (width) is determined by the kind of split and the orientation of the device.

The Apple presenters at WWDC made an interesting point that you should no longer rely on physical device orientation to determine UI layout and instead use the relationship between your view's width and height if you need to special-case "portrait" versus "landscape" layout. Otherwise, depend on size classes and auto-layout.