SwiftUI: Two buttons with the same width/height

user_5554170 0
Viewed 2753

I have 2 buttons in an H/VStack. Both of them contain some text, in my example "Play" and "Pause". I would like to have that both buttons have the same width (and height) determined by the largest button. I have found some answers right here at SO but I can't get this code working unfortunately.

The following code illustrates the question:

import SwiftUI

struct ButtonsView: View {
    var body: some View {
        VStack {
            Button(action: { print("PLAY tapped") }){
                Text("Play")
            }

            Button(action: { print("PAUSE tapped") }) {
                Text("Pause")
            }
        }
    }
}

struct ButtonsView_Previews: PreviewProvider {
    static var previews: some View {
        ButtonsView()
    }
}

The tvOS preview from Xcode shows the problem:

enter image description here

I would be thankful for an explanation for newbies

swiftui swift user-interface
5 Answers

Here is run-time based approach without hard-coding. The idea is to detect max width of available buttons during drawing and apply it to other buttons on next update cycle (anyway it appears fluently and invisible for user).

Tested with Xcode 11.4 / tvOS 13.4

Required: Simulator or Device for testing, due to used run-time dispatched update

demo

struct ButtonsView: View {
    @State private var maxWidth: CGFloat = .zero
    var body: some View {
        VStack {
            Button(action: { print("PLAY tapped") }){
                Text("Play")
                    .background(rectReader($maxWidth))
                    .frame(minWidth: maxWidth)
            }.id(maxWidth) // !! to rebuild button (tvOS specific)

            Button(action: { print("PAUSE tapped") }) {
                Text("Pause Long Demo")
                    .background(rectReader($maxWidth))
                    .frame(minWidth: maxWidth)
            }.id(maxWidth) // !! to rebuild button (tvOS specific)
        }
    }

    // helper reader of view intrinsic width
    private func rectReader(_ binding: Binding<CGFloat>) -> some View {
        return GeometryReader { gp -> Color in
            DispatchQueue.main.async {
                binding.wrappedValue = max(binding.wrappedValue, gp.frame(in: .local).width)
            }
            return Color.clear
        }
    }

}
user_122990300

after reading hit and trial implementing SO solns etc finally resolved this issue posting so that newbies as well as intermediate can benefit

paste it and obtain equal size(square) views

VStack(alignment: .center){
           
            HStack(alignment:.center,spacing:0)
            {
               
                        Button(action: {}, label: {
                    
                                Text("Button one")
                        
                                .padding(35)
                                .foregroundColor(.white)
                                .font(.system(size: 12))
                                .background(Color.green)
                                .frame(maxWidth:.infinity,maxHeight: .infinity)
                                .multilineTextAlignment(.center)
                                .cornerRadius(6)
                        
                        
                        }).background(Color.green)
                            .cornerRadius(6)
                            .padding()
                            
         
                
               
                Button(action: {}, label: {
                    
                        Text("Button two")
                            .padding(35)
                            .foregroundColor(.white)
                            .font(.system(size: 12))
                            .frame(maxWidth:.infinity,maxHeight: .infinity)
                            .background(Color.green)
                            .multilineTextAlignment(.center)
                            
                }) .background(Color.green)
                    .buttonBorderShape(.roundedRectangle(radius: 8))
                    .cornerRadius(6)
                    .padding()
                                    
            }.fixedSize(horizontal: false, vertical: true)

Add as many as buttons inside it. You can adjust it for VStack by adding only one button in hstack and add another button in another Hstack. I gave a general soln for both VStack and Hstack. You can also adjust padding of button as .padding(.leading,5) .padding(.top,5) .padding(.bottom,5) .padding(.trailing,5) to adjust the gaps between buttons

user_146191820

You can implement the second custom layout example in the WWDC 2022 talk https://developer.apple.com/videos/play/wwdc2022/10056/ titled "Compose custom layouts with SwiftUI" which, if I understand the question, specifically solves it, for an arbitrary number of buttons/subviews. The example starts at the 7:50 mark.

user_22427050

I think the best solution is to use GeometryReader, which resizes the width of the content of the Button. However, you need to check that you set a width of the Wrapper around the GeometryReader, because otherwise it would try to use the full screen width. (depends where you use that view, or if it is your primary view)

VStack
{
    GeometryReader { geo in

        VStack
        {
            Button(action: { print("PLAY tapped") }){
                Text("Play")
                .frame(width: geo.size.width)
            }
            .border(Color.blue)

            Button(action: { print("Pause tapped") }){
                Text("PAUSE")
                .frame(width: geo.size.width)
            }
            .border(Color.blue)
        }

    }
}
.frame(width: 100)
.border(Color.yellow)

... which will look like that.

user_118780690

What happens if you put a Spacer() right after the Text("Play")? I think that might stretch out the 'Play' button.

Or maybe before and after Text("Play").

user_10879740
Related