Join Scott Gardner for an in-depth discussion in this video Adaptive layout, part of iOS UI Development with Visual Tools.
- View Offline
- Adaptive layout allows us to design user interfaces using a single storyboard that will look great on multiple devices with varying screen sizes and in different orientations. While auto layout provides a way to dynamically lay out content, adaptive layout provides a way to dynamically add, remove, or change content based on certain sizes, which are referred to as size classes. Rather than thinking about pixel or point dimensions, adaptive layout relies primarily on just two traits, horizontal size class and vertical size class.
These traits are part of what's called a trait collection. There are additional traits that can be consulted in code when developing user interfaces, however, I'm going to focus on using the horizontal and vertical size class traits to visually design adaptive layouts using Interface Builder. These traits values can be compact, regular, or unspecified, which is also referred to as any. These trait values can be used to design user interfaces that will work on both iPhones and iPads in portrait or landscape orientations, and for the newer iPads that support it, approximately 1/3 or 2/3 and 1/2 screen widths.
Let's take a closer look. For iPhones and iPads in portrait, they all have the same vertical size class value, regular. As for horizontal size class, iPhones in portrait have a compact size class value and iPads have a regular size class value. When in landscape orientation, however, all iPhones have a compact vertical size class value, yet iPhones up to 6s have a compact horizontal size class value, while iPhone 6s Plus has a regular horizontal size class value.
iPads maintain their regular vertical and horizontal size class values, same as when in portrait. It's not just about designing adaptive layouts for a single app based on screen sizes and orientations, however. With iOS 9, Apple introduced two new multitasking capabilities available for newer model iPads, Slide Over and Split Views. Slide Over allows a user to slide over a second app in a right panel that overlays the primary app running beneath it by approximately 1/3 of the screen width. And while the primary app behind the Slide Over app maintains its horizontal size, the Slide Over app's horizontal size is compact.
This is the same in landscape. Split Views allow the user to run a second app alongside the primary one. The size and positioning of the secondary app can be about 1/3, which leaves roughly 2/3 of the screen for the primary app. Both apps are in compact size in portrait though. Size classes are not absolute. Just because primary and secondary apps are both compact, does not mean that they are the exact same size. They're not in this case. Size classes simply provide a way to design layouts based on specified size classes when you need to.
So when the secondary app is about 1/3 and the device is in portrait, both apps are compact. But in landscape, the primary app becomes regular, while the secondary app remains in compact. The secondary app can also be resized to take up half the screen width in landscape, in which case both the primary and secondary apps are compact. However, in portrait, the secondary app is closer to 1/3 width. Adaptive layout size classes enable designing unified user interfaces that can adjust to different screen sizes and orientations.
With this introduction to adaptive layout and size classes, I can over how to use auto layout constraints with size classes to create truly adaptive layouts that will help your apps look great on any iOS device and in any orientation.
Here iOS app architect Scott Gardner explains how to create designable views and dynamic and adaptive user interfaces for any screen size or orientation. He shows how to work with stack views, images, custom fonts, and Interface Builder's Auto Layout tools, which speed up your design process and help adhere to Apple's interface guidelines. Along the way, he provides best practices for designing interfaces that are clean, efficient, and enjoyable for users.
- Creating and customizing views
- Laying out a user interface
- Working with dynamic Auto Layout designs
- Stacking views
- Creating an adaptive layout
- Handling orientation changes
- Working with images
- Customizing fonts