💡

SwiftUIでButtonを実装するときはButtonStyleを使おう

2022/08/19に公開

Swift

SwiftUI

tech

概要

SwiftUIでカスタマイズした見た目のButtonを実装するときは、ButtonStyleを使うやり方とそうじゃないやり方があります。
ButtonStyleを使った方が便利で簡単でシンプルなコードを書くことができます。
しかし、SwiftUIのButtonの実装方法について検索するとButtonStyleを使わないやり方が多く見つかります。

この記事では角丸ボタンのコードを例に、SwiftUIでのButtonの作り方を紹介します。

SwiftUIでのButtonのカスタマイズ方法

SwiftUIでのButtonの作り方は大きく分けて二つ。Labelをカスタマイズする方法と、ButtonStyleを作成する方法です。

ButtonのLabelをカスタマイズする方法

RoundedButton.swift

struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            //カスタマイズしたLabel
            Text("Button")
                .padding()
                .foregroundColor(.white)
                .background(.green)
                .cornerRadius(8)
        }
    }
}

ButtonStyleを使ってカスタマイズする方法

RoundedButtonStyle.swift

struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            Text("ButtonStyle")
        }
        .buttonStyle(RoundedButtonStyle())
    }
}


struct RoundedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .foregroundColor(.white)
            .background(.green)
            .cornerRadius(8)
            .opacity(configuration.isPressed ? 0.2 : 1)
    }
}

二つの方法の比較

一見するとLabelのカスタマイズの方がコード量が少なくてシンプルなコードに見えます。しかし、実際の開発ではButtonのような部品のコードが肥大化することで可読性が下がり、わかりづらいコードになりやすいです。
複数のボタンに同じ見た目を適用するとコードがもっと無意味に複雑になっていきます。

ButtonStyleによるカスタマイズではButtonStyleを作成することで、Buttonを宣言するコードをシンプルに保つことができます。コードを再利用することも簡単になります。
もう一つのメリットとして、ボタンが押下された時の動作もconfigurationを使って簡単にカスタマイズすることができるようになります。

まとめ

SwiftUIでのButtonのカスタマイズはButtonStyleを使った方が便利でわかりやすい、シンプルなコードを書くことができます。
特に理由がなければButtonStyleによるカスタマイズを利用することがお勧めです。

今回は紹介しませんでしたが、公式にもいくつか便利なButtonStyleがあるのでぜひ利用してみてください。