Android Studioでのオプションメニュー実装手順を記録しておく

Androidアプリ開発でよく使います。

アクションバーへのオプションメニュー実装

この方法はググればいくらでも出てきます。

でも僕はいちいちググりたくないし、
自分用に実装手順をメモしておこうと思います。

※ Android Studioでの手順

このページの目次

１．初めにres/menuディレクトリを作成する
２．メニューのレイアウトXMLを作成する
３．具体的にmenu.xmlにレイアウトを定義
４．Activity側でメニューアイテムを表示・制御
５．実際のオプションメニューの見た目
オプションメニュー実装のまとめ

大前提としてmenuフォルダが必要です。

ないならresフォルダ内に作っておいてください。

▼ このようなmenuフォルダを作る

公式リファレンスでも「プロジェクトのres/menuディレクトリ内でXMLファイルを作成」と書いてあるし、menuという名前にするのは必須です。

ここまでは下準備の下準備

先ほどのres/menuフォルダ内に作ります。

まずmenuフォルダを右クリックし、
そこから [New] = >[Menu Resouce File] をクリック

▼ 次のNew Resource Fileダイアログが現れる

メニュー名は menu.xml としてもいいけど工夫します。ここではMainActivityに対してオプションメニュー実装するので menu_main.xml という区別しやすい名前にしました。

そういうルールで問題ないと考えます。

ここではこんなオプションメニューを作ってみました。

常時表示のアイコンメニュー１つを表示
その隣にドロップダウンメニュー表示
ドロップダウンに子メニューが２つある

言葉で書くとやはり分かりにくい…

具体的にはこんなXMLコードになりました。

▼ menu_main.xmlの内容

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/save_item"
        android:title="Save"
        android:icon="@drawable/ic_save"
        app:showAsAction="always" />

    <item
        android:id="@+id/settings_item"
        android:title="Settings"
        app:showAsAction="never"/>

    <item
        android:id="@+id/privacy_policy_item"
        android:title="Privacy policy"
        app:showAsAction="never" />

</menu>

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto">

<item

android:id="@+id/save_item"

android:title="Save"

android:icon="@drawable/ic_save"

app:showAsAction="always" />

<item

android:id="@+id/settings_item"

android:title="Settings"

app:showAsAction="never"/>

<item

android:id="@+id/privacy_policy_item"

android:title="Privacy policy"

app:showAsAction="never" />

</menu>

重要なのは showAsAction という属性です。

▼ この属性は以下のいずれかの値を持つ

always
常時メニューアイテムを表示する。例えばアイコン（android:icon）が指定されていれば、アイコンだけが表示されるメニューとなる
never
アクションバーにそのアイテムは表示されない。代わりに右端のオーバーフローメニューを開いたときにドロップダウン表示されるようになる
ifRoom
アクションバーに表示するスペースがあれば表示し（＝ alwaysと同じ）、ない場合はオーバーメニューに格納する（＝neverと同じ）

この属性がメニューの見た目にかなり影響します。

タイトル・アイコンは自由に設定してください。

そしたらActivity側でオプションメニュー実装です。

端的には次２つをオーバライドします。

onCreateOptionMenu
onOptionsItemSelected

これはコードを見た方が早いです。

▼ Activity内で以下の２つを実装するコード例

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    /// レイアウトXMLからメニュー実装
    val inflater: MenuInflater = menuInflater
    inflater.inflate(R.menu.menu_main, menu)
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    // 選択されたオプションメニューアイテム処理
    return when (item.itemId) {
        R.id.save_item -> {
            /// なんか処理
            true
        }
        R.id.settings_item -> {
            /// なんか処理
            true
        }
        R.id.privacy_policy_item -> {
            /// なんか処理
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

override fun onCreateOptionsMenu(menu: Menu): Boolean {

/// レイアウトXMLからメニュー実装

val inflater: MenuInflater = menuInflater

inflater.inflate(R.menu.menu_main, menu)

return true

}

override fun onOptionsItemSelected(item: MenuItem): Boolean {

// 選択されたオプションメニューアイテム処理

return when (item.itemId) {

R.id.save_item -> {

/// なんか処理

true

}

R.id.settings_item -> {

/// なんか処理

true

}

R.id.privacy_policy_item -> {

/// なんか処理

true

}

else -> super.onOptionsItemSelected(item)

}

この部分はあんまり言うことがありません。

作成したレイアウトXMLを onCreateOptionsMenu() を使ってActivityに実装し、タッチされたオプションメニューアイテムの処理を onOptionsItemSelected() でやってるだけです。

これでオプションメニューの実装は完了

こんな感じで表示できます。

▼ 初期状態でのオプションメニュー

▼ オーバーフローメニューを開いたとき

オプションメニューが付くとアプリっぽくなります(笑

見た目・アイコンを工夫するとよりグッドです。

オプションメニュー実装のまとめ

最後にここまでの手順を箇条書き

ないならres/menuディレクトリを作成
メニューのレイアウトXMLを作成
具体的にmenu.xmlにレイアウトを定義
Activity側でメニューアイテムを表示・制御

以上、Androidアプリへのオプションメニュー実装でした。

手順を踏んでいけば簡単にできます。ではまた

Android Studioでのオプションメニュー実装手順を記録しておく

１．初めにres/menuディレクトリを作成する

２．メニューのレイアウトXMLを作成する

３．具体的にmenu.xmlにレイアウトを定義

４．Activity側でメニューアイテムを表示・制御

５．実際のオプションメニューの見た目

オプションメニュー実装のまとめ

関連記事

プロフィール

人気記事

検索してみる