SwiftUI: Have button's right and left stick to parent's right and left

Question

SwiftUI question here...

I am trying to layout my button so it has the full width of the screen minus some padding of 16. I don't want to use this UIScreen.main.bounds.width. I want it to be dynamic.

Do you guys have any idea how to do this?

Thank you!

Code sample

By using static value it works

struct TestButton : View {
    var body: some View {
        Button(action: {

        }) {
            Text("Tap me")
        }
        .modifier(PrimaryButton())
    }
}

fileprivate struct PrimaryButton: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(width: 300, height: 28)
            .padding()
            .background(Color.yellow)
            .foregroundColor(Color.white)
    }
}

By using dfd's comment, does not change anything.

struct TestButton : View {
    var body: some View {
        Button(action: {

        }) {
            Text("Tap me")
        }
        .modifier(PrimaryButton())
    }
}

fileprivate struct PrimaryButton: ViewModifier {
    func body(content: Content) -> some View {
        content
            .relativeWidth(1.0)
            .padding()
            .background(Color.yellow)
            .foregroundColor(Color.white)
    }
}

Have you tried adding the modifier `.relativeWidth(1.00)` to the button? As long as it's not in an `HStack` I think that should work. Never tried pairing it with a `padding` modifier though - relativeWidth says to "make this be a % of my parent". — , Jul 12 '19 at 15:13
I was not aware of `.relativeWidth`, thank you! Unfortunately, it does not work... — Benjamin Clanet, Jul 12 '19 at 15:30
Already upvoted the answer by @Radagast - that's the way to do it. — , Jul 12 '19 at 16:05

score 2 · Accepted Answer · answered Jul 12 '19 at 15:57

2

GeometryReader may help you

for example:

SomeButton: View {
    var body: some View {
        GeometryReader { geometry in
            VStack() {
                Button(action:{}) {
                    Text("\(geometry.size.width)")
                }.padding()
                .frame(minWidth: geometry.frame(in: .global).size.width,
                        minHeight: geometry.frame(in: .global).size.height
                )
                .background(Color.red)
            }
        }
    }
}

answered Jul 12 '19 at 15:57

Radagast

300
1
5

Thank you, that works great for the width. The only issue I have is that `GeometryReader ` seems to take the whole height. I have to remove this line `minHeight: geometry.frame(in: .global).size.height` as I want the button to have its intrinsic size. When I do this, Geometry reader takes the whole height instead of just fitting to the height of the button... is it clear? Not sure how to handle this – Benjamin Clanet Jul 12 '19 at 16:23
1

As i understand you, you want to get height of the button ? You should look on [this](https://stackoverflow.com/questions/56729619/what-is-geometry-reader-in-swiftui/56729880#56729880) and when it in parent-view can you use .local instead of .global – Radagast Jul 15 '19 at 10:16

score 0 · Answer 2 · answered Oct 14 '19 at 11:50

Have you tried .frame(minWidth: 0, maxWidth: .infinity)

Setting the frame width to ".infinity" makes it use maximum width

SwiftUI Button fill parent

Here is the complete code -

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack(alignment: .leading, spacing: CGFloat(5)){

            Button(action: {}) {
                Text("Button fill width")
                    .font(.title)
                    .foregroundColor(.white)
            }.padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.gray)

            HStack(alignment: .center, spacing: CGFloat(5)){

                Button(action: {}) {
                    Text("Btn-1")
                        .font(.title)
                        .foregroundColor(.white)
                }.padding()
                .background(Color.gray)

                Button(action: {}) {
                    Text("Button fill width")
                        .font(.title)
                        .foregroundColor(.white)
                }.padding()
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.gray)

            }

            HStack(alignment: .center, spacing: CGFloat(5)){

                Button(action: {}) {
                    Text("B-1")
                        .font(.title)
                        .foregroundColor(.white)
                }.padding()
                .background(Color.gray)

                Button(action: {}) {
                    Text("B fill")
                        .font(.title)
                        .foregroundColor(.white)
                }.padding()
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.gray)

                Button(action: {}) {
                    Text("B fill")
                        .font(.title)
                        .foregroundColor(.white)
                }.padding()
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.gray)
            }

            HStack(alignment: .center, spacing: CGFloat(5)){
                Spacer()
                Text("Hello World...")
                    .font(.title)
                    .fontWeight(.heavy)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .padding(5)
                }.background(Color.gray)

            HStack(alignment: .center, spacing: CGFloat(5)){
                Spacer()
                Text("Hello World...")
                    .font(.body)
                    .fontWeight(.heavy)
                    .multilineTextAlignment(.leading)
                    .lineLimit(10)
                    .padding(5)
                }.background(Color.gray)


            HStack(alignment: .center, spacing: CGFloat(5)){
            Button(action: {}) {
                Text("1").foregroundColor(.black).bold()
                }.padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background( Image("RC_btn_default_normal")
            .renderingMode( Image.TemplateRenderingMode.original))

            Button(action: {}) {
                Text("2").foregroundColor(.black).bold()
            }.padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background( Image("RC_btn_default_normal")
            .renderingMode( Image.TemplateRenderingMode.original))

            Button(action: {}) {
                Text("3").foregroundColor(.black).bold()
            }.padding()
            .frame(minWidth: 0, maxWidth: .infinity)
           .background(Image("RC_btn_default_normal")
            .renderingMode( Image.TemplateRenderingMode.original))

            Button(action: {}) {
                Text("4").foregroundColor(.black).bold()
            }.padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background( Image("RC_btn_default_normal")
            .renderingMode( Image.TemplateRenderingMode.original))
            }
            Spacer()
        }.background(Color.green)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SwiftUI: Have button's right and left stick to parent's right and left

2 Answers2