[SwiftUI] toolbar の使い方

ボタン等のコントロールを個別に配置していると、その管理が大変になってきます。

複数のプラットフォームに対応しようとすると、個別の View を作ることになってしまいがちです。

SwiftUI2.0 からは、新しく toolbar という modifier が導入され、定義は同じ・表現はプラットフォーム依存 という書き方ができるようになっています。

順番に説明していきます。

toolbar modifier

名前の通り、ツールバー をコントロールするための modifier です。

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

ToolbarItem/ToolbarItemGroup を複数持つことができる modifier です。

.toolbar を使用することで以下のように配置することができます。

struct ContentView: View {
    let messages: [String] = ["hello", "hi", "hallo"]

    var body: some View {
      List(messages, id: \.self) { message in
        Text(message)
      }
      .toolbar {
        ToolbarItem(placement: .bottomBar) {
          Button("New") {print("new")}
        }
        ToolbarItem(placement: .bottomBar) {
          Button("Delete") { print("delete")}
        }
      }
    }
}

ToolbarItem

.toolbar を使ってツールバー や、ナビゲーションバーに配置する要素を定義するものです。

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

ToolbarItem を定義するときに、以下の２つの要素を指定する必要があります。

• placement
• content

placement 指定

どこに配置するかを指定するものです。

Semantic placement (意味的な配置場所) と positional placement (位置としての配置場所）の大きく２種類に分かれていて、以下のようなものを指定できます。

semantic 的な意味については、Apple のドキュメント（こちら）を参照ください。

＃ 実際には、SwiftUI のコードを見るのがわかりやすかったです。

なお、NavigationBar と記載されている指定は、NavigationView 内で使われることが必要です。

content 指定

配置する要素を定義します。 Button 等の Control を配置することが多いと思います。

ToolbarItemGroup

様々な ToolbarItem を毎回定義して使用するのも大変です。

ToolbarItemGroup を使うことでまとめて、指定することができます。

ToolbarItemGroup 単位で、配置を指定します。

struct ContentView: View {
    let messages: [String] = ["hello", "hi", "hallo"]

    var body: some View {
      List(messages, id: \.self) { message in
        Text(message)
      }
      .toolbar {
        ToolbarItemGroup(placement: .bottomBar) { // (1) ToolbarItemGroup 単位で配置指定
          Button("New") {print("new")}
          Button("Delete") { print("delete")}
        }
      }
    }
}

ToolbarContent

ToolbarContent という Protocol を使うことで、配置が同じもの以外にもまとめることができます。

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

struct ContentView: View {
  let messages: [String] = ["hello", "hi", "hallo"]
  
  var body: some View {
    List(messages, id: \.self) { message in
      Text(message)
    }
    .toolbar {
      NewDeleteToolbar(new: {print("new")}, delete: {print("delete")})
    }
  }
}

struct NewDeleteToolbar: ToolbarContent {
  let new: () -> Void
  let delete: () -> Void
  
  var body: some ToolbarContent {
    ToolbarItem(placement: .bottomBar) { // (1) ToolbarItem ごとに配置指定可能
      Button("New", action: new)
    }
    
    ToolbarItem(placement: .bottomBar) { // (2) ToolbarItem ごとに配置指定可能
      Button("Delete", action: delete)
    }
  }
}

(1), (2) のように ToolbarItem 毎に配置指定が可能なため、配置先が異なる ToolbarItem でもまとめて管理することができます。

まとめ

toolbar を使ったコントロール等の表示には、以下がポイントとなります

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

SwiftUI 学習におすすめの本

SwiftUI 徹底入門

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

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

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

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

SwiftUIViewsMastery

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

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

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

超便利です

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

関連記事:

[SwiftUI] toolbar in SwiftUI [SwiftUI][macOS] macOS での SwiftUI の toolbar をカスタマイズ可能にする [SwiftUI] Table の使い方 [SwiftUI][macOS] Table の使い方