2024/4/26

【Kotlin/Android】PopUpMenuの実装方法！タップで選択肢を表示する

この記事からわかること

Android Studio/Kotlinでメニューを実装する方法
PopUpMenuViewの使い方
アイテムにタップイベントを実装する

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Kotlin：1.8.20

AndroidでPopUpMenuの実装方法

Androidでボタンなどをタップした際に以下のようなポップアップで選択肢が表示されるようなViewの実装方法をまとめていきます。

使用するのはMenuタグとPopUpMenuViewです。メニューの際に表示するViewはレイアウトファイルに準備していきます。

「res > menu」にレイアウトファイルを実装
コード側でPopUpMenuをインスタンス化して表示する

「res > menu」にレイアウトファイルを実装

まずはメニューで表示するViewのレイアウトファイルを作成します。このレイアウトファイルはres > layoutに作成するわけでないので注意してください。resディレクトリからResourceをファイルを追加し、「Resource Type」を「Menu」にします。

追加できたらmenuタグの中に表示させたいアイテムをitemタグを使用して定義していきます。なぜかItemタグが最初は赤色(存在しない)判定されていましたがビルドすれば治りました。

res > menu > test_menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item1"
        android:title="設定" />

    <item
        android:id="@+id/menu_item2"
        android:title="プロフィール" />
</menu>

コード側でPopUpMenuをインスタンス化して表示する

ポップアップメニューを表示するためにPopupMenuをインスタンス化します。その際に引数に渡すViewはタップ時に表示させたいViewを渡すようにしてください。そのViewの下側にポップアップが表示されるようになります。

// ポップアップメニューを表示する
private fun showPopupMenu(view: View) {
    val popupMenu = PopupMenu(this, view)
    popupMenu.inflate(R.menu.test_menu)
    popupMenu.show()
}

あとはこれをボタンのクリックイベントなどに仕込んでおけば実装完了です。ボタンをタップすれば以下のようにメニューが表示されるようになります。

val rightButton: ImageButton = header.findViewById(R.id.right_button)
rightButton.setOnClickListener {
    showPopupMenu(rightButton)
}

アイテムにタップイベントを実装する

アイテムをタップした際に処理を行いたい場合はPopupMenu.OnMenuItemClickListenerに準拠させてonMenuItemClickメソッドをオーバーライドしその中でアイテムに指定したidで処理を分岐させればOKです。setOnMenuItemClickListenerメソッドでリスナーをセットするのを忘れないようにしてください。

MainActivity
class MainActivity : AppCompatActivity(), PopupMenu.OnMenuItemClickListener {

  private fun showPopupMenu(view: View) {
      val popupMenu = PopupMenu(this, view)
      popupMenu.inflate(R.menu.poop_row_menu)
      popupMenu.setOnMenuItemClickListener(this) // クリックリスナーのセット
      popupMenu.show()
  }

  // メニューアイテムが選択された時の処理
  override fun onMenuItemClick(item: MenuItem?): Boolean {
      return when (item?.itemId) {
          R.id.menu_item1 -> {
              // メニューアイテム1が選択された時の処理
              true
          }
          R.id.menu_item2 -> {
              // メニューアイテム2が選択された時の処理
              true
          }
          else -> false
      }
  }
}