CODEWITHSUNDEEP
iosswiftswiftui
Seb
Seb

Reputation: 3215

Button size and color in SwiftUI

I am new in SwiftUI and also iOS development.

I tried to create 2 buttons, but I can't change the color of background or size.

it looks like this:

enter image description here

below is the code:

        HStack {
            Button( action: {
                print("click")
            }){
                Text("Login")
                    .foregroundColor(.purple)
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.purple, lineWidth: 1)
                    )
            }
            Button( action: {
                print("click")
            }){
                Text("Register")
                    .foregroundColor(.white)
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(Color.black, lineWidth: 1)
                            
                    )
                
            }
        }

I am looking to get a button which is almost using half of the screen with margin of 10px on each side. The goal is to have the 2 buttons to cover almost the width of the display. Also I try to make it thinner. the distance between the border on top and bottom is too big, I would like it close to the text when the one on left and right must be wider.

Also I can't figure out how to change the button background color to black

Any idea ?

Thanks

Upvotes: 1

Views: 3787

Answers (3)

Mir
Mir

Reputation: 459

=> Long story in short

May someone found it handy.

struct test: View {
let roundRect = RoundedRectangle(cornerRadius: 25.0)
var body: some View {
    HStack {
        Button( action: {
            print("click")
        }){
            Text("Login")
                .frame(width: UIScreen.main.bounds.width*0.4, height: 50, alignment: .center)
                .background(roundRect.fill(Color.orange))
                .overlay(roundRect.stroke())
        }
    }.foregroundColor(.purple)
  }
}

Upvotes: 2

swiftPunk
swiftPunk

Reputation: 1

Most important thing that we can remember for us is when we are facing with situation that we are not sure about size, then use shapes to fill all available space and then limit them as you want, like I did in code, you can change the numbers to your design.

import SwiftUI

struct ContentView: View {
    var body: some View {

        HStack {
            
            Button( action: {
                
                print("Login Button")
                
            }){
                
                CustomButtonView(stringOfButton: "Login")
                
                
            }
            
            Button( action: {
                
                print("Register Button")
                
            }){
                
                CustomButtonView(stringOfButton: "Register")

            }
            
        }
        .padding()

        
    }
}

struct CustomButtonView: View {
    
    var stringOfButton: String
    

    var body: some View {
        
        ZStack {
            
            Rectangle()
                .fill(Color.black)
                .cornerRadius(20)
                .overlay(
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(Color.purple, lineWidth: 1)
                )
                .frame(height: 50, alignment: .center)
            
            Text(stringOfButton)
                .foregroundColor(.purple)
            
        }
        
    }

}

enter image description here

Upvotes: 0

pawello2222
pawello2222

Reputation: 54466

You can create your own ButtonStyle which you can fully customise and reuse:

struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(10) // *make it thinner*
            .frame(maxWidth: .infinity) // expand horizontally 
            .foregroundColor(.purple)
            .background(
                Rectangle()
                    .stroke(Color.purple, lineWidth: 1)
                    .background(Color.black) // *change the button background color to black*
                    .cornerRadius(20)
            )
            .padding(.horizontal, 10) // *margin of 10px on each side*
            .opacity(configuration.isPressed ? 0.7 : 1)
    }
}

struct ContentView: View {
    var body: some View {
        HStack {
            Button("Login") {
                print("click")
            }
            .buttonStyle(CustomButtonStyle())
            Button("Register") {
                print("click")
            }
            .buttonStyle(CustomButtonStyle())
        }
    }
}

Upvotes: 1

Related Questions