[SwiftUI] ButtonStyle による Button カスタマイズ

環境＆対象

ButtonStyle による Button のカスタマイズ

SwiftUI2020 での ButtonStyle でのカスタマイズは、以下で説明しました。
[SwiftUI] Button の見た目カスタマイズ ButtonStyle の使い方

SwiftUI2021 では、Button に role という属性も追加されたので、改めて、ButtonStyle を使ったカスタマイズを説明していきます。

ButtonStyle

Apple のドキュメントは、こちら。

他に、PrimitiveButtonStyle という protocol も用意されていて こちらは、動作をカスタマイズする時に使う用です。

makeBody(configuration:)

ButtonStyle という protocol を満たすには、このメソッドを実装することが必要になります。

引数の Configuration は、ButtonStyle では、ButtonStyleConfiguration が渡されてきます。

ButtonStyleConfiguration

Apple のドキュメントは、こちら。

label, isPressed, role という３つの情報を持っています。

• label は、Button のうちの label 情報
• isPressed は、ボタン押下されているかの情報
• role は、role として指定された情報

MyButtonStyle を作ってみる

新しく導入された role 情報に応じて表示を変える ButtonStyle を作ってみます。

３種類の role 設定されたビュー

以下のコードをベースに作ってみます。３種類の role を指定したボタンを並べています。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {},
                   label: {Text("role: none")})
            Button(role: ButtonRole.cancel, action: {},
                   label: {Text("role: cancel")})
            Button(role: .destructive, action: {},
                   label: {Text("role: destructive")})
        }
            .padding()
    }
}

それぞれに、デフォルトのスタイルが適用されているため、.destructive の role が指定されたボタンは、テキストが赤く表示されています。

MyButtonStyle

role に応じて、以下のようになる ButtonStyle を作ってみます。

• .destructive 指定で、テキストが緑になる
• .cancel 指定されているとテキストの透明度が 0.5 になる

configuration に保持されている label へ、該当する View Modifier を設定していくことになります。

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            // (1)
            .opacity(configuration.role == .cancel ? 0.5 : 1.0)
            // (1)
            .foregroundColor(configuration.role == .destructive ? .green : .black)
    }
}

MyButtonStyle を適用する

ButtonStyle に準拠する形でつくった MyButtonStyle を適用するには、他の ButtonStyle と同様に、.buttonStyle で指定するだけです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {},
                   label: {Text("role: none")})
            Button(role: ButtonRole.cancel, action: {},
                   label: {Text("role: cancel")})
            Button(role: .destructive, action: {},
                   label: {Text("role: destructive")})
        }
        // (1) : .buttonStyle で指定する
        .buttonStyle(MyButtonStyle())
            .padding()
    }
}

まとめ：ButtonStyle による Button カスタマイズ

role に指定された情報を使って修飾を変更する ButtonStyle を作ってみました

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI 徹底入門

＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

最新版を購入するのがおすすめです。

現時点では、上記の Swift 5 に対応した第５版が最新版です。

関連記事:

[SwiftUI] Button の見た目カスタマイズ ButtonStyle の使い方 [SwiftUI] Button の新しい属性 role [SwiftUI] インジケータ付き LongPress できる Button (ButtonStyle を使ったカスタマイズ) [SwiftUI] Button の使い方