ActionBarをカスタマイズしてみる

ActionBarって表示されるだけど、正直利用価値ない

AndroidのActivityのクラスでAppCompatActivityを継承すると自動的に実行時のアプリの上部にActionBarが表示されますが、アプリケーション名が表示されているだけで、何の飾りもありません。消すこともできるんですが、このActionBarをカスタマイズして、もっと色々なことにつかえるようにしてみましょう。

参考：
公式ホームページ：アプリバーの追加

どんなカスタマイズをするか？

• ActionBarの色がデフォルトで紫色なので色を変えてみます。
• ActionBarに表示されているタイトルを自由な文字列に変えてみます。
• ActionBarにアイコンを1個追加、そのアイコンにアクションを追加します。
• ActionBarメニューを追加、メニューも階層構造にします。メニューにアクションを追加します。
  出来上がりはこんな感じになります。

右端の:をタップするとメニューが表示されます。

さらにタイトル２は階層構造になっていて、その下に更にメニューがあります

メニューの定義ファイルを作る

resの下にmenuという名前でフォルダを作ります。
そのmenuを右クリック → 新規

Menu Resource Fileを選択します。

ファイル名は適当に、menu_sampleにします

デザイナのビューが表示されます。まだ何もないのでからっぽです。

左上のPaketteのビューから左下のComponetTreeのビューにドラック＆ドロップして部品を追加していきます。
最初にActionBarにアイコンを追加します。Menu Itemをドラック＆ドロップして追加します。アイコンの場合は、

app:showAsAction="ifRoom"

を指定して、android:iconにリソースの中から適当なアイコンを選択します。

次にメニューを追加します。階層的には

• アイコンアイテム （↑でつくったやつ）
• メニューアイテム１
• メニューアイテム２
  • メニュー
    • メニューアイテム３−１
    • メニューアイテム３−２

のような階層になるように作ります。 こんな感じです。

出来上がりのmenu_sample.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/iconItem"
        android:icon="@android:drawable/ic_dialog_info"
        android:title="@string/titleIcon"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_item1"
        android:orderInCategory="1"
        android:title="@string/title1"
        app:showAsAction="never"></item>
    <item
        android:id="@+id/menu_item2"
        android:orderInCategory="2"
        android:title="@string/title2"
        app:showAsAction="never">
        <menu >
            <item
                android:id="@+id/menu_item3_1"
                android:orderInCategory="3"
                android:title="@string/title3_1" />
            <item
                android:id="@+id/menu_item3_2"
                android:orderInCategory="4"
                android:title="@string/title3_2" />
        </menu>
    </item>

xmlの意味ですが、

app:showAsAction	意味
ifRoom	配置が許される範囲へ表示。配置が許される個数を表示。上記から溢れるアイテムは隠される。なので極力、可能であれば表示される。
always	常に表示する
never、なし	常に表示しない。全てのアイテムが隠される。

android:orderInCategoryはメニューの表示される順番を指定します。

MainActivityの作成

MainActivityはonCreateメソッドでAdtionBarのタイトルと色を変えてみます。（色とタイトルは適当に変えてください）

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater) .apply {
            setContentView(this.root)
        }
        // ActionBarの色とタイトルを変えてみる
        supportActionBar?.setTitle("あー、ほげほげ")
        supportActionBar?.setBackgroundDrawable(ColorDrawable(Color.GREEN)) // アプリバーを緑にする
    }

ActionBarにメニューをインフレートするためにメソッドをoverrideします。R.menu.menu_sampleがmenu_sample.xmlのリソースIDです。

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.menu_sample, menu)
        return true
    }

メニューが選択された場合のハンドラを定義するためメソッドをoverrideします。

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.iconItem -> {
                Toast.makeText(this, "アイコン付が選択されました", Toast.LENGTH_SHORT).show()
            }
            R.id.menu_item1 -> {
                Toast.makeText(this, "アイテム１が選択されました", Toast.LENGTH_SHORT).show()
            }
            R.id.menu_item2 -> {
                Toast.makeText(this, "アイテム２が選択されました", Toast.LENGTH_SHORT).show()
            }
            R.id.menu_item3_1 -> {
                Toast.makeText(this, "アイテム３−１が選択されました", Toast.LENGTH_SHORT).show()
            }
            R.id.menu_item3_2 -> {
                    Toast.makeText(this, "アイテム３−２が選択されました", Toast.LENGTH_SHORT).show()
            }
            else -> {}
        }
        return true
    }

以上で完成です。完成形はgitHubにありますのでそちらを参照してください