ViewThatFits

SwiftUI is all about declarative UI and adaptive design. But sometimes, you need your view to intelligently choose between multiple layout options depending on the available space. That's where ViewThatFits comes in a sleek, space-aware container introduced in iOS 16 that makes responsive design a breeze.

Let's explore how it works and why it's a game-changer for building flexible interfaces.

What Is ViewThatFits?

ViewThatFits is a layout container that evaluates its child views in order and displays the first one that fits within the available space. Think of it as a smart switchboard—it tries each view until it finds one that works.

Syntax Overview:

ViewThatFits {
    Text("This is a long version of the text that might not fit.")
    Text("Shorter version.")
    Text("Tiny.")
}

In this example, SwiftUI will try to render the first Text. If it doesn't fit, it moves to the second, and so on.

Real-World Use Case: Responsive Buttons

Let's say you want a button that shows a full label on larger screens and a compact icon on smaller ones.

ViewThatFits {
    Label("Download", systemImage: "arrow.down.circle")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .clipShape(Capsule())

    Image(systemName: "arrow.down.circle")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .clipShape(Circle())
}

This layout automatically adapts to the space available—no need for manual size checks or geometry readers.

Adaptive Toolbars

Toolbars are another great use case. You might want to show a full set of controls on iPad, but simplify them on iPhone.

ViewThatFits(in: .horizontal) {
    HStack {
        Button("Edit") { }
        Button("Share") { }
        Button("Delete") { }
    }

    HStack {
        Image(systemName: "pencil")
        Image(systemName: "square.and.arrow.up")
        Image(systemName: "trash")
    }
}

The .horizontal parameter tells SwiftUI to evaluate fitting based on horizontal space only.

Tips and Gotchas

• Order matters: SwiftUI picks the first view that fits, so arrange from most desirable to most compact.

• Performance: Keep child views lightweight—SwiftUI evaluates each one until it finds a match.

• Combine with LayoutPriority: For even finer control, you can use layout priorities inside each child view.

Why It Matters

Before ViewThatFits, developers had to rely on GeometryReader, conditional logic, or custom layout algorithms to achieve responsive behavior. Now, it's declarative, elegant, and built right into SwiftUI.

Whether you're building for iPhone SE or a 12.9" iPad Pro, ViewThatFits helps your UI gracefully adapt without breaking a sweat.

Final Thoughts

SwiftUI continues to evolve, and ViewThatFits is a perfect example of its philosophy: write less code, get more adaptability. It's a small but mighty tool that can make your layouts smarter and your code cleaner.

Ready to give it a try? Drop it into your next layout and watch your UI respond like magic.

Resources:

• https://developer.apple.com/documentation/swiftui/viewthatfits

• https://developer.apple.com/documentation/swiftui/geometryreader

Read more

• NumberFormatter • 3 minutes reading time.
• What powers this website • 5 minutes reading time.
• SwiftUI Development with DynamicUI • 4 minutes reading time.

Share