How to create different layouts using size classes
Fully updated for Xcode 11.4
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, like this:
@Environment(\.horizontalSizeClass) var horizontalSizeClassThen you check the value of that property whenever you need, looking for either the .compact or .regular size class, like this:
if horizontalSizeClass == .compact {
return Text("Compact")
} else {
return Text("Regular")
}Putting all that together, you might create a view like this:
struct ContentView: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
var body: some View {
if horizontalSizeClass == .compact {
return Text("Compact")
} else {
return Text("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.
SPONSORED Catch bugs as soon as they happen and know exactly why a crash occurred by integrating Instabug's SDK in one minute. You will automatically receive device data, network logs, and reproduction steps with every bug and crash report.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
