Simplifying SwiftUI Layout Switching: HStack vs. VStack

SwiftUI, Apple’s modern declarative framework for building user interfaces, provides an array of tools to design layouts. Among these tools, HStack and VStack are fundamental for arranging views horizontally and vertically, respectively. However, sometimes you need to switch between them dynamically. In this blog post, we’ll explore different approaches to achieve this flexibility and make your SwiftUI layouts more adaptive.

The Scenario

Imagine you’re creating an app with a login screen. On this screen, you have several action buttons like “Login,” “Reset Password,” and “Create Account.” In portrait mode, stacking these buttons vertically works well, but in landscape mode, you’d prefer to arrange them horizontally.

struct LoginActionsView: View {
 var body: some View {
 VStack {
 Button("Login") { … }
 Button("Reset password") { … }
 Button("Create account") { … }
 }
 .buttonStyle(ActionButtonStyle())
 }
}

Approach 1: GeometryReader

One way to achieve this layout switch is by using `GeometryReader` to measure the available space. Based on the width-to-height ratio, you can decide whether to use an HStack or a VStack. This approach provides flexibility but comes with downsides, as it fills all available space on both axes, potentially causing unintended side effects.

struct DynamicStack<Content: View>: View {
    ...
    var body: some View {
        GeometryReader { proxy in
            Group {
                if proxy.size.width > proxy.size.height {
                    HStack(
                        alignment: verticalAlignment,
                        spacing: spacing,
                        content: content
                    )
                } else {
                    VStack(
                        alignment: horizontalAlignment,
                        spacing: spacing,
                        content: content
                    )
                }
            }
        }
    }
}

Approach 2: Size Classes

Instead of using `GeometryReader`, you can leverage Apple’s size class system. By observing the horizontal size class in the environment, you can choose between HStack and VStack layouts. This approach not only simplifies the code but also aligns with the behavior of system components across different devices and orientations.

struct DynamicStack<Content: View>: View {
    ...
    @Environment(\.horizontalSizeClass) private var sizeClass
    var body: some View {
         switch sizeClass {
             case .regular:
             hStack
             case .compact, .none:
             vStack
             @unknown default:
             vStack
             }
         }
}

Approach 3: Layout Protocol (iOS 16)

iOS 16 introduces the Layout protocol, allowing for custom layouts integrated into SwiftUI’s layout system. This protocol offers smooth and fully animatable transitions between layouts. By wrapping HStack and VStack with `AnyLayout`, you can easily switch between them.

private extension DynamicStack {
     var currentLayout: AnyLayout {
         switch sizeClass {
             case .regular, .none:
             return horizontalLayout
             case .compact:
             return verticalLayout
             @unknown default:
             return verticalLayout
             }
         }
    var horizontalLayout: AnyLayout {
         AnyLayout(HStack(
             alignment: verticalAlignment,
             spacing: spacing
             ))
         }
    var verticalLayout: AnyLayout {
         AnyLayout(VStack(
             alignment: horizontalAlignment,
             spacing: spacing
             ))
         }
}

Approach 4: ViewThatFits (iOS 16)

In iOS 16, you can also utilize the `ViewThatFits` view type to automatically pick the best layout. By providing both HStack and VStack as candidates, it will select the one that fits the context.

struct DynamicStack<Content: View>: View {
     …
     var body: some View {
         ViewThatFits {
             HStack(
                 alignment: verticalAlignment,
                 spacing: spacing,
                 content: content
                 )
            VStack(
                 alignment: horizontalAlignment,
                 spacing: spacing,
                 content: content
                 )
             }
         }
}

Conclusion

SwiftUI’s flexibility allows you to create adaptive layouts with ease. Whether you choose to use `GeometryReader`, size classes, the Layout protocol, or `ViewThatFits`, your SwiftUI layouts can seamlessly switch between HStack and VStack based on the current context. These techniques ensure your app’s interface remains user-friendly and responsive, providing a consistent experience across various devices and orientations.

Experiment with these approaches to discover which one best suits your needs. As SwiftUI continues to evolve, it’s essential to stay updated with the latest features and best practices to create stunning and adaptive user interfaces. Happy coding!