SwiftUI – Tips for button

In this post, we will see three tips that might help us to create buttons in our applications.

First of all, we open Xcode, we create an iOS project called TestButton and we add three buttons:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()
                Button(action: {
                    print("Button 1")
                }) {
                    Text("Button 1")
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 2")
                }) {
                    Text("Button 2")
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 3")
                }) {
                    Text("Button 3")
                }
                Spacer()
            }
        }
    }
}

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




Then, we create a new Swift file called ButtonStyleCustom where we will define the style that we will use for all buttons:

[ButtonStyleCustom.cs]

import SwiftUI

struct ButtonStyleCustom: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .font(.title)
            .padding()
            .background(Color.blue)
            .cornerRadius(40)
            .foregroundColor(.white)
    }
}


Finally, we will add it at the buttons:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()
                Button(action: {
                    print("Button 1")
                }) {
                    Text("Button 1")
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 2")
                }) {
                    Text("Button 2")
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 3")
                }) {
                    Text("Button 3")
                }
                Spacer()
            }
            .buttonStyle(ButtonStyleCustom())
        }
    }
}

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




Now, we will see the three tips:

FULL WIDTH BUTTON

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()
                Button(action: {
                    print("Button 1")
                }) {
                    Text("Button 1")
                        .frame(minWidth: 0, maxWidth: .infinity)
                }
                .padding(.horizontal, 20)
                
                Spacer()
                
                Button(action: {
                    print("Button 2")
                }) {
                    Text("Button 2")
                        .frame(minWidth: 0, maxWidth: .infinity)
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 3")
                }) {
                    Text("Button 3")
                        .frame(minWidth: 0, maxWidth: .infinity)
                }
                .padding(.horizontal, 60)
                
                Spacer()
            }
            .buttonStyle(ButtonStyleCustom())
        }
    }
}

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




BUTTON WITH IMAGE AND TEXT

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()
                Button(action: {
                    print("Button 1")
                }) {
                    HStack {
                        Image(systemName: "alarm")
                        Text("Button 1")
                    }
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 2")
                }) {
                    Text("Button 2")
                        .frame(minWidth: 0, maxWidth: .infinity)
                }
                
                Spacer()
                
                Button(action: {
                    print("Button 3")
                }) {
                    // From iOS 14, we can use Label
                    Label(
                        title: {
                            Text("Button 3")
                        },
                        icon: {
                            Image(systemName: "alarm")
                        }
                    )
                }
                
                Spacer()
            }
            .buttonStyle(ButtonStyleCustom())
        }
    }
}

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




CHANGING THE BUTTON STYLE WHEN BUTTON IS PRESSED

import SwiftUI

struct ButtonStyleCustom: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .font(.title)
            .padding()
            .background(Color.blue)
            .cornerRadius(40)
            .foregroundColor(.white)
            .scaleEffect(configuration.isPressed ? 0.5 : 1)
    }
}