💻
【備忘録】Navigation UI+Toolbarについて
備忘録⑦Navigation UI + Toolbar
前回に引き続き、Todoアプリで使ったNavigationを用いたToolbarについて備忘録を残します。
もしよろしければ、アプリの感想やご意見も頂ければ幸いです。
はじめに
最近のAndroidアプリケーションでは、ナビゲーションとユーザーインターフェースの一部としてToolbarの使用が一般的です。Navigationコンポーネントを使用することで、Toolbarをナビゲーションに統合することができます。前回のNavigationと統合することで、ページに合わせてToolbarのタイトルの変更など、複雑な要件を満たすこともできます。
Navigationのセットアップや実装方法
アクティビティやフラグメントで、NavigationUIクラスを使用してナビゲーションUIコンポーネント(例: Toolbar)をセットアップし、setupActionBarWithNavController()メソッドを使用して、ToolbarをNavControllerに関連付けます。
// アクティビティでのセットアップ例
val navController = findNavController(R.id.nav_host_fragment)
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
setupActionBarWithNavController(this, navController)
// フラグメントでのセットアップ例
val navController = findNavController()
val toolbar = view.findViewById<Toolbar>(R.id.toolbar)
requireActivity().setSupportActionBar(toolbar)
setupActionBarWithNavController(requireActivity(), navController)
オプションメニューの追加方法
- ナビゲーションに応じて動的にオプションメニューを表示する場合、メニューリソースファイルを作成します。
<!-- menu_navigation.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_item1"
android:title="Item 1"
android:icon="@drawable/ic_item1"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item2"
android:title="Item 2"
android:icon="@drawable/ic_item2"
app:showAsAction="ifRoom" />
</menu>
- onCreateOptionsMenu()メソッドをオーバーライドし、メニューリソースをインフレートします。
// フラグメントやアクティビティ内でのオプションメニューのセットアップ例
override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
inflater.inflate(R.menu.menu_navigation, menu)
super.onCreateOptionsMenu(menu, inflater)
}
- onOptionsItemSelected()メソッドをオーバーライドし、メニューアイテムのクリックイベントを処理します。
override fun onOptionsItemSelected(item: MenuItem): Boolean {
val navController = findNavController()
return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
}
ナビゲーションUIのカスタマイズ方法
ナビゲーションUIの見た目をカスタマイズする場合、styles.xmlファイルにテーマを定義し、ナビゲーションUIコンポーネントに適用します。テーマを使用して、Toolbarの色、アイコン、タイトルなどをカスタマイズすることができます。
<!-- styles.xml -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- ナビゲーションUIのカスタマイズ -->
<item name="toolbarStyle">@style/Widget.MyApp.Toolbar</item>
</style>
<style name="Widget.MyApp.Toolbar" parent="Widget.MaterialComponents.Toolbar">
<!-- Toolbarのカスタマイズ -->
<item name="android:background">@color/toolbar_background_color</item>
<item name="titleTextAppearance">@style/TextAppearance.MyApp.Toolbar.Title</item>
</style>
<style name="TextAppearance.MyApp.Toolbar.Title" parent="TextAppearance.MaterialComponents.Headline6">
<!-- タイトルテキストのカスタマイズ -->
<item name="android:textColor">@color/toolbar_title_color</item>
</style>
まとめ
Navigationコンポーネントを使用して、Toolbarをナビゲーションに統合することで、ユーザーインターフェースの一貫性を向上させることができます。
一般的にToolbarの利用はどんなアプリでも搭載されているので、知識として頭の隅に置いておくと良いかもしれませんね。
Discussion