【SwiftUI】toolbarの使い方!アイテムにボタンを増やす方法

この記事からわかること

  • SwiftUItoolbarモディファイア使い方実装方法
  • ナビゲーションバーキーボードボタンを増やすには?
  • ToolbarItemPlacement構造体のプロパティ一覧
  • ToolBarItemToolbarItemGroup使い方
  • 子ビューのナビゲーションバーにボタン表示するには?

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Swift UIで簡単にツールバーを設置できるtoolbarモディファイアの使い方とボタンの実装方法などをまとめていきたいと思います。

toolbarモディファイアとは?

toolbarモディファイアとはSwift UIに組み込まれているiOS14以降から使用可能なモディファイアの1つです。toolbarモディファイアで使用することでNavigationViewの上部や下部、キーボードなどにツールバーを生成し、ボタンなどのViewを表示させることができます。

主にNavigationViewで囲われている時に使用するtoolbarモディファイアですが、iOS15以降からkeyboardへの設置が追加されたのでNavigationViewの外側でも使用可能になっています。

toolbarモディファイアはToolBarItem構造体などと組み合わせて使用し、toolbarモディファイアの中にToolBarItem構造体を定義してボタンなどを設置します。

NavigationViewへの使い方

ツールバーを設置するにはNavigationViewで囲われている子要素に対してtoolbarモディファイアを使用します。

【SwiftUI】NavigationViewの使い方!上部にツールバーを実装する
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("要素1")
                Text("要素2")
            } .navigationTitle("タイトル")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button(action: {
                            print("設定ボタンです")
                        }) {
                            Image(systemName: "gearshape.fill")
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("マイページです")
                        }){
                            HStack {
                                Image(systemName: "person.fill")
                            }
                        }
                    }
                }
        }
    }
}

これだけで簡単に画面上部にボタンを設置することが可能です。

ToolbarItem構造体

toolbarモディファイアの中ではToolbarItem構造体を使用して Viewを設置します。イニシャライザとして引数placementにはToolbarItemPlacement構造体を渡し、引数contentボタンなどのViewを渡します。

ToolBarItem構造体のイニシャライザ

init(
    placement: ToolbarItemPlacement = .automatic,
    content: () -> Content
)
ToolbarItem(placement: .navigationBarLeading) {
  Button(action: {
      print("設定ボタンです")
  }) {
      Image(systemName: "gearshape.fill")
  }
}

ToolbarItemPlacement構造体とは?

ToolbarItemPlacement構造体のプロパティの値でツールバーを設置する場所を指定します。

配置する場所に指定できる値は3つの項目に分かれています。

3つのプロパティ項目

explicit placement(明示的な配置位置)

iOSアプリを開発する際は基本的にこの項目の値を指定すればOKです。

プロパティ 説明
.navigationBarLeading ナビゲーションバーの左端
.navigationBarTrailing ナビゲーションバーの右端
.bottomBar ボトムバー
.keyboard キーボード

配置できるのはナビゲーションバーの両端とボトムバー(下側)、そしてキーボードです。

semantic placement(意味合い的な配置位置)

semantic(セマンティック)」の言葉通り「意味合い」的に配置位置を指定します。

プロパティ 説明
.automatic アイテムが自動的に配置
.principal 主要なアイテムの配置
iOSではナビゲーションバーの中央
navigationTitleよりも優先
.status ステータス情報の表示位置
iOSではボトムバーの中央

placement for specific actions(アクションで見る配置位置)

プロパティ 説明
.primaryAction 主要なアクションの配置
iOSではナビゲーションバーの右端
.secondaryAction:ベータ版 二次的なアクションの配置
ベータ版
.confirmationAction 確認アクションの配置
iOSではprimaryActionと同じ
.cancellationAction キャンセルアクションの配置
iOSではナビゲーションバーの左端
.destructiveAction 破壊的アクションの配置
iOSではナビゲーションバーの右端
.navigation ナビゲーションアクションの配置
iOSではナビゲーションバーの左端または.primaryActionを指す。
.primaryAction 主要なアクションの配置。
iOSではナビゲーションバーの右端。

ToolbarItemGroup構造体

toolbarモディファイアの中にはToolbarItemだけでなくToolbarItemGroup構造体を使用することもできます。両者の違いは名称通り、1つずつ定義するか一括で定義するかの違いです。

ToolbarItemGroupの中にView単位(ボタンなど)でアイテムを複数記述するだけでツールバー上に複数のViewを設置することができます。

ToolbarItemで複数設置したい場合はToolbarItemその個数分記述しなくてはいけないので可読性が下がってしまいます

とはいえToolbarItemGroupでは各Viewの位置の調整がしにくいのでそれぞれのメリットデメリットを見ながら使うのがおすすめです。

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("要素1")
                Text("要素2")
            } .navigationTitle("タイトル")
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("設定ボタンです")
                        }) {
                            Image(systemName: "gearshape.fill")
                        }
                        Button(action: {
                            print("マイページです")
                        }){
                            HStack {
                                Image(systemName: "person.fill")
                            }
                        }
                    }
                }
        }
    }
}

子ビューのナビゲーションバーに表示する

NavigationLinkなどで親ビューから子ビューへ遷移した場合は「Back」ボタンが子ビューのナビゲーションバーの中に自動で実装されます。

ここで子ビュー上でもツールバーを設置したい場合は既存の「Back」ボタンが不要になる場合があると思います。その際は子ビュー側ににnavigationBarBackButtonHiddenモディファイアを使えば非表示にすることができます。

struct ChildView: View {
    var body: some View {
        
        Text("ChildView")
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        print("設定ボタンです")
                    }) {
                        Image(systemName: "gearshape.fill")
                    }
                }
                
            }
    }
}

ナビゲーションバー自体を非表示にするnavigationBarHiddenモディファイアもありますがこちらを使うと設置したツールバーも非表示になってしまうので注意してください。

keyboardへの使い方

NavigationViewとは関係なくキーボード部分にツールバーを設置することもできます。

使い所としては「TextFieldにkeyboardType(.numberPad)を指定時の閉じるボタンの実装」として用いることが多いです。詳細はこちらの記事で解説しております。

TextFieldでnumberPadのみ発生する閉じれない問題

keyboardへの実装をするには引数placementに「.keyboard」を指定するだけです。

struct ContentView: View {
    @State  var milage:String = ""   
    @FocusState  var isActive:Bool
    
    var body: some View {
        TextField("km", text: $milage)
              .textFieldStyle(RoundedBorderTextFieldStyle())
              .keyboardType(.numberPad)
              .focused($isActive)
              .toolbar {
                  ToolbarItemGroup(placement: .keyboard) {
                      Spacer()         // 右寄せにする
                      Button("閉じる") {
                          isActive = false  //  フォーカスを外す
                      }
                  }
              }
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index