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

# ActionBarって表示されるだけど、正直利用価値ない
AndroidのActivityのクラスでAppCompatActivityを継承すると自動的に実行時のアプリの上部にActionBarが表示されますが、アプリケーション名が表示されているだけで、何の飾りもありません。消すこともできるんですが、このActionBarをカスタマイズして、もっと色々なことにつかえるようにしてみましょう。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/2057c633-33c5-cfad-38e6-33f52a4f3514.png">
参考：
公式ホームページ：[アプリバーの追加](https://developer.android.com/training/appbar?hl=ja)
# どんなカスタマイズをするか？
* ActionBarの色がデフォルトで紫色なので色を変えてみます。
* ActionBarに表示されているタイトルを自由な文字列に変えてみます。
* ActionBarにアイコンを1個追加、そのアイコンにアクションを追加します。
* ActionBarメニューを追加、メニューも階層構造にします。メニューにアクションを追加します。
出来上がりはこんな感じになります。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/78b5d0b2-5e78-69e2-a0a7-853aac303a15.png">

右端の:をタップするとメニューが表示されます。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/ab1259d8-7652-f6c3-aa80-1248a6081c09.png">
さらにタイトル２は階層構造になっていて、その下に更にメニューがあります
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/73d5170e-e592-46a3-d266-779995be541e.png">

# メニューの定義ファイルを作る
resの下にmenuという名前でフォルダを作ります。
そのmenuを右クリック → 新規

![Screenshot_20221124_212524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/9912917e-651b-c24f-a420-572e09935541.png)
Menu Resource Fileを選択します。
![Screenshot_20221124_212447.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/50a76572-8558-1735-2089-dc1451abc08a.png)
ファイル名は適当に、menu_sampleにします
![Screenshot_20221124_212944.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/38650fd7-418f-6de6-f517-9056c0ec00f4.png)
デザイナのビューが表示されます。まだ何もないのでからっぽです。
![Screenshot_20221124_213137.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/be6ad52f-9081-6a18-d8b1-aeec8ee1c0dc.png)
左上のPaketteのビューから左下のComponetTreeのビューにドラック＆ドロップして部品を追加していきます。
最初にActionBarにアイコンを追加します。Menu Itemをドラック＆ドロップして追加します。アイコンの場合は、
```xml
app:showAsAction="ifRoom"
```
を指定して、android:iconにリソースの中から適当なアイコンを選択します。
![Screenshot_20221124_214438.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/615835d8-6876-99ce-36c3-11656ef42cba.png)
次にメニューを追加します。階層的には
* アイコンアイテム （↑でつくったやつ）
* メニューアイテム１
* メニューアイテム２
  * メニュー
    * メニューアイテム３−１
    * メニューアイテム３−２
    
のような階層になるように作ります。  こんな感じです。
![Screenshot_20221124_215032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933408/89787b30-e581-21df-16a0-c433c904b26c.png)
出来上がりのmenu_sample.xmlはこのようになります。
```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のタイトルと色を変えてみます。（色とタイトルは適当に変えてください）
```kotlin
    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です。
```kotlin
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.menu_sample, menu)
        return true
    }
```
メニューが選択された場合のハンドラを定義するためメソッドをoverrideします。
```kotlin
    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](https://github.com/cozyk100/AndroidStudioProjectsPublic/tree/main/ActionBarKotlin)にありますのでそちらを参照してください