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

SwiftUI2021

     

TAGS:

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

環境&対象

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

  • macOS Monterey 12.3 beta4
  • Xcode 13.3 beta 3
  • iOS 15.2

ハンバーガーメニュー

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

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

humburgermenu

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

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

SwiftUI での実装

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

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

サブメニューの表示

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

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

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

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

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

以下は、1階層のメニュー で 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 として定義しています。

メニューの表示

メニューの表示位置によって、どこで表示設定するかが変わります。
以下の2ヶ所についての表示を説明します。
・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 の 左側(厳密には、先頭側) に配置されます。

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

Pulldown

Toolbarの詳細は、以下の記事で説明しています。
[SwiftUI] toolbar の使い方 SwiftUI[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) 
                    }
                }
        }
    }
}

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

pullup

.frame をはじめとした SwiftUI のレイアウトの仕組みは以下の記事で説明しています。
SwiftUI2021[SwiftUI] SwiftUI の layout システムを理解する ( .frame の働き)

まとめ

SwiftUI を使って、ハンバーガーメニューを実装してみました。

SwiftUI でのハンバーガーメニューの実装
  • メニューボタンの表示は、ToolbarItem を使用する
  • トグルメニューの表示は、Menu で構成する

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

コメントを残す

メールアドレスが公開されることはありません。