コンテキストメニューの作成方法

はじめに

SwiftUIのContextMenuは、ユーザーがViewを長押ししたときに表示されるメニューです。この記事では、その基本的な使い方と実装方法について解説します。

ContextMenuの基本

ContextMenuは、特定のViewに対して長押し操作を行うと表示されるメニューです。メニューに配置できる要素はButtonやPicker、Toggleなどを表示することができます。

import SwiftUI

struct ContextMenuSmp: View {
    @State private var btnCnt = 0
    @State private var picker = "A"
    @State private var toggle = true
    
    var body: some View {
        VStack {
            Text("長押しでコンテキストメニュー表示")
                .padding()
                .contextMenu {
                    Button {
                        btnCnt+=1
                    } label: {
                        Label("カウントボタン", systemImage: "heart")
                    }
                    Picker("A,B,C", selection: $picker) {
                        Text("A").tag("A")
                        Text("B").tag("B")
                        Text("C").tag("C")
                    }
                    Toggle("toggleの状態", isOn: $toggle)
                }
            HStack {
                Text("\(btnCnt)")
                Text("\(picker)")
                Text("\(toggle.description)")
            }
        }
    }
}

画像付きのコンテキストメニュー

previewを用いるとコンテキストメニューの上部に画像を表示することが出来ます。

import SwiftUI

struct ContextMenuSmp: View {
    @State private var toggle = true
    
    var body: some View {
        Text("長押しでコンテキストメニュー表示")
            .padding()
            .contextMenu {
                // ボタンでトグルの状態を変更する
                Button {
                    toggle.toggle()
                } label: {
                    Label("画像切り替え", systemImage: "rectangle.2.swap")
                }
            }
        preview: {
            // toggleの状態によって画像を切り替える
            if toggle == true {
                Image("28090841_s")
            }
            else {
                Image("28262271_s")
            }
        }
    }
}

まとめ

SwiftUIのContextMenuは、アプリケーションのユーザビリティを向上させるための重要なツールです。以下のように活用できます。

1. 追加の操作を提供：ContextMenuは、特定のViewに対する追加の操作を提供します。これにより、主要なUIには表示されない、しかし一部のユーザーにとって便利な機能を提供することができます。
2. スペースの節約：画面上のスペースは限られています。ContextMenuを使用すると、必要なときだけ追加のオプションを表示できるため、UIをすっきりと保つことができます。
3. 直感的な操作：ユーザーは自然に長押し操作を行う傾向があります。そのため、ContextMenuを使用すると、ユーザーが直感的に追加の操作を見つけることができます。
4. カスタマイズ：ContextMenuは、ユーザーがアプリケーションを自分のニーズに合わせてカスタマイズするのに役立ちます。例えば、ユーザーはContextMenuを使用して、特定の設定を変更したり、特定の項目をお気に入りに追加したりすることができます。