ポップアップメニューのようにボタンタップにより表示されるメニューを作成する【Menuビュー】

このブログでは、SwiftUIを使用してメニュービューを効果的に実装する方法について詳しく解説します。メニュービューは、ユーザーがアプリ内の複数のオプションを簡単に選択できるようにするためのUIコンポーネントです。

iOS：14.0以上
XCode（当サイトの環境）：15.0.1

Menuビューとは？
基本的な使い方
進んだ使い方
1. 動的なメニューアイテム
2. スタイルとアイコンのカスタマイズ
まとめ

Menuビューとは？

SwiftUIのMenuビューは、ユーザーがタップするとオプションのリストが表示されるコンポーネントです。これは、特にスペースが限られた画面や、多くの選択肢をユーザーに提供したい場合に便利です。

基本的な使い方

SwiftUIでMenuビューを使用する基本的なステップは以下の通りです。

ステップ1: Menuの作成

Menuビューを作成するためには、Menu コンストラクタを使用します。例えば、以下のコードはシンプルなMenuビューを作成します。

Menu("オプション") {
    Button("オプション1", action: { /* アクション */ })
    Button("オプション2", action: { /* アクション */ })
    // 他のオプション...
}

ステップ2: アクションの追加

各オプションには、選択した際に実行されるアクションを追加できます。

ステップ3: カスタマイズ

Menuビューは、.menuStyle などのモディファイアを使用してカスタマイズすることも可能です。

サンプルコード

import SwiftUI

struct MenuSmpView: View {
    var body: some View {
        Menu("オプション") {
            Button("オプション1", action: option1Action)
            Button("オプション2", action: option2Action)
            Divider()
            Button("オプション3", action: option3Action)
        }
    }

    private func option1Action() {
        // オプション1が選択されたときのアクション
        print("オプション1が選択されました")
    }

    private func option2Action() {
        // オプション2が選択されたときのアクション
        print("オプション2が選択されました")
    }

    private func option3Action() {
        // オプション3が選択されたときのアクション
        print("オプション3が選択されました")
    }
}

このコードでは、Menu コンストラクタを使用して、”オプション”というラベルのMenuビューを作成しています。Menu内には3つのボタン（”オプション1″, “オプション2”, “オプション3″）があり、それぞれ異なるアクションを割り当てています。
Divider() を使用することで、メニュー内のオプションを区切っています。
各オプションのアクションは、private func として定義されており、ユーザーがそのオプションを選択したときに実行されます。

このサンプルでは、単にコンソールにメッセージを出力していますが、実際のアプリケーションでは、ここに具体的な機能を実装します。

進んだ使い方

Menuビューは、カスタマイズしてより複雑なユーザーインターフェースを作成することもできます。

動的なメニューアイテム

SwiftUIで動的にMenuビューのアイテムを生成するためのサンプルコードを作成します。以下のコードは、動的なデータセットを用いてMenuビューのアイテムを生成する方法を示しています。

import SwiftUI

struct MenuSmpView: View {
    // メニューに表示するオプションのリスト
    let options = ["オプション1", "オプション2", "オプション3"]

    var body: some View {
        Menu("オプション") {
            ForEach(options, id: \.self) { option in
                Button(option, action: {
                    self.optionSelected(option)
                })
            }
        }
    }

    private func optionSelected(_ option: String) {
        // 選択されたオプションに対するアクション
        print("\(option) が選択されました")
    }
}

このコードでは、options 配列内に定義された各オプションに対して、ForEach を使用してMenu内にボタンを動的に生成しています。ユーザーがメニューアイテムを選択すると、optionSelected 関数が呼び出され、選択されたオプションの名前がコンソールに出力されます。

このサンプルを拡張することで、実際のアプリケーションのニーズに応じたメニューを簡単に作成することができます。例えば、異なるタイプのオプションや、オプションに応じた異なるアクションを実装することも可能です。