Overflow menusの実装

投稿日:  更新日:

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

スポンサーリンク

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)
        }
    }
	...
}
スポンサーリンク

関連記事:

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