New in SwiftUI 4: ViewThatFits

DevTechie Inc

Jun 24, 2022

ViewThatFits is a container view introduced with SwiftUI 4 and iOS 16. ViewThatFits holds collection of child views and displays a view depending upon the available size.

It does so by evaluating child views in the order they are defined and selects the child view whose size is ideal to fit in within the constrained space.

We provide views in the order we prefer, meaning we define in the order of largest to smallest view and ViewThatFits picks a child view depending upon the space provided by parent view.

This will get clear with an example. We will create a view which will display two Text views and a ViewThatFits container view.

ViewThatFits container view will contain two child views, both of them will contain buttons. One will contain buttons in VStack and other child view will contain buttons in HStack.

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("DevTechie")
                .font(.largeTitle)
            Text("ViewThatFits is a container view introduced with SwiftUI 4 and iOS 16. ViewThatFits holds collection of child views and displays a view depending upon the available size. It does so by evaluating child views in the order they are defined and selects the child view whose size is ideal to fit in within the constrained space. We provide views in the order we prefer, meaning we define in the order of largest to smallest view and ViewThatFits picks a child view depending upon the space provided by parent view.")
                .font(.title3)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.orange)
                .layoutPriority(1)
            ViewThatFits {
                VStack {
                    Button(action: {}) {
                        Label("Like", systemImage: "hand.thumbsup")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                    Button(action: {}) {
                        Label("Subscribe", systemImage: "heart")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                }
                
                HStack {
                    Button(action: {}) {
                        Label("Like", systemImage: "hand.thumbsup")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                    Button(action: {}) {
                        Label("Subscribe", systemImage: "heart")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                }
            }
        }
    }
}

There are few things to note here.

Only one child view from ViewThatFits will show up
VStack is defined first in ViewThatFits meaning its our preferred way of showing buttons but if we lack space, we will show them in HStack

Now let’s change the font size of middle Text view to title from title3

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("DevTechie")
                .font(.largeTitle)
            Text("ViewThatFits is a container view introduced with SwiftUI 4 and iOS 16. ViewThatFits holds collection of child views and displays a view depending upon the available size. It does so by evaluating child views in the order they are defined and selects the child view whose size is ideal to fit in within the constrained space. We provide views in the order we prefer, meaning we define in the order of largest to smallest view and ViewThatFits picks a child view depending upon the space provided by parent view.")
                .font(.title)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.orange)
                .layoutPriority(1)
            ViewThatFits {
                VStack {
                    Button(action: {}) {
                        Label("Like", systemImage: "hand.thumbsup")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                    Button(action: {}) {
                        Label("Subscribe", systemImage: "heart")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                }
                
                HStack {
                    Button(action: {}) {
                        Label("Like", systemImage: "hand.thumbsup")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                    Button(action: {}) {
                        Label("Subscribe", systemImage: "heart")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                }
            }
        }
    }
}

Since the layout priority of middle view is bigger than the other two views, our ViewThatFits now returns HStack as its the only child view which can fit in the available space.

With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com