Context menusの実装

投稿日: 　更新日:

Context menusの実装方法を紹介します。

スポンサーリンク

Context menusとは

ターゲットViewをロングクリックした時、そのViewのクリックした位置に表示されるメニューです。

ContextMenusの表示イベント
動画プレーヤー

AndroidのMenu APIが提供するもので、Menu APIの「Context menus」と同じ動作です。

スポンサーリンク

メニューの実装

Context menusの実装方法を静的・動的に分けて示します。

静的な実装（menuリソースで定義）

静的な実装はメニューの構成をmenuリソース（xmlファイル）で定義します。

このmenuリソースはres/menuフォルダに配置する決まりです。フォルダが無ければ作成してください。

res/menuフォルダの作成

メニューの定義はmenu要素の中にitem子要素を列記するだけです。

メニューの定義（res/menu/menu_items.xml）
1
2
3
4
5
6
7
8
9
10
11
12
<?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 1" />
    <item
        android:id="@+id/menu_item2"
        android:title="Item 2" />
    <item
        android:id="@+id/menu_item3"
        android:title="Item 3" />
</menu>

上記のメニューの定義を、Activity#onCreateContextMenuでMenuオブジェクトへ組み込み、Activity#registerForContextMenuでターゲットViewを登録すれば実装は終わりです。

メニューの組み込み（MainActivity.tk）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MainActivity : AppCompatActivity() {
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...
        // ターゲットViewを登録
        registerForContextMenu(findViewById<TextView>(R.id.txtOpenMenuSLT))
        registerForContextMenu(findViewById<TextView>(R.id.txtOpenMenuSRB))
    }
     
    override fun onCreateContextMenu(
        menu: ContextMenu, v: View, menuInfo: ContextMenu.ContextMenuInfo?) {
        val inflater: MenuInflater = menuInflater
        inflater.inflate(R.menu.menu_items, menu)
    }
    ...
}

動的な実装（Menu#addで定義）

動的な実装はメニューを構成するアイテムをMenu#addメソッドで一つ一つ追加していく方法です。

Activity#onCreateContextMenuメソッド内で行います。

メニューの組み込み（MainActivity.tk）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class MainActivity : AppCompatActivity() {
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...
        // Context menusのターゲットViewを登録
        registerForContextMenu(findViewById<TextView>(R.id.txtOpenMenuSLT))
        registerForContextMenu(findViewById<TextView>(R.id.txtOpenMenuSRB))
    }
     
    override fun onCreateContextMenu(
        menu: ContextMenu, v: View, menuInfo: ContextMenu.ContextMenuInfo?) {
        //       groupID     itemID          order      title
        menu.add(Menu.FIRST, Menu.FIRST + 0, Menu.NONE, "File")
        menu.add(Menu.FIRST, Menu.FIRST + 1, Menu.NONE, "Edit")
        menu.add(Menu.FIRST, Menu.FIRST + 2, Menu.NONE, "Help")
        // ※orderが同じ（Menu.NONEは0）時はadd順に表示
    }
    ...
}

サンプルの実行結果

図は上記で実装したContext menusの実行結果です。

Context menusの実行結果

ターゲットViewをクリックした位置に、左上を起点としたドロップダウンメニューが開いて、アイテムが現れます。

ドロップダウンメニューが画面の外へ出てしまうときは、メニュー全体が表示できる位置へ移動されます。

スポンサーリンク

アイテムのクリックイベント処理

アイテムのクリックが行われるとActivity#onOptionsItemSelectedにコールバックが返ってきます。

引数で渡されるMenuItemが保持するitemIdを使って、どのアイテムがクリックされたかを判断します。後は判断に基づいて処理を行います（サンプルはToastを発行）。

処理を行ったらtrueを返します。

クリックイベント処理（MainActivity.tk）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class MainActivity : AppCompatActivity() {
    ...
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.menu_item1 -> {
                Toast.makeText(this, "Item 1", Toast.LENGTH_LONG).show()
                true
            }
            R.id.menu_item2 -> {
                Toast.makeText(this, "Item 2", Toast.LENGTH_LONG).show()
                true
            }
            R.id.menu_item3 -> {
                Toast.makeText(this, "Item 3", Toast.LENGTH_LONG).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
    ...
}
動的な実装の場合
クリックイベント処理（MainActivity.tk）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class MainActivity : AppCompatActivity() {
    ...
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            Menu.FIRST + 0 -> {
                Toast.makeText(this, "Item 1", Toast.LENGTH_LONG).show()
                true
            }
            Menu.FIRST + 1 -> {
                Toast.makeText(this, "Item 2", Toast.LENGTH_LONG).show()
                true
            }
            Menu.FIRST + 2 -> {
                Toast.makeText(this, "Item 3", Toast.LENGTH_LONG).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
    ...
}
スポンサーリンク
ページのトップへ

関連記事：

Menusの種類と特徴
Material Design ComponentsにMenusというカテゴリがあります。 「Menus（メニュー）」なので、言葉のとおり、選択する項目を一覧表示する機能です。 Menusはメニューの表現方法によって、幾つかの種類があります。 このMenusの種類と特徴を紹介します。 ...
続きを読む
スポンサーリンク