이번 포스팅에서는 SwiftUI의 ButtonStyle에 대해서 알아봅니다.

ButtonStyle이란

ButtonStyle은 SwiftUI의 Button의 View를 재활용할 때 사용합니다. 실무를 하다가 보면 앱 전체의 버튼의 디자인은 동일하고 버튼 안의 텍스트만 다른 경우를 많이 볼 수 있는데요. 매번 같은 코드를 입력하지 않고 그 디자인을 ButtonStyle로 구현해두면 여러 곳에서 재사용할 수 있습니다.

ButtonStyle 구현

ButtonStyle을 만들기 위해서는 ButtonStyle 프로토콜을 준수하는 구조체를 만들면 됩니다. ButtonStyle 프로토콜을 준수하기 위해서는 makeBody라는 함수를 만들어주어야 하는데요. ButtonStyleConfiguration을 인자로 받습니다.

ButtonStyleConfiguration 타입 안에는 Button에 대한 정보들이 들어있는데요. 이 안에 있는 label이 Button의 텍스트의 View라고 생각하고 이 View에 다양한 커스터마이징을 해주면 됩니다.

이 버튼 스타일을 사용할 때는 .buttonStyle()에 해당 객체의 인스턴스를 전달하면 됩니다.

import SwiftUI

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(size: 20))
            .foregroundColor(.black)
            .background(Color.yellow)
            .cornerRadius(25)
    }
}

Button("나만의 버튼") {
    print("My own Button")
}
.buttonStyle(MyButtonStyle())

아래 코드처럼 ButtonStyle 구조체가 parameter를 가질 수도 있습니다.

struct MyButtonStyle2: ButtonStyle {
    
    let fontSize: CGFloat
    let textColor: Color
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(size: fontSize))
            .foregroundColor(textColor)
            .background(Color.yellow)
            .cornerRadius(25)
    }
}

Button("나만의 버튼2") {
    print("My own Button2")
}
.buttonStyle(MyButtonStyle2(fontSize: 20, textColor: .blue))

누르면 작아지는 버튼 만들기

configuration에는 label 뿐만 아니라 isPressed라는 속성도 존재하는데요. 버튼이 눌렸을 때 true, 아닐 때 false입니다. 이 속성과 .scaleEffect를 조합하면 누르면 작아지는 버튼을 만들 수 있습니다.

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(size: 20))
            .foregroundColor(.black)
            .padding(8)
            .background(Color.yellow)
            .cornerRadius(25)
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
    }
}