iOS Adaptive Layout I — Size Class

iOS devices with different sizes. Photo by WWDC 2016.

With the release of new iOS devices every year since 2008, not only the screen size getting bigger and bigger but getting different. Apple encourages developers to design apps with the universal user interface and universal layout. Under the concept of universal, an app should be able to be deployed to any iOS device with any screen size, even those not existed now. To make your own app be universal, the key point is to understand the adaptive layout.

In the article, we will talk about the fundamental knowledge of adaptive layout and show you a demo to see what we can do with the adaptive layout.

Let’s get started!

The Size Classes

Figure 1. Example of size classes on iPhone and iPad in different orientations.

The size classes are introduced since iOS 8. For now, there are two properties for the size class, which are regular and compact. The regular denotes an expansive space, and the compact denotes a constraint space, respectively. The size classes are like an abstract rule that tell us the relationship of current screen size, and we should consider the UI under different size classed in the same time to make sure we display content properly.

As illustrated in figure 1, both the vertical size class and the horizontal size class are defined as regular on the portrait and landscape orientation of iPad. By contrast, the size classes are defined differently on the portrait and landscape orientation of iPhone.

The size class may not be the same for all iPhone devices. For example, iPhone plus has different size class to the iPhone X when the orientation is landscape.

Figure 2. Size classes for iPhone

As illustrated in the Figure 2, on some devices like iPhone X, iPhone 6s and iPhone SE, the size classes for landscape orientation are compact width and compact height. In the other hand, on the larger devices like iPhone XS MAX, iPhone XR and iPhone 8 plus, the size classes for landscape orientation are regular width and compact height.

The size class is usually denoted by the abbreviation. For example, the regular width and compact height can be denoted as wR hC.

Now we know the basic knowledge of size class, let’s make a practice with that!

Layout Views With Size Class

Open Xcode and create a new project AdaptiveLayoutDemo. Make sure the project can be deployed on iPhone and iPad, also support portrait and landscape orientations like the figure 3 below.

Figure 3. Basic project settings.

Switch to the Main.storyboard. We will demo the layout by the storyboard for convenience. You will see how to use storyboard to make views like figure4 and figure 5 for different orientations and how easily we can achieve that feature via storyboard.

Figure 4. Portrait orientation of project.

Figure 5. Landscape orientation of project

First, add a new view playerContainerView as a subview of the view controller and change its color as orange. Usually after we add a view into the storyboard, the next step is to setup its constraints. But before we set the constraints for playerContainerView, we have to do an important step, that is clicking the Vary for Traits and select both width and height (as illustrated in figure 6). With the Vary for Traits feature, any constraint you add will only be applied for that specific size class. And that is the key point that we can easily setup constraint for different size classes via storyboard. For now, any added constraint would be applied for compact width and regular height.

If you can not see the bottom section of figure 6, you can click on the View as: iPhone 11 to expand the section.

Figure 6. Vary for Trait feature of storyboard.

After enable the Vary for Trait option, set up the constraints like below: align the leading of playerContainerView to the leading of view, align the trailing of playerContainerView to the trailing of view and align the top of playerContainerView to the top of view. In addition, set a constraint to make the ratio of width and height of playerContainerView is 16:9.

Run the project. It should look like the figure 7 for now.

Figure 7.

Let’s add another new view titleContainerView as the subview and change its color as blue. Set constraints for titleContainerView like below (enable Vary for Trait like before): Align the leading and trailing of titleContainerView to the leading and trailing of view, align the top of titleContainerView to the top of view, and set the height constraint of titleContainerView as 75.

Add one more view scrollableContentContainerView as the subview and change its color as green. With the Vary for Trait enabled, set the constrains like below: align the leading and trailing of titleContainerView to the leading and trailing of view. Align the bottom of titleContainerView to the bottom of view, and align the top of titleContainerView to the bottom of titleContainerView.

Run the project. It should look like the figure 8 for now.

Figure 8.

With the simulator selected, press cmd + right or cmd + left to rotate the simulator. You will see all the three subviews gone when the simulator rotated to the landscape orientation, and back when the simulator is in portrait orientation. What is going on?

Figure 9.

Remember that we enable the Vary for Trait option when we setup layouts for all the three subviews? That means all the layouts we setup are only applied for the size class of landscape orientation, which is wC hR, and that is the reason that all three subviews gone when rotating the device to new size class wR hC.

To fix that, change the size class to wR hC from storyboard by selecting the landscape orientation like figure 10.

Figure 10.

Make the titleContainerView selected. Enable Vary for Traits and select the width like figure 11.

Figure 11.

Then tap the plus notation in the inspector and press the Add Variation. This step will add a variation on the size class regular with and any height. After that, unselect the wR to make the blue view not be installed in this size class.

Figure 12.

Figure 13.

Do the same things to make the green view not be installed on the size class regular width and any height. Notice the navigator, the titleContainerView and scrollableContentContainerView should look like disabled on the landscape orientation. Don’t forget to press Done Varying once finish setting up layouts for specific size class!

Figure 14.

One more step to make the view adaptive! Under the landscape orientation, enable the Vary for Traits again, and select width and height like before. Then select the playerContainerView, and add constraints like below: align the leading, trailing, top and bottom of playerContainerView to the leading, trailing, top and bottom of the safe area, like the figure 15.

Figure 15.

Build the project and run it on the simulator. You will see your project work like below

Congratulations! You have built a project with adaptive layout!

Conclusion

In this tutorial, you have learned the basic knowledge of size class and used the knowledge to build an adaptive project. You also learned that storyboard is helpful to set up the layout with the Vary for Traits option. In addition to the content of this tutorial, there are more issues when talking about the adaptive layout, like the iPad layout and the multitasking. In the next tutorial, we will see how to handle layouts when considering multitasking and setup layout on the iPad.