How to create different layouts using size classes

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

SwiftUI supports size classes natively by exposing them in the environment for us to read. To use them, first create an @Environment object that will store its value, then check the value of that property whenever you need, looking for either the .compact or .regular size class.

For example:

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        if horizontalSizeClass == .compact {
            Text("Compact")
        } else {
            Text("Regular")
        }
    }
}

Download this as an Xcode project

A phone in portrait mode showing the word “Compact” beside a phone in landscape mode showing the word “Regular”.

Size classes are a great way to make your user interfaces intelligently adapt to the available space by using a VStack or a HStack for your content. For example, if you have lots of space you might lay things out horizontally, but switch to vertical layout when space is limited.

Sponsor Hacking with Swift and reach the world's largest Swift community!

How to create different layouts using size classes

Similar solutions…