How to create dynamic size elements in swiftUI?

Question

I'm new to swiftui and started to somewhat catch on. But the main problem where I face is creating an app for different screen sizes. This is leading me to a bottleneck for creating apps. I try to solve this problem by enclosing the whole code in GeometryReader{ geometry in ...} and then specifying the sizes(width, height) as well .position of various elements by using the geometry. example code added. Yet when I switch screen sizes it looks like a mess. I have been stuck on this for a long time. Please correct me if I'm using a completely wrong approach.

struct CarInfoCard: View {
    
    @State var cardValue: String
    @State var cardUnit: String
    @State var cardType: String
    @State var cardNotify: Bool
    @State var geo: GeometryProxy
    
    var body: some View {
        VStack(alignment: .leading){
            
            HStack(alignment: .lastTextBaseline, spacing: 2) {
                Text(cardValue)
                    //.font(.system(size: 40, weight: .bold, design: .rounded))
                    .font(.title)
                    .bold()
                    .foregroundColor(Color("ColorButtonLogo"))
                
                Text(cardUnit)
                   // .font(.system(size: 25, weight: .bold, design: .rounded))
                    .font(.title3)
                    .bold()
                    .foregroundColor(Color("ColorButtonLogo"))
            }
            Text(cardType)
                //.font(.system(size: 15, design: .rounded))
                .font(.subheadline)
                .foregroundColor(Color("ColorButtonLogo"))
            
        }
        .frame(width: geo.size.width/3.5, height: geo.size.height/10,alignment: .leading)
        .frame(maxWidth:100)
        .padding(.vertical,5)
//        .padding(.bottom, 5)
        //.padding(.leading, 10)
        .padding(.horizontal, 5)
        .background(Color("ColorButton"))
        //.cornerRadius(20)
        .cornerRadius(geo.size.width/30)
        .shadow(color: Color.black.opacity(0.15), radius: 20, x: 10, y: 10)
    }
}

Kun Jeong · Accepted Answer · 2020-10-02 20:28:48Z

Depends on your layout style. If your layout is ratio-based, much like flexbox layouts, GeometryReader is indeed the way to go. However you'll need to do a lot of work to let all the UI elements work based on ratio.

SwiftUI is quite different from flexbox layouts because many elements change their size and shape based on the not only the device, but accessibility settings as well. This is why using the system fonts, symbols and colors is good practice - they change appropriately without any further work.

The best approach here in my experience is to build separate UIs for each device (roughly divided into iPhones, iPads, and Macs) and build them with the basic views and modifiers (spacers, alignments, and stacks) as much as possible. This way the view will change properly in different devices. If there's a part of your UI that can't rely on the basic building blocks, use GeoReader or #if device statements only on those parts. Do not try to build the whole UI ratio-based, it will be a very painful to implement.

If you just need each element to be a reasonable size, SwiftUI will do most of the work for you. If you have problems with alignment, learn alignment guides. If you need everything to scale proportionally, you might want to use a library instead! There are many flex layout libraries for Swift.

If you want more details on getting the code to work as intended, you might want to add some descriptions as to what is the expected result and what is the actual result.

Collectives™ on Stack Overflow

How to create dynamic size elements in swiftUI?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related