この記事の要点

SwiftUI: .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button("Add") {} } } placement: .navigationBarLeading / .navigationBarTrailing / .bottomBar / .principal 複数ボタンは ToolbarItemGroup でまとめる UIKit: navigationItem.rightBarButtonItem = UIBarButtonItem(...) SF Symbols: Image(systemName: "plus") でシステムアイコン (5,000+ 種類) アクセシビリティ: .accessibilityLabel("追加") 必須 (VoiceOver 対応)

SwiftUI のツールバー

iOS 14 / macOS 11 から導入された .toolbar モディファイアで宣言的にツールバーを構築します。NavigationView / NavigationStack の上下バーや、独立ウィンドウのツールバーに使えます。

1. 最小例 (NavigationStack + ナビゲーションバー右)

import SwiftUI

struct ContentView: View {
    @State private var items: [String] = []

    var body: some View {
        NavigationStack {
            List(items, id: \.self) { Text($0) }
            .navigationTitle("リスト")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        items.append("Item \(items.count + 1)")
                    } label: {
                        Image(systemName: "plus")
                    }
                    .accessibilityLabel("追加")
                }
            }
        }
    }
}

2. placement の種類

placement	表示位置
.navigationBarLeading	ナビゲーションバー左端
.navigationBarTrailing	ナビゲーションバー右端
.principal	ナビゲーションバー中央 (タイトル位置)
.bottomBar	画面下部のツールバー
.topBarLeading / .topBarTrailing	iOS 17+ の汎用版
.keyboard	キーボード上に表示 (テキスト入力時)
.confirmationAction	OK / 完了相当 (右側)
.cancellationAction	キャンセル相当 (左側)
.destructiveAction	削除系

3. 複数ボタンを並べる (ToolbarItemGroup)

.toolbar {
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        Button { share() } label: {
            Image(systemName: "square.and.arrow.up")
        }
        Button { favorite() } label: {
            Image(systemName: "star")
        }
        Menu {
            Button("並び替え") { sort() }
            Button("フィルタ") { filter() }
            Divider()
            Button("削除", role: .destructive) { delete() }
        } label: {
            Image(systemName: "ellipsis.circle")
        }
    }
}

4. 下部バー (bottomBar) + Spacer

.toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
        Button("削除", role: .destructive) { delete() }
        Spacer()                       // ★ 左右に分離
        Text("\(items.count) 件")
        Spacer()
        Button("追加") { add() }
    }
}

// 下部バーを常に表示
.toolbarBackground(.visible, for: .bottomBar)
.toolbarBackground(Color.blue, for: .bottomBar)

5. シート/モーダル内のキャンセル・完了

struct EditView: View {
    @Environment(\.dismiss) var dismiss
    @State var name: String = ""

    var body: some View {
        NavigationStack {
            Form {
                TextField("名前", text: $name)
            }
            .navigationTitle("編集")
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("キャンセル") { dismiss() }
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("保存") {
                        save()
                        dismiss()
                    }
                    .disabled(name.isEmpty)
                }
            }
        }
    }
}

6. キーボード上のツールバー

@FocusState private var focused: Bool

TextField("入力", text: $text)
    .focused($focused)
    .toolbar {
        ToolbarItemGroup(placement: .keyboard) {
            Spacer()
            Button("完了") { focused = false }
        }
    }

7. principal でカスタムタイトル

.toolbar {
    ToolbarItem(placement: .principal) {
        HStack {
            Image(systemName: "wifi")
            Text("接続中")
                .font(.headline)
        }
    }
}
.navigationBarTitleDisplayMode(.inline)

UIKit のツールバー

UIKit では UINavigationItem と UIToolbar の 2 系統があります。

8. ナビゲーションバーのボタン (UIKit)

class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "リスト"

        // 右ボタン
        navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add,
            target: self,
            action: #selector(addTapped)
        )

        // 左ボタン (カスタム画像)
        let cancel = UIBarButtonItem(
            image: UIImage(systemName: "xmark"),
            style: .plain,
            target: self,
            action: #selector(cancelTapped)
        )
        navigationItem.leftBarButtonItem = cancel

        // 複数ボタン
        navigationItem.rightBarButtonItems = [
            UIBarButtonItem(systemItem: .action, primaryAction: nil),
            UIBarButtonItem(systemItem: .bookmarks, primaryAction: nil),
        ]
    }

    @objc func addTapped() { /* ... */ }
    @objc func cancelTapped() { dismiss(animated: true) }
}

9. UIToolbar (下部ツールバー)

let toolbar = UIToolbar()
toolbar.translatesAutoresizingMaskIntoConstraints = false

let trash = UIBarButtonItem(barButtonSystemItem: .trash, target: self, action: #selector(deleteTapped))
let flex  = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let add   = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTapped))

toolbar.items = [trash, flex, add]

view.addSubview(toolbar)
NSLayoutConstraint.activate([
    toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
])

10. Storyboard でツールバー設置

1. Object Library から Navigation Item または Toolbar をドラッグ
2. Bar Button Item を Navigation Bar 上にドロップ
3. Attributes Inspector で System Item を選択 (Add / Done / Cancel など)
4. Control + Drag でアクションを ViewController に接続

SF Symbols 一覧

iOS 13+ に標準搭載される 5,000+ 種類のベクターアイコン。

用途	シンボル名
追加	plus / plus.circle
削除	trash / minus
共有	square.and.arrow.up
編集	pencil / square.and.pencil
お気に入り	star / heart
戻る	chevron.left
その他	ellipsis / ellipsis.circle
検索	magnifyingglass

Mac のSF Symbols アプリで全シンボルを検索できます。

アクセシビリティ対応

Button { add() } label: {
    Image(systemName: "plus")
}
.accessibilityLabel("新しい項目を追加")          // VoiceOver 読み上げ
.accessibilityHint("タップでアイテムを追加")     // ヒント (二度押し時)
.accessibilityAddTraits(.isButton)              // 役割明示

FAQ

Q: ツールバーが表示されない
A: NavigationStack / NavigationView で包んでいますか？ .toolbar は親に navigation context が必要です。

Q: bottomBar が出ない
A: .toolbar(.visible, for: .bottomBar) を追加。または TabView 内では別途設計。

Q: Image(systemName:) が表示されない
A: シンボル名が存在しないか、iOS バージョン不足。SF Symbols アプリで確認し、if #available(iOS 17, *) でガード。

Q: ボタンに色を付けたい
A: .tint(.red) または .foregroundStyle(.red)。ナビゲーションバー全体は .toolbarBackground(.blue, for: .navigationBar)。

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。