Overflow menusの実装

投稿日: 　更新日:

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

スポンサーリンク

Overflow menusとは

オーバーフローアイコンをクリックすることで、コンテンツ画面の右上（定位置）に表示されるメニューです。

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

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

スポンサーリンク

メニューの実装

Overflow 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_file"
        android:title="File" />
    <item
        android:id="@+id/menu_edit"
        android:title="Edit" />
    <item
        android:id="@+id/menu_help"
        android:title="Help" />
</menu>

上記のメニューの定義を、Activity#onCrteateOptionsMenuでMenuオブジェクトへ組み込めば実装は終わりです。

メニューの組み込み（MainActivity.tk）
1
2
3
4
5
6
7
8
9
class MainActivity : AppCompatActivity() {
    ...
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        val inflater: MenuInflater = menuInflater
        inflater.inflate(R.menu.text_menus, menu)
        return true
    }
    ...
}

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

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

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

メニューの組み込み（MainActivity.tk）
1
2
3
4
5
6
7
8
9
10
11
12
class MainActivity : AppCompatActivity() {
    ...
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        //       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順に表示
        return true
    }
    ...
}

サンプルの実行結果

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

Overflow menusの実行結果

サンプルは純粋にメニューを表示するだけの実装です。メニューはオーバーフローアイコンに隠されます。

オーバーフローアイコンをクリックすることで、ドロップダウンメニューにアイテムが現れます。

スポンサーリンク

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

アイテムのクリックが行われると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_file -> {
                Toast.makeText(this, "File", Toast.LENGTH_LONG).show()
                true
            }
            R.id.menu_edit -> {
                Toast.makeText(this, "Edit", Toast.LENGTH_LONG).show()
                true
            }
            R.id.menu_help -> {
                Toast.makeText(this, "Help", 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, "File", Toast.LENGTH_LONG).show()
                true
            }
            Menu.FIRST + 1 -> {
                Toast.makeText(this, "Edit", Toast.LENGTH_LONG).show()
                true
            }
            Menu.FIRST + 2 -> {
                Toast.makeText(this, "Help", Toast.LENGTH_LONG).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
    ...
}
スポンサーリンク
ページのトップへ

関連記事：

Menusの種類と特徴
Material Design ComponentsにMenusというカテゴリがあります。 「Menus（メニュー）」なので、言葉のとおり、選択する項目を一覧表示する機能です。 Menusはメニューの表現方法によって、幾つかの種類があります。 このMenusの種類と特徴を紹介します。 ...
続きを読む
Overflow menus：アイテムをツールバーへ表示（showAsAction属性）
Overflow menusはメニューのアイテムをツールバー（アクションバー）へ表示することが出来ます。 その方法を紹介します。 ...
続きを読む
Overflow menus：ActionViewをツールバーへ表示（actionViewClass属性）
ツールバー（アクションバー）へActionViewを表示させる方法を紹介します。 ...
続きを読む
Overflow menus：ActionLayoutをツールバーへ表示（actionLayout属性）
ツールバー（アクションバー）へActionLayoutを表示させる方法を紹介します。 ...
続きを読む
スポンサーリンク