[SwiftUI] SwiftUI でハンバーガーメニューを作る

⌛️ 2 min.

ハンバーガーメニューを SwiftUI で実装してみます。

Sponsor Link

環境＆対象

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

macOS Monterey 12.3 beta4
Xcode 13.3 beta 3
iOS 15.2

ハンバーガーメニュー

ハンバーガーメニューとは、押下すると詳細メニューが表示されるものです。

表示位置は色々ですが、以下のように左上にあるのが良くあるパターンです。

当初は、その名称にもなっているハンバーガーのようなアイコンだったのですが、最近はさまざまなアイコンが使われるようになっているようです。

SF Symbol にはハンバーガーメニューそのものは用意されていないのですが、似たようなアイコンである “list.bullet” を使用しています。

SwiftUI での実装

SwiftUI での実装は、おおきく２つに分かれます。

・メニュー押下時のサブメニューの表示
・メニュー自体の表示

サブメニューの表示

サブメニューの表示は Menu を使用して実装していくのが簡単です。

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

Menu は、ネストして使用することができるので、階層化したメニューにすることもできます。

Menu の中に通常のメニュー項目を配置するのであれば、Button を使用します。

Menu の中を階層化したい場合は Menu の中でさらに Menu を使うことになります。

以下は、１階層のメニューで Hello1, Hello2, Hello3, Hello4 を定義している例です。


    var menu: some View {
        Menu(content: {
            Button(action: {
                print("Hello")
            }, label: {
                Text("Hello1")
            })
            Button(action: {
                print("Hello")
            }, label: {
                Text("Hello2")
            })
            Button(action: {
                print("Hello")
            }, label: {
                Text("Hello3")
            })
            Button(action: {
                print("Hello")
            }, label: {
                Text("Hello4")
            })
        }, label: {
            Image(systemName: "list.bullet")
        })
    }

注意点としては、Menu 中に記述したメニューの順序です。

上から下に伸びるメニューであれば、記述した順に表示されますが、下から上に伸びるメニューの時には、逆順に表示されます。

＃例題ということもあり、複数箇所で使いたいので、property として定義しています。

メニューの表示

メニューの表示位置によって、どこで表示設定するかが変わります。
以下の２ヶ所についての表示を説明します。
・NavigationView のツールバー位置(左側)
・画面下部のツールバー位置(左側)

NavigationBarでの表示

NavigationView で使用される NavivationBar (の左側)に表示するためには、位置として、.navigationBarLeading と指定して、ToolbarItem を設置することが必要です。(当然ですが、NavigationView の内側であることが必要です。)


struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello world")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                       menu
                    }
                }
        }
    }
    var menu: some View {
        // snip
    }
}

.navigationBarLeading と指定していることで、NavigationBar の左側(厳密には、先頭側) に配置されます。

以下のような表示になります。

Toolbarの詳細は、以下の記事で説明しています。
[SwiftUI] toolbar の使い方

BottomBarでの表示

BottomBar に表示する時には、.bottomBar を指定して ToolbarItem の配置が必要となります。

.bottomBar 指定では、BottomBar の中央寄せの配置となります。

今回は左側に寄せたかったので、.frame を使用して配置を調整しています。


struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello world")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        menu
                            .frame(maxWidth: .infinity, alignment: .leading) 
                    }
                }
        }
    }
}

以下のような表示になります。