【SwiftUI】備忘録 ツールバーについて

はじめに

iOS アプリを使用している際に、右上に通知ボタンや＋ボタンなどを見かけたことがあると思います。今回は、その「ツールバー」についてまとめていきます

参考にした動画

コード

ツールバーの表示のみ(ヘッダー)

import SwiftUI

// ツールバーの表示のみ
struct ToolBarTestView: View {
    var body: some View {
        NavigationStack {
            VStack{
                // content
            }
            .toolbar {
                // topBarTrailing ヘッダー部分に配置
                ToolbarItem(placement:.topBarTrailing){
                    Button("Notification" , systemImage: "bell"){}
                }
            }
        }
    }
}

必要なコード

ToolbarItem(placement:.topBarTrailing) placement の指定によって配置の位置が変更される。ヘッダー部に記載する際には .topBarTrailing と記載する

実際の画面

ツールバーの表示のみ(下部)

import SwiftUI

// ツールバーの表示のみ
struct ToolBarTestView: View {
    var body: some View {
        NavigationStack {
            VStack{
                // content
            }
            .toolbar {
                // bottomBar 画面下部に配置
                ToolbarItem(placement:.bottomBar){
                    Button("share" , systemImage: "square.and.arrow.up"){}
                }
                ToolbarItem(placement:.bottomBar){
                    Button("clipboard" , systemImage: "document.on.clipboard"){}
                }
            }
        }
    }
}

必要なコード

ヘッダーの時と同様にToolbarItem(placement:.bottomBar) placementの指定を .bottomBar と記載する

実際の画面

注意点

.toolbar モディファイアを使用する場合は、VStack ではなく NavigationStack のようなナビゲーションコンテナに適用する必要がある。

終わりに

今回は表示のみになりますが、ツールバーの記載の仕方についてまとめました。ツールバーに機能を持たせることが前提として必要にはなりますが、それについては、また改めてまとめます...