【Android】ツールバーの表示とカスタマイズ - アプリ開発初心者の暇つぶしAndroid体験記

今回はツールバーの表示方法とカスタマイズについて
まとめていきたいと思います。

ツールバーのレイアウト配置

ツールバーのレイアウトを作成していきます。
AndroidStudioのパレットからToolBarを配置します。
f:id:mtnanao:20200316214223p:plain

配置後、作成されたxmlを見てます。

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="?attr/actionBarTheme" />

ここで登場してくる"?attr/"ですが、
あらかじめ定義されているデザイン情報を引用できます。
AndroidStudioであれば、Ctrlを押しながらクリックすれば定義元に飛べますので
一つ見てみましょう。

<!-- The primary branding color for the app. By default, this is the color applied to the
        action bar background. -->
<attr format="color" name="colorPrimary"/>

コメントに書いてある通り、デフォルトではアクションバーの背景みたいですね。

ツールバーの表示処理実装

ツールバーを表示させたいアクティビティのonCreateメソッドに
以下のように実装していきます。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

この他に、元々デフォルトで表示されているアクションバーを
非表示にしないと新たに定義したツールバーが表示できないため、
起動時にエラーとなってしまいます。

[res/values/styles.xml]

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

ここまででツールバーが表示されます。
f:id:mtnanao:20200316215815p:plain:w250

オプションメニューの表示

ツールバー右上にオプションメニューを表示させる方法を紹介します。

最初にメニューの一覧を定義するリソースファイルを作成します。
リソースタイプが"Menu"の新しいxmlファイルを作成します。
f:id:mtnanao:20200316220456p:plain
f:id:mtnanao:20200316220220p:plain

この新規リソースファイルに項目を追加していきます。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/sample1"
        android:title="サンプル機能１" />
    <item
        android:id="@+id/sample2"
        android:title="サンプル機能２" />
</menu>

続いてアクティビティクラスの実装です。
onCreateOptionsMenuメソッドをオーバーライドして実装します。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.testmenu,menu);
    return true;
}

先ほど作成したtestmenuのレイアウトをインフレートして紐づけます。
戻り値のbooleanは、trueを返すことによりオプションメニューが表示されます。
（これどういう時にfalseを返すのだろうか？）

これでオプションメニューが表示されます。
f:id:mtnanao:20200316221400p:plain:w250
f:id:mtnanao:20200316221410p:plain:w250

戻るボタンの表示

ツールバーに戻るボタンを表示させる方法を紹介します。
onCreateメソッドでsetDisplayHomeAsUpEnabledメソッドを実装します。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

表示だけであればこれだけでOKです。
f:id:mtnanao:20200316222033p:plain:w250

各ボタンが押された時の処理実装

ここまで作った各ボタンが押された時の処理を実装するには、
onOptionsItemSelectedメソッドをオーバーライドして実装します。

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {

    switch (item.getItemId()){

        // 戻るボタンが押された時の処理
        case android.R.id.home:

            text.setText("戻るが押されました" );
            break;

        // オプションメニューが押された時の処理
        case R.id.sample1:

            text.setText("サンプル機能１が押されました" );
            // オプションメニューを実行の時はtrue
            return true;

        case R.id.sample2:

            text.setText("サンプル機能２が押されました" );
            // オプションメニューを実行の時はtrue
            return true;
    }
    return super.onOptionsItemSelected(item);
}