SwiftUI ButtonStyle 적용해보기

SwiftUI ButtonStyle 적용해보기

 

최근에 버튼 누르고 뗄 때마다 Scale이 변하는 요구사항이 존재해서 SwiftUI에서는 이를 어떻게 서비스 특성에 맞게 반영할 수 있을지 공부.

 

버튼 스타일을 변경하기 위해서는 Configuration은 채택해 구현해서 사용하면 되어서 매우 간단하다.

UIKit보다 진짜 UI 관련해서는 엄청나게 시간이 절약된다.

 

샘플 코드

아래의 형태로 커스텀을 진행하고 `makeBody` 쪽만 조금 더 유의깊게 보자.

import SwiftUI

struct MyBlurButtonStyle: ButtonStyle {
    var color : Color
    
    // Configuration 위에서 상속받는 속성 그대로 사용할 수 있게 해줌
    func makeBody(configuration: Configuration) -> some View {
        
        configuration
            .label
            .font(.system(size: 20))
            .foregroundColor(Color.white)
            .padding()
            .background(color)
            .cornerRadius(20)
            .blur(radius: configuration.isPressed ? 10 : 0) // 클릭때면 흐리게 할 값 설정
    }
}

struct MyBlurButtonStyle_Previews: PreviewProvider {
    static var previews: some View {
        Button(action : {
                print("button clicked!")
            }, label: {
                Text("호호")
            }
        ).buttonStyle(MyBlurButtonStyle(color: Color.blue))
    }
}