1. ButtonStyle Custom / 버튼 스타일

🦁ButtonStyle Custom / 버튼 스타일 🦁

버튼을 눌렀을 때, 아래와 같이 눌렸다는 표시를 위한 기본 효과가 있다.

 

앱 서비스의 분위기에 따라 해당 효과를 제거하기 위해 tap Gesture를 사용하는 경우도 있다.

버튼을 눌렀을 때 효과를 다양하게 커스텀 하는 방법에 대해 알아보자.

 

간단한 커스텀

            Button {
                
            } label: {
                Text("Custom")
                    .defaultButtonFormatting() //modifier

            }
            .buttonStyle(PlainButtonStyle()) // 조금 약한 효과
            .buttonStyle(DefaultButtonStyle()) //기본 효과

---

ButtyStyle 커스텀

모디파이어를 커스텀 했던 것과 유사하다.

struct PressableButtonStyle: ButtonStyle {
    
    let scaledAmount: CGFloat
    
    init(scaledAmount: CGFloat = 0.9) {
        self.scaledAmount = scaledAmount
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            //투명도, 밝기, 스케일효과 등 원하는대로 커스텀 가능
            .opacity(configuration.isPressed ? 0.9 : 1.0)
            .brightness(configuration.isPressed ? 0.05 : 0)
            .scaleEffect(configuration.isPressed ? scaledAmount : 1)
    }
}

적용

            Button {
                
            } label: {
                Text("Custom")
                    .defaultButtonFormatting() //modifier

            }
            .buttonStyle(PressableButtonStyle(scaledAmount: 0.9))

---

View 확장을 통한 메서드 활용법

extension View {
    
    func adjustPressableStyle(scaledAmount: CGFloat = 0.9) -> some View {
        self.buttonStyle(PressableButtonStyle(scaledAmount: scaledAmount))
    }
}

적용

            Button {
                
            } label: {
                Text("BASIC")
                    .defaultButtonFormatting()
            }
            .adjustPressableStyle()

개인적으로 scaleEffect 먹인 느낌이 굉장히 마음에 든다!