iPhone and iPad ui design

Hi

I'm here because i need a help to understand how to design ui for both iPhone and iPad.

I've designed this simple ui:

var body: some View {

        

        VStack {

                

            // Vstack with logo and go to site button

            VStack {

                

                Image("Logo")

                    .resizable()

                    .frame(minWidth: 250, idealWidth: 250, maxWidth: 250, minHeight: 100, idealHeight: 100, maxHeight: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)

                    .offset(y: 50)

                

                Button("Vai al sito") {

                    goToHomeSite()

                }

                .font(.title)

                .frame(width: 250.0, height: 40.0)

                .foregroundColor(Color("SiteGreen"))

                .background(Color.white)

                .clipShape(Capsule())

                .offset(y: 60)

                

            }

            .frame(maxWidth: .infinity, maxHeight: 225, alignment: .top)

            .background(Color("SiteGreen"))

            .ignoresSafeArea()
}
}

In iPhone it works fine but in iPad the image and the button remain of the same width. I obviously understand why (I set ideal width and ideal height) but I can't understand how to obtain my result in other ways.

Could you please give me some suggestions?

Thanks

  • That's where we miss the convenience of UIKit constraints…

Add a Comment

Replies

You could use a GeometryReader to get the size of the VStack, and then use that when sizing the image.

  • I tried but it's not so simple because i can use geometry.size.width because my stack uses all the width but i can't use the geometry.size.height cause my stack has a fixed height. Any idea?

Add a Comment