前提条件
SDKバージョン： 30
Androidバージョン： 9.0
カスタムツールバーとは
カスタムツールバーとはカスタムビューで作成したツールバーです。もっと噛み砕いていうと、Androidがデフォルトで用意しているツールバーはデザインが固定されていて使い勝手が悪いので自分でカスタムしたツールバーのことです。
詳しくはこちらを参考に
カスタムビュー：ToolBar(ActionBar)を自作しよう！
この記事は
話を戻しまして、カスタムツールバーにオプションメニューを設置したいことがあると思います。例えばこんな感じで、画面の上部にカスタムツールバーを配置します。
このツールバーの右側のイメージボタンをタップすると以下のようにオプションメニューを表示させたいとします。
そしてこのオプションメニューをクリックしたら別の画面に画面遷移するようにしたい。この一連の流れをどのように実現させるかを本記事で解説します。
menuを作る
まず表示させたいオプションメニューを作成します。今回で言うと「検診を終了する」と言う内容のメニューの部分です。
- menuディレクトリを作成
- menuリソースファイル追加
- メニュー作成
の三段構成でできます。
1) menuディレクトリを作成
まずこちらの記事を参考に、
File→New→Folderの中にAssets Folderがあるので、それを選択し、namaeをmenuにしてassetsフォルダを作成します。すると、resの下にmenuというassetsフォルダができるはずです。こんな感じ。
参考：
Android StudioでAssetsフォルダを簡単に作成する方法について
2) menuリソースファイル追加
このmenu assetsの中にmenuファイルを作成します。
追加したmenuフォルダで右クリックしてNew→Menu Resource Fileを選択します
ファイル名は今回はmain_menuとします。すると以下のようにmenuフォルダの中にmain_menuファイルが作成されているはずです。
3) メニュー作成
PaletteのMenuItemをドラッグアンドドロップでComponentTreeに追加します。オプションメニューに表示したいメニューの数だけ追加します。今回は「検診を終了する」以外のメニューは表示させない予定なのでMenuItemは一つだけComponentTreeに追加します。するとまぁこんな感じになります。
これで表示するメニューの作成は完了です。
メニューを表示させる
カスタムツールバーを作成した時に右のボタンをクリックした時の処理をどうするかは、その画面で決定しなければいけないようにしているので、インタフェースをオーバーライドしてきて、その中で以下のように実装します。この辺の詳細はこちらの記事を読んでいただけるとよく理解できると思います。
参考：
カスタムツールバーが各画面で柔軟にデザインを変更できるように設定する
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を以下のように指定すること。
var menu = findViewById<View>(R.id.btn_right)
また、openOptionsMenu()ではなく、PopupMenu()という関数を利用すること。
val popup = PopupMenu(this, menu)
最後に、popup.setOnMenuItemClickListener{}を用いて、オプションメニューがクリックされたときの処理を書くことです。今回の場合は別のActivityに画面遷移をするようにしています。
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
}
完成！
実際にはこんな感じになります。
