An example of using viewthatfits adaptive view in swiftui 4.0

summary

stay App Chart display in progress , We need to draw the legend corresponding to the chart near the chart .

We know , The size of the legend matches the actual footprint .

If the actual space is relatively small , We will display the legend vertically , Otherwise, we can use a larger space to display the legend horizontally .

Generally speaking , How to realize the above functions ？

Previous solutions

We can use GeometryReader To determine the actual width , Then change the layout of each legend accordingly ：

struct LegendsView: View {
    
    //  Decide whether to use horizontal or vertical display layout 
    private func layoutByVStack(_ width: CGFloat? = nil) -> Bool {
    
        var layoutByVStack = false
        if let width = width, width <= 256 {
    
            layoutByVStack = true
        }
        return layoutByVStack
    }
    
    var body: some View {
    
        GeometryReader {
     reader in
            HStack {
    
                Text("Hives Count:")
                    .frame(width: 100, alignment: .leading)
                   
                if layoutByVStack(reader.size.width){
    
                    VStack {
    
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 15, height: 7)
                        Text(" success ")
                    }
                }else{
    
                    HStack {
    
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 15, height: 7)
                        Text(" success ")
                    }
                }
                
                if layoutByVStack(reader.size.width){
    
                    VStack {
    
                        Rectangle()
                            .fill(Color.orange)
                            .frame(width: 15, height: 7)
                        Text(" Failure ")
                    }
                }else{
    
                    HStack {
    
                        Rectangle()
                            .fill(Color.orange)
                            .frame(width: 15, height: 7)
                        Text(" Failure ")
                    }
                }
                
                if layoutByVStack(reader.size.width){
    
                    VStack {
    
                        Rectangle()
                            .fill(Color.gray.opacity(0.5))
                            .frame(width: 15, height: 7)
                        Text(" Undefined ")
                    }
                }else{
    
                    HStack {
    
                        Rectangle()
                            .fill(Color.gray.opacity(0.5))
                            .frame(width: 15, height: 7)
                        Text(" Undefined ")
                    }
                }
                
                Spacer()
            }
        }
    }
}

But if you do that , That threshold 256 It takes many experiments to finally determine .

SwiftUI 4.0 More flexible ViewThatFits

SwiftUI 4.0 It brings us new ViewThatFits Adaptive view , Using it, we can not only choose one of two , You can even choose the most suitable layout from multiple alternatives according to the compactness of the layout ：

struct LegendsView2: View {
    
    
    var body: some View {
    
        HStack {
    
            Text("Hives Count:")
                .frame(width: 100, alignment: .leading)
               
            ViewThatFits {
    
                HStack {
    
                    HStack {
    
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 15, height: 7)
                        Text(" success ")
                    }
                    
                    HStack {
    
                        Rectangle()
                            .fill(Color.orange)
                            .frame(width: 15, height: 7)
                        Text(" Failure ")
                    }
                    
                    HStack {
    
                        Rectangle()
                            .fill(Color.gray.opacity(0.5))
                            .frame(width: 15, height: 7)
                        Text(" Undefined ")
                    }
                }
                
                HStack {
    
                    VStack {
    
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 15, height: 7)
                        Text(" success ")
                    }
                    
                    VStack {
    
                        Rectangle()
                            .fill(Color.orange)
                            .frame(width: 15, height: 7)
                        Text(" Failure ")
                    }
                    
                    VStack {
    
                        Rectangle()
                            .fill(Color.gray.opacity(0.5))
                            .frame(width: 15, height: 7)
                        Text(" Undefined ")
                    }
                }
                
                VStack {
    
                    Rectangle()
                        .fill(Color.blue)
                        .frame(width: 15, height: 7)
                    
                    Rectangle()
                        .fill(Color.orange)
                        .frame(width: 15, height: 7)
                    
                    Rectangle()
                        .fill(Color.gray.opacity(0.5))
                        .frame(width: 15, height: 7)
                }
            }
            
            //  We can also use multiple ViewThatFits View , Implement an independent recommended layout for each legend 
            /* ViewThatFits { HStack { Rectangle() .fill(Color.blue) .frame(width: 15, height: 7) Text(" success ") } VStack { Rectangle() .fill(Color.blue) .frame(width: 15, height: 7) Text(" success ") } } ViewThatFits { HStack { Rectangle() .fill(Color.orange) .frame(width: 15, height: 7) Text(" Failure ") } VStack { Rectangle() .fill(Color.orange) .frame(width: 15, height: 7) Text(" Failure ") } } ViewThatFits { HStack { Rectangle() .fill(Color.gray.opacity(0.5)) .frame(width: 15, height: 7) Text(" Undefined ") } VStack { Rectangle() .fill(Color.gray.opacity(0.5)) .frame(width: 15, height: 7) Text(" Undefined ") } } */
            Spacer()
        }
    }
}

thus , We can completely eliminate GeometryReader And the threshold “ Upset ”, Very convenient ：

summary

In this blog post , We use a practical example to introduce SwiftUI 4.0 in ViewThatFits Use of adaptive views , More content can be viewed from the following links ：

SwiftUI 4.0 (iOS 16) new ViewThatFits Introduction to view usage

that , See you next time ！