Overflow menusの実装 | Y_SUZUKI's Android Log

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

1 Overflow menusとは
2 メニューの実装
3 アイテムのクリックイベント処理

Overflow menusとは

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

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

メニューの実装

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

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

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

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

res/menuフォルダの作成

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

<?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オブジェクトへ組み込めば実装は終わりです。

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メソッド内で行います。

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を返します。

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)
        }
    }
	...
}

動的な実装の場合

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を表示させる方法を紹介します。 ...