ツールバーにメニューやボタンを追加する方法 | Androidアプリ開発

この記事ではAndroidアプリ開発においてツールバー上にメニューやボタンを実装する方法を紹介します。

この記事の内容を習得すると、
例えば下図のようなメニューを表示したり、
ボタンの処理を実装したりすることができます。
(※下図の例ではボタンでアプリが終了するようにしています)
メニューの例
スポンサーリンク

メニューのリソースを作成する

メニューを表示するためには、メニュー内容のリソースを作成する必要があります。

リソースファイルを作成する

初期状態ではリソースディレクトリ内にメニュー用のディレクトリが存在しないので、
まずはメニュー用のディレクトリを作成するところからやる必要があります。

resフォルダ上で右クリック→New→Directoryをクリックします。

ディレクトリ名は「menu」とします。


次にさきほど作成したmenuディレクトリ内にメニューのリソースファイルを作成します。

menuディレクトリで右クリック→New→Fileをクリックします。

リソールファイル名は「小文字.xml」のルールさえ守っていれば何でも良いです。
ここでは例として「menu_main.xml」としておきます。
スポンサーリンク

リソースファイルを実装する

さきほど作成したmenu_main.xmlを開きます。

ここでは冒頭のGIF動画のメニューを作成してみましょう。
コードとしては下記のようになります。
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <item
        android:id="@+id/menu1"
        android:title="MENU1"
        />

    <item
        android:id="@+id/menu2"
        android:title="MENU2"
        />

    <item
        android:id="@+id/menu_button"
        android:title="BUTTON"
        app:showAsAction="ifRoom"
        />

</menu>

ここで、titleはメニューに表示させる文字列を表します。
また、showAsActionにifRoomを指定するとメニューとしてまとめて表示されるのではなく、独立したボタンとして表示されます。

アイコンのボタンを実装するには?

今回は実装しませんが、アイコンのボタンを実装することもできます。

その場合には予めアイコンのリソースをdrawableに登録した後に、
以下のようにicon属性に設定をします。
    <item
        android:id="@+id/menu_button"
        android:title="BUTTON"
        android:icon="@drawable/XXXX"
        app:showAsAction="ifRoom"
        />
スポンサーリンク

メニューやボタンを表示させる

メニューを表示するにはActivityクラス内で、
onCreateOptionsMenuをオーバーライドして実装します。

サンプルコードは以下です。
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

さきほどのメニューリソースの作成が完了していて、
上記のコードを実行すると下図のようにツールバー上にメニューが表示されるはずです。
スポンサーリンク

メニューやボタンの処理を実装する

メニューやボタンの処理を実装するには、
Activityクラス内でonOptionsItemSelectedをオーバーライドします。

サンプルコードは以下です。
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu1:

                return true;
            case R.id.menu2:

                return true;
            case R.id.menu_button:
                finish();
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

item.getItemId()でタップされたメニューアイテムのIDを取得することができます。
その後、メニューリソースで設定したIDに沿ってswitch構文で処理を分岐させます。

今回では例として、ボタンをタップしたときにアプリが終了するように、
finish()のコードを挿入しています。

このコードを実装して、ボタンをタップすると以下のように処理を実行することができます。
メニューの例
Androidアプリ開発
スポンサーリンク
Androidアプリ開発 記事一覧
Androidアプリ開発 記事一覧
Androidアプリ開発の記事一覧を以下にまとめています。
良かったらご覧ください。

Androidアプリ開発 記事一覧
カテゴリ広告: Androidアプリ開発
スポンサーリンク: Androidアプリ開発を個人レッスンで学ぶなら...?
Androidアプリ開発は一人で学んでいても限界があります。
そこでオススメなのがオンラインでAndroidアプリ開発を学べる「コードキャンプ」。
個人レッスンで丁寧に教えてくれます。

無料レッスン体験も可能なので、まずは無料体験から試してみてはいかがでしょうか?

Androidアプリ開発個人レッスン
一般広告: モバイルバッテリー
スポンサーリンク
Aresei-note
タイトルとURLをコピーしました