コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

Android Kotlin基礎講座 03.2: ナビゲーションパスを定義する

目次

タスク：オプションメニューを追加する

Androidにはオプションメニューを含むいくつかのタイプのメニューがあります。最近のAndroid端末では、アプリバーに表示される縦三つの点のアイコンをタップすることでオプションメニューにアクセスすることができます。

このタスクでは、Aboutメニューアイテムをオプションメニューに追加します。ユーザーがAboutメニューをタップすると、AboutFragmentに遷移し、アプリの使い方に関する情報を見ることができます。

ステップ1：AboutFragmentをナビゲーショングラフに追加する

  1. navigation.xmlを開いて、Designタブをクリックしナビゲーショングラフを表示してください。
  2. New Destinationボタンをクリックして、fragment_aboutを選択してください。

  3. レイアウトエディターで他のフラグメントと被らないように、aboutFragmentを左側にドラッグしてください。フラグメントのIDがaboutFragmentであることを確認してください。

ステップ2：オプションメニューリソースを追加する

  1. Android Studioのプロジェクトパネルでresフォルダーの上で右クリックし、New > Android Resource Fileを選択してください。
  2. New Resource Fileダイアログで、ファイル名をoptions_menuとしてください。
  3. Resource typeにはMenuを選択し、OKをクリックしてください。

  1. res > menuフォルダーからoptions_menu.xmlを開いてください。Designタブをクリックして、レイアウトエディターを表示してください。
  2. パレットからMenu Item（1）をデザインエディター(2)のどこでもいいのでドラッグ＆ドロップしてください。メニューアイテムがプレビュー(3)とコンポーネントツリー(4)に表示されます。

  3. プレビュー、またはコンポーネントツリー中のメニューアイテムをクリックして、アトリビュートパネルを表示してください。
  4. メニューアイテムのIDをaboutFragmentとし、titleは@string/aboutとしてください。

Tip: たった今追加したメニューアイテムのIDが先ほどナビゲーショングラフに追加したAboutFragmentのIDと完全に一致していることを確認してください。これによってonClickハンドラーのコードをより簡素なものにすることができるようになります。

ステップ3：onClickハンドラーを追加する

このステップでは、Aboutメニューをタップしたときの挙動を実装するためのコードを追加します。

  1. TitleFragment.ktを開いてください。onCreateView()メソッド中のreturnの前に、setHasOptionMenu()メソッドの呼び出しを行います。引数にはtrueを渡します。
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   ...
   setHasOptionsMenu(true)
   return binding.root
}
  1. onCreateView()メソッドの後に、onCreateOptionMenu()メソッドをオーバーライドしてください。このメソッド中で、オプションメニューを追加、メニューリソースファイルをインフレートしています。
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
   super.onCreateOptionsMenu(menu, inflater)
   inflater?.inflate(R.menu.options_menu, menu)
}
  1. メニューアイテムがタップされたときに適切なアクションを選択するために、onOptionItemSelected()メソッドをオーバーライドしてください。今回の場合、アクションとはメニューアイテムのIDと同じIDをもつフラグメントに遷移させることです。
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
   return NavigationUI.onNavDestinationSelected(item!!,
           view!!.findNavController())
           || super.onOptionsItemSelected(item)
}
  1. アプリがビルドされない場合、コード中でインポートが必要とされている参照部分(赤く表示されます）がないか確認して、あった場合、Alt+Enter(Macの場合Option+Enter)でインポートしてください。
  2. アプリを起動してオプションメニューに表示されるAboutメニューをテストしてください。about画面に遷移するはずです。