top of page
Search

Understanding Size Classes and Trait Variations in iOS App Development

Introduction

In iOS app development, designing flexible interfaces to accommodate various screen sizes is crucial for creating user-friendly applications.

Article Goal

You've probably encountered values like wC, wR, hC, and so on, which can be confusing. Don't worry! By the end of this article, you'll understand the concept of size classes, how to use them in interface design, and tips for creating user interfaces that adapt well to all devices.

Concepts

1. Size Classes

Size classes are a system in iOS app development that helps you design user interfaces suitable for different screen sizes. Size classes divide screen sizes into two main axes:

  • Width

  • Height

Each axis has two main types:

  • Compact: Small size (e.g., iPhone in portrait mode).

  • Regular: Large size (e.g., iPad in landscape mode).

For example, an iPad in landscape mode has a size class of Regular width and Regular height, while an iPhone in portrait mode has a size class of Compact width and Regular height. Understanding when a size class is compact or regular is key in iOS app development.

2. Trait Variations

Trait Variations allow you to adjust the user interface based on different size classes. In iOS app development, you can create variations of constraints, sizes, spacing, and other view properties for each specific size class. This helps optimize the user interface for each device type and screen orientation.

According to various reference materials and my own verification, the transition threshold between these two types is 600px.

How to Use Size Classes in iOS App Development

Let's practice a simple example to understand better how to use size classes in iOS app development. We will use Size Classes to change the text of a UILabel when an iPhone device rotates between portrait and landscape mode as follows:


class ViewController: UIViewController {
    @IBOutlet weak var textLabel: UILabel! // Connect UILabel IBOutlet from Interface Builder
    override func viewDidLoad() {
        super.viewDidLoad()   
        // Change the text of the label based on screen size
        updateLabelForOrientation()
    }
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
    
        // Update the text of the label when the screen size changes
        updateLabelForOrientation()
    }
    func updateLabelForOrientation() {
        if traitCollection.verticalSizeClass == .compact && traitCollection.horizontalSizeClass == .regular {
            // Device is in landscape mode
            textLabel.text = "Landscape Mode"
        } else if traitCollection.verticalSizeClass == .regular && traitCollection.horizontalSizeClass == .compact {
            // Device is in portrait mode
            textLabel.text = "Portrait Mode"
        }
    }
}

In the code above, the updateLabelForOrientation() function helps in identifying the orientation mode, a crucial aspect in iOS app development:

  • Portrait mode: The vertical axis is regular, and the horizontal axis is compact.

  • Landscape mode: The vertical axis is compact, and the horizontal axis is regular.

We check the Size Classes of the traitCollection to determine whether the device is in landscape or portrait mode and change the text of the UILabel accordingly. When you rotate the iPhone device from landscape to portrait mode or vice versa, the text of the UILabel will automatically update based on the new state of the device.


Using Interface Builder in iOS App Development

Step-by-Step Guide

Let's recall the characters mentioned at the beginning of the article; these are abbreviations for size classes:

  • wC: Width-Compact

  • wR: Width-Regular

  • hC: Height-Compact

  • hR: Height-Regular

To use size classes in Interface Builder during iOS app development, follow these steps:

  1. Create a new project in Xcode and open Interface Builder, then drag a label into the View.

  2. Change the label's text to Attributed:


iOS App Development

  1. Create size class constraints: Select the (+) button, then select the values and click the Add Variation button:

  • Portrait mode:

  • height(vertical): regular

  • width(horizontal): compact !


iOS App Development

  • Landscape mode:

  • height(vertical): compact

  • width(horizontal): regular

The result after setting the constraints:


iOS App Development

Now, build the application and see the results.

Conclusion

Size classes are a powerful tool in iOS app development that helps you create flexible and adaptive interfaces for various iOS devices. Understanding and using size classes effectively will make your application more user-friendly. Apply size classes to your current projects and further research Auto Layout and Trait Variations. If you encounter any difficulties using size classes, leave your questions in the comments, and I will answer them!

Comments

bottom of page