カスタムツールバーにオプションメニューを設置する方法

#前提条件
SDKバージョン：　30
Androidバージョン：　9.0

#カスタムツールバーとは
カスタムツールバーとはカスタムビューで作成したツールバーです。もっと噛み砕いていうと、Androidがデフォルトで用意しているツールバーはデザインが固定されていて使い勝手が悪いので自分でカスタムしたツールバーのことです。

詳しくはこちらを参考に
[カスタムビュー：ToolBar(ActionBar)を自作しよう！](https://qiita.com/mi_iroha/items/c8b6a1a6262c77e28301)

#この記事は
話を戻しまして、カスタムツールバーにオプションメニューを設置したいことがあると思います。例えばこんな感じで、画面の上部にカスタムツールバーを配置します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/98d8ada7-4116-3908-7e5a-431b7635d646.png" width=70%>
このツールバーの右側のイメージボタンをタップすると以下のようにオプションメニューを表示させたいとします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/d08907f9-47ca-7fd6-fac6-81465828f01c.png" width=70%> 
そしてこのオプションメニューをクリックしたら別の画面に画面遷移するようにしたい。この一連の流れをどのように実現させるかを本記事で解説します。

#menuを作る
まず表示させたいオプションメニューを作成します。今回で言うと「検診を終了する」と言う内容のメニューの部分です。

1) menuディレクトリを作成
2) menuリソースファイル追加
3)  メニュー作成

の三段構成でできます。

###1) menuディレクトリを作成
まずこちらの記事を参考に、
File→New→Folderの中にAssets Folderがあるので、それを選択し、namaeをmenuにしてassetsフォルダを作成します。すると、resの下にmenuというassetsフォルダができるはずです。こんな感じ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/1b9b24a2-cd1e-85f4-ac8f-2722d626185e.png" width=50%>
参考：
[Android StudioでAssetsフォルダを簡単に作成する方法について](https://knowledge.moshimore.jp/entry/android_assets_folder)

###2) menuリソースファイル追加
この`menu assets`の中にmenuファイルを作成します。
追加したmenuフォルダで右クリックして`New→Menu Resource File`を選択します
![スクリーンショット 2021-06-13 14.05.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/b7228a4f-7ef1-3812-439b-fe679e27f71f.png)
ファイル名は今回は`main_menu`とします。すると以下のようにmenuフォルダの中に`main_menu`ファイルが作成されているはずです。
![スクリーンショット 2021-06-13 14.09.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/b91063bc-d3b3-c892-87fd-130f9641ed5a.png)

###3) メニュー作成
Paletteの`MenuItem`をドラッグアンドドロップでComponentTreeに追加します。オプションメニューに表示したいメニューの数だけ追加します。今回は「検診を終了する」以外のメニューは表示させない予定なので`MenuItem`は一つだけComponentTreeに追加します。するとまぁこんな感じになります。
![スクリーンショット 2021-06-13 14.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/ddb9a8d6-5220-56e9-553d-c059b33cedb8.png)

これで表示するメニューの作成は完了です。

#メニューを表示させる
カスタムツールバーを作成した時に右のボタンをクリックした時の処理をどうするかは、その画面で決定しなければいけないようにしているので、インタフェースをオーバーライドしてきて、その中で以下のように実装します。この辺の詳細はこちらの記事を読んでいただけるとよく理解できると思います。
参考：
[カスタムツールバーが各画面で柔軟にデザインを変更できるように設定する](https://qiita.com/mi_iroha/items/c8b6a1a6262c77e28301#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%84%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%81%8C%E5%90%84%E7%94%BB%E9%9D%A2%E3%81%A7%E6%9F%94%E8%BB%9F%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

```kotlin
override fun onClickedRightButton() {
        var menu = findViewById<View>(R.id.btn_right)
        val popup = PopupMenu(this, menu)
        menuInflater.inflate(R.menu.main_menu, popup.getMenu())
        popup.show()

        popup.setOnMenuItemClickListener {
            when(it.itemId) {
                R.id.menu_item_complete -> {
                    // メニューがクリックされたらファイル名を保持したまま確認画面へ画面遷移
                    val intent = Intent(this, ConfirmActivity::class.java)
                    intent.putExtra("FILE_NAME", fileName)
                    startActivity(intent)
                }
            }
            false
        }
    }
```
ポイントは、メニューは紐づけたビューの近くに表示されるので、クリックするボタンのidを以下のように指定すること。

```kotlin
 var menu = findViewById<View>(R.id.btn_right)
```

また、`openOptionsMenu()`ではなく、`PopupMenu()`という関数を利用すること。

```kotlin
val popup = PopupMenu(this, menu)
```

最後に、`popup.setOnMenuItemClickListener{}`を用いて、オプションメニューがクリックされたときの処理を書くことです。今回の場合は別のActivityに画面遷移をするようにしています。

```kotlin
popup.setOnMenuItemClickListener {
       when(it.itemId) {
           R.id.menu_item_complete -> {
               // メニューがクリックされたらファイル名を保持したまま確認画面へ画面遷移
               val intent = Intent(this, ConfirmActivity::class.java)
                intent.putExtra("FILE_NAME", fileName)
               startActivity(intent)
           }
        }
       false
 }
```

#完成！
実際にはこんな感じになります。
![customtoolbar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906559/b0626e3b-4171-fec5-bd91-4248d80833a8.gif)