[SwiftUI][macOS] macOS での ToolbarItem配置位置

SwiftUI2021

     
⌛️ 2 min.
macOS での SwiftUI の ToolbarItem 配置をあらためて整理してみます。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey beta 12
  • Xcode 13 beta5
  • iOS 15

toolbar 配置指定可能箇所

ドキュメントからの抜粋

指定 配置場所+説明
automatic In macOS and in Mac Catalyst apps, the system places items in the current toolbar section in order of leading to trailing.
principal In macOS and in Mac Catalyst apps, the system places the principal item in the center of the toolbar.
navigation In macOS and in Mac Catalyst apps, the system places navigation items in the leading edge of the toolbar ahead of the inline title if that is present in the toolbar.
primary action In macOS and in Mac Catalyst apps, the location for the primary action is the leading edge of the toolbar.
status In macOS and in Mac Catalyst apps, the system places status items in the center of the toolbar.
confirmationAction In macOS and in Mac Catalyst apps, the system places `confirmationAction` items on the trailing edge in the trailing-most position of the sheet and gain the apps accent color as a background color.
cancellationAction In macOS and in Mac Catalyst apps, the system places `cancellationAction` items on the trailing edge of the sheet but places them before any “confirmationAction“ items.
destructiveAction In macOS and in Mac Catalyst apps, the system places `destructiveAction` items in the leading edge of the sheet and gives them a special appearance to caution against accidental use.
keyboard On macOS, keyboard items will be placed inside the Touch Bar.

実際の配置箇所

使ったコードは以下です。confirmationAction, cancellationAction, destructiveAction, keyboard は、少し意味が異なるので使用していません。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/10/20
//  © 2021  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("1st Pane")
            Text("2nd Pane")
        }
        .navigationTitle("NavTitle")
        .navigationSubtitle("Sub")
        .toolbar(id: "bar1") {
            ToolbarItem(id: "item1", placement: .navigation) {
                Button(action: {}, label: {Label("navigation", systemImage: "1.circle")})
            }
        }
        .toolbar(id: "bar2") {
            ToolbarItem(id: "item2", placement: .principal) {
                Button(action: {}, label: {Label("principal", systemImage: "2.circle")})
            }
        }
        .toolbar(id: "bar3") {
            ToolbarItem(id: "item3", placement: .primaryAction) {
                Button(action: {}, label: {Label("primaryAction", systemImage: "3.circle")})
            }
        }
        .toolbar(id: "bar4") {
            ToolbarItem(id: "item4", placement: .status) {
                Button(action: {}, label: {Label("status", systemImage: "4.circle")})
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

実際の配置は、以下の通り。

layout

考察

Customize Toolbar.. を使って、順番を入れ替えたり非表示にしてみたところ、以下のようになりました。

  • .navigation 指定すると、左側に配置されます
  • .principal, .primaryAction, .status は、右側に宣言順に右から配置されます
  • .principal 指定された Item がないと、右寄りに 2つのボタン(.primaryAction, .status) が表示されます
  • .principal 指定された Item があると、中央寄りに 3つのボタン(.principal, .primaryAction, .status) が表示されます
  • 上記は、.principal が3つのボタン中のどの位置にあっても同じ振る舞いをします
LayoutWithoutPrincipal

MEMO

Apple のドキュメントと少し異なる気がしますが、実際の動きは上記のようになっていました。

Beta だからかもしれませんが、意図通りかもしれません・・・

MEMO2

同じ placement を指定した ToolbarItem は、後から指定された方が最終的に使用されます。

MEMO3

Customize Toolbar… でツールバーをカスタマイズするのは、アニメーション含め楽しいです。macOS でツールバーを使うのであれば、対応すべきかと思います。
SwiftUI2021 [SwiftUI][macOS] macOS での SwiftUI の toolbar をカスタマイズ可能にする

まとめ:macOS での ToolbarItem配置位置

macOS での ToolbarItem配置位置
  • .navigation は左側
  • .primaryAction, .status, .principal は右側
  • .principal があると中央寄りになる

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です