[SwiftUI] Button の新しい属性 role

環境＆対象

ButtonStyle

過去の記事で、ButtonStyle を使ったカスタマイズを説明しました。
[SwiftUI] Button の見た目カスタマイズ ButtonStyle の使い方

iOS15/macOS12 になって、role という属性が追加されました。

ButtonRole

iOS15/macOS12 になって、新しく追加された属性です

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

ボタンの意味合いや押下することによる影響具合を、修飾する属性です。destructive と cancel を指定することができます。

以下は、ButtonStyle 指定せずに role だけ指定して表示した時の表示具合です。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/12/01
//  © 2021  SmallDeskSoftware
//

import SwiftUI

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

destructive 指定したボタンは、テキストが赤くなり、calcel 指定したボタンには 特に変更された様子はありません。

ButtonRole.descrutive

role に “destructive” が指定されたボタンは、破壊的な操作 であることを意味しています。大抵の場合、そのことは ユーザーにわかるようにすべきです。

多くのアプリで何かを削除するボタンが赤い色のテキストになっていることが多いと思いますが、あの色は、そのような意味合いです。

role を指定することで、そのような違いを アプリ開発側が 直接色指定するのではなく、コンポーネント側が適切な（ビジュアル的な）装飾を行えるようになります。

ButtonRole.cancel

操作をキャンセルする role を指定することもできます。それが、”cancel” です。

ButtonRole の指定は必須ではない

ちなみに、ButtonRole を指定することは必須ではありません。指定しなくとも普通に Button を作ることはできます。

ですが、別アプリとの UI の統一性 や 自アプリ内でもテーマ等との統一性を考えると、適切な role を設定しておくことで、後からの調整が容易になるケースがありそうです。

ButtonRole は拡張できる

ButtonRole は、enum ではなく、struct で定義されているので、自分の定義する role を追加することもできます。

role 情報は、configuration に渡されるので、独自の ButtonStyle を作成する時に、自分で定義した role を参照して独自の修飾をすることもできます。

まとめ：Button の新しい属性 role

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

SwiftUI 学習におすすめの本

SwiftUI 徹底入門

SwiftUI は、グラフィカルなライブラリということもあり、文字だけのテキストよりは、画像が多く入れられた書籍を読むと理解が進みやすいです。

自分で購入した中でおすすめできるものとしては、以下のものです。

2019 年発表の SwiftUI 1.0 相当を対象にしているので、2020/2021 に追加された一部の機能は、説明されていません。

ですが、SwiftUI 入門書としては、非常によくできていますし、わかりやすいです。　この本で学習した後に、追加分を学習しても良いと思います。

SwiftUIViewsMastery

英語での説明になってしまいますが、以下の本もおすすめです。

１ページに、コードと画面が並んでいるので、非常にわかりやすいです。

View に適用できる modifier もわかりやすく説明されているので、ビューの理解だけではなく、どのような装飾ができるかも簡単にわかります。

超便利です

販売元のページは、こちらです。

関連記事:

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