[SwiftUI] 버튼 스타일 (ButtonStyle) 만들어 쉽게 재사용하기

  앱 하나에 사용하는 버튼 스타일은 보통 규격화되어 있습니다. 따라서 버튼을 추가할 때마다 해당하는 스타일 값을 일일이 세팅하게되면 매우 수고스러운 일일 것입니다. UIKit을 사용하고 있다면 UIButton 클래스를 상속받아 커스텀 클래스를 활용하여 이 문제를 해결하였을 것입니다. SwiftUI에서는 ButtonStyle 프로토콜을 채용한 구조체를 만들어 쉽게 버튼 스타일을 재사용할 수 있습니다.

 

ButtonStyle을 적용하지 않은 Button

Button(action: viewModel.refresh) {
    Text(viewModel.refreshButtonTitle)
}
.frame(width: 230, height: 45)
.font(.system(size: 14))
.foregroundColor(Color(hex: 0x191919))
.background(Color(hex: 0x000000, alpha: 0.04))
.cornerRadius(6.0)

ButtonStyle 만들기

struct NormalButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .frame(width: 230, height: 45)
            .font(.system(size: 14))
            .foregroundColor(Color(hex: 0x191919))
            .background(Color(hex: 0x000000, alpha: 0.04))
            .cornerRadius(6.0)
    }
}

ButtonStyle 활용하기

Button(action: viewModel.refresh) {
    Text(viewModel.refreshButtonTitle)
}.buttonStyle(NormalButtonStyle())