How to make a button in front of an image but constrained to the left bottom and right of the view in SwiftUI?

Question

How can I make the sign in view expand so that its left side is constrained to the left side and its right side is constrained to the right side as well?


import SwiftUI

struct Intro: View {
    var body: some View {
        ZStack {
            Image("IntroImage")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(alignment: .center)
            VStack {
                Spacer()
                Button(action: {}, label: {
                    Text("Sign in")
                        .foregroundColor(Color.black)
                        .padding()
                        .background(Color.green)
                })
            }
        }
        .ignoresSafeArea()
    }
}

struct Intro_Previews: PreviewProvider {
    static var previews: some View {
        Intro()
    }
}

I want it to look like this:

I am using a 640 × 1136 png for the image. I am testing it on all devices including iPhone 11.

jnpdx · Accepted Answer · 2021-04-24T03:13:06.820

2

Add frame(maxWidth: .infinity) to your Button's Text:

Button(action: {}, label: {
                    Text("Sign in")
                        .frame(maxWidth: .infinity)
                        .foregroundColor(Color.black)
                        .padding()
                        .background(Color.green)
})

Appearance on an iPhone 11:

edited Apr 24 '21 at 03:13

answered Apr 24 '21 at 02:52

jnpdx

45,847
6
64
94

Hard facts are posted here. – xTwisteDx Apr 24 '21 at 02:52
In my case this makes the view extend past its superview on the right side, but not on the left making the button off centered to the right. – ScottyBlades Apr 24 '21 at 03:03
Can you edit your question to include what's necessary to reproduce that? – jnpdx Apr 24 '21 at 03:04
Done, image size and iPhone listed on the bottom. – ScottyBlades Apr 24 '21 at 03:08
And this happens with nothing other than the code you listed? I've edited my answer with the appearance on an iPhone 11. – jnpdx Apr 24 '21 at 03:13
no. I forgot `.aspectRatio(contentMode: .fill) .frame(alignment: .center)` on the image. Its updated now. Ahh...Its the aspect ratio fill part that is aligning the left side of the image view to the left side and letting the right side extend past. My bad. – ScottyBlades Apr 24 '21 at 05:26
Do you know how to make the image aspectFill go center? Apparently, frame(alignment: .center) isn't cutting it. Funny thing, when I saw your distorted image that queued me to the issue of me forgetting the aspect Ratio. – ScottyBlades Apr 24 '21 at 05:28
This answer (https://stackoverflow.com/a/58292785/560942) suggests using `.layoutPriority(-1)` for making the Image not expand beyond the ZStack, which seems to solve the layout of the button issue. Don't have an immediate answer for the aspect fill and centering. – jnpdx Apr 24 '21 at 05:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231550/discussion-between-scottyblades-and-jnpdx). – ScottyBlades Apr 24 '21 at 18:54

How to make a button in front of an image but constrained to the left bottom and right of the view in SwiftUI?

1 Answers1