Adaptive layouts in SwiftUI

90 views Asked by At

I'm working on an iOS app that supports both iPhone and iPads. I have created the following layout in SwiftUI.

struct WelcomeView: View {
    var body: some View {
        GeometryReader { geo in
            VStack {
                Spacer()
                    .frame(height: geo.size.height * 0.03)
                
                Group {
                    Text("Welcome.Title")
                    Text("App.Name")
                }
                .multilineTextAlignment(.center)
                .font(.title)
                .fontWeight(.bold)
                
                Image(.dog)
                    .resizable()
                    .frame(width: geo.size.width * 0.86, height: geo.size.height * 0.3)
                    .aspectRatio(contentMode: .fill)
                    .padding(.top, geo.size.height * 0.04)
                
                
                Text("Welcome.Message")
                    .font(.body)
                    .multilineTextAlignment(.center)
                    .frame(width: geo.size.width * 0.86)
                    .padding(.top, geo.size.height * 0.04)
                
                Spacer()
                
                Button("Welcome.PrimaryButton.Title") {
                    
                }
                .buttonStyle(.primary)
                .frame(width: geo.size.width * 0.86, height: geo.size.height * 0.068)
                .padding(.bottom)
            }
            .frame(width: geo.size.width, height: geo.size.height)
            .navigationBarBackButtonHidden()
        }
    }
}

Since it should support both iPhone and iPad screen sizes, I chose to define the dimensions for elements using the GeometryReader.

It looks nice on iPhone sizes.

Layout on iPhones

The problem is on iPads everything looks stretched out and huge!

Layout on iPad

I want to give sort of like a maximum value for dimensions only for iPads. For example, this is Facebook's login screen. The login form on iPad doesn't take up the entire width of the screen but it's not the same as the iPhone size as well.

Example layouts

Here's a rough mockup of the layout I'm trying to create for iPads. The best I can describe what I'm looking for is the elements shouldn't take up the entire width but at the same time, not having the same widths as on phone size. So sort of a middle ground.

Mockup

I tried fiddling with the minWidth/minHeight and maxWidth/maxHeight of frame modifier but no luck. How can I achieve something like this in SwiftUI?

0

There are 0 answers