iOS Adaptive Layout II — Trait Collection

Figure 1. Split view for Multitasking of iPad.

With the release of iOS 13, Apple brought many ideas and features to the iOS platform. Beside features that are easily noticed in visual like the dark mode and the SwiftUI, there are two important news related to the adaptive layout: the release of iPadOS and Mac Catalyst.

The iPadOS has most features that are available on iOS, and be enhanced by some features that are specific to the iPad. For example, on the iPasOS you can switch between apps more easily with the Multitasking and Slider Over feature, which improves the experience of working on iPad. The Catalyst, which is available on Xcode 11 and MacOS 14.15, is a tool to help developers port their iPadOS Apps to the Mac. All the things that a developer needs to do is set one checkbox checked on the Xcode.

It is easy for iOS developers to deploy apps on the iPadOS and MacOS now, but when we do so, we have to deal with the different app layout because the screen size and orientation change frequently on the iPad and Mac. To handle the possible cases that the layout could be, a better way is to make the app adaptive. In this article, we will see another key point to make your app adaptive: the Trait Collection.

Let’s get started!

The Trait Collection

Trait represents the information about the interface environment. It contains something like the size class, the display scale and the user interface style. Here is the definition of trait collection from the Apple developer document: The iOS interface environment for your app, defined by traits such as horizontal and vertical size class, display scale, and user interface idiom.

There is one protocol in the UIKit called UITraitEnvironment. It exposes the trait information by the variable traitCollection. The protocol is conformed by the UIViewController so you can access the trait of certain view controller by the property traitCollection.

Now we know the meaning of the trait collection. Let’s take a look how it works on the real app!

Layout views on the iPad

In the previous article iOS Adaptive Layout I — The Size Class, we had built a project AdaptiveLayoutDemo to test the behavior of layout when the size class changed between different orientation of iPhone. To remind you, we had built a project which works well on the portrait and landscape orientation like the gif below.

Project built in the iOS Adaptive Layout I — The Size Class

In this article, we will build some features based on the previous project. Open the project AdaptiveLayoutDemo and run it on the iPad simulator. You will see something like the figure 2:

Figure 2.

Don’t be panic. Seeing something like the empty view is not wrong because we set up all the constraints only for wC hR and wR hC size classes. The view doesn’t know how to layout and align the subviews in the wR hR size class on the iPad.

Figure 3 and figure 4 are the view layouts of the Youtube app on the iPad portrait and landscape orientation. I have drawn three colored rectangles to indicate how we gonna layout the playerContainerView, the titleContainerView and the scrollableContentContainerView on the iPad for our project.

Figure 3. View layouts of the Youtube app on the iPad with the portrait orientation.

Figure 4. View layouts of the Youtube app on the iPad with the landscape orientation.

Open the Main.storyboard and set the options for View as: iPad pro like figure 5.

Figure 5.

Then set Vary for Traits by enable Width and Height like figure 6. We will set up the layout of our project like the landscape orientation of Youtube app on the iPad.

Figure 6.

First, select the scrollableContentContainerView and enable the installed option for the wR hR size class on the Attribute inspector like the figure 7.

Figure 7.

Then specify the constraint for the scrollableContentContainerView like below: align the trailing, top and bottom of the scrollableContentContainerView to the trailing, top and bottom of Safe Area. And set the width of scrollableContentContainerView as 1/3 of the width of the Safe Area. The constraints should look like the figure 8.

Figure 8.

After that, make the the titleContainerView installed in wR hR like before, and set up constraints like below: align the leading and bottom of the titleContainerView to the leading and bottom of Safe Area. Align the trailing of the titleContainerView to the leading of the scrollableContentContainerView, and set the height of the titleContainerView as 2/5 of the height of the Safe Area. For now, the constraints should look like the figure 9.

Figure 9.

The last one is the playerContainerView. Let’s add constraint for it. Like before, make the playerContainerView installed in wR hR and add constraints as below: align the leading and top of the playerContainerView to the leading and top of the Safe Area. Align the trailing of the playerContainerView to the leading of the scrollableContentContainerView, and align the bottom of the playerContainerView to the top of the titleContainerView. For now, the constraints should look like the figure 10.

Figure 10.

Click Done Varying at the bottom right corner. Run the project in the iPad simulator. The layout would look like figure 11 and figure 12 in portrait and landscape orientation.

Figure 11.

Figure 12.

It looks fine for both the orientations, but there is a problem: the layout looks similar. It doesn’t change as the Youtube app as what we expected before! What’s wrong?

Remember that the size class for both the portrait and landscape orientation are wR hR? And in this article, we had added all the layouts just for the wR hR size class. That is the reason.

So how do we make the project work like the Youtube app on the iPad?

Override the Trait Collection

Open the Main.storyboard. Change the device between iPad and iPhone for the View as: option, and change the orientation to see what layout looks like in different size classes.

Figure 13. Change devices for the View as: option.

We had added constraints for the wC hR size class in the previous article iOS Adaptive Layout I — The Size Class, and the layout for the iPhone portrait orientation is what we expect for the portrait orientation for the iPad. So a way to make our project work like the Youtube app on the iPad is to override the trait collection. To do that, we need another view controller to be the parent view controller of the ViewController of the project, and use the parent view controller to control the size class of ViewController as we want.

Create a new view controller called TraitViewController like figure 14. Next

Figure 14.

, add a variable viewController. This variable would be the reference to the ViewController.

Add codes below in the viewDidLoad function to add the ViewController as a child view controller of the TraitViewController:

Then create a function checkSize as the codes below. The checkSize function will check the screen size and decide which size class should be used for the child view controller.

Call checkSize in the viewWillLayoutSubviews().

Run the project in the iPad simulator. You will see the project work like the gif below.

Layout changed after the iPad changed the orientation.

Cool! You have changed the layout behavior by overriding the trait of view controller!

In addition, you can drag another app to the left or right size of the iPad screen, and the iPad will enter the split view like the figure 15. That is the multitasking feature of the iPadOS. As you can see, the layout works fine even the size had changed to the 1/2 split view.

Figure 15. 1/2 split view of iPad.

Congratulation! You have make the app adaptive! If you want some challenge, you can set up the layout for the wC hC size class so that the project would works fine for any size class even on the smaller devices.

conclusion

In this tutorial, you have learned the knowledge of trait collection and learned how to override the size class for child view controller. In addition, the split view also be considered to verify the layout. With the skills you learned, you are able to make the app adaptive from now on!