[SwiftUI]Button(ボタン)にタップエフェクト(tap effect)を付けるには？

どうも、ちょげ(@chogetarou)です。

Buttonにタップエフェクトをつける方法を紹介します。

方法
使用例

方法

Buttonにタップエフェクトを付けるには、ButtonStyleを使います。

まず、ButtonStyleの構造体を作成します。

struct EffectButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label //Buttonの本体
    }
}

次に、configuration.labelに対してButtonの装飾をします。

最後に、configuration.labelにエフェクトを付与します。

エフェクトを付与する際に、「configuration.isPressed」でタップ中にエフェクトが変化するようにします。

struct EffectButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .effect() //configuration.isPressedでタップ中にエフェクトが変化
    }
}

configuration.isPressedは、タップ中かどうかを保持するプロパティです。

isPressedはタップ中であれば「true」、そうでなければ「false」になります。

最後に、ButtonにButtonStyleを適用します。

Button(・・・)
    .buttonStyle(EffectButtonStyle())

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("Tap!")
            }){
                Text("Button")
            }
            .buttonStyle(EffectButtonStyle())  
        }
    }
}

struct EffectButtonStyle : ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding()
            .background(configuration.isPressed ? Color.red : Color.blue )
            .scaleEffect(configuration.isPressed ? 0.8 : 1.0)
            .shadow(color: configuration.isPressed ? .gray : .clear, radius: 2, x: 4, y: 4)
    }
}