Zenn
💻

【備忘録】Navigation UI+Toolbarについて

2023/07/24に公開
Android
#
navigation
#
toolbar
#
actionbar
tech

備忘録⑦Navigation UI + Toolbar

前回に引き続き、Todoアプリで使ったNavigationを用いたToolbarについて備忘録を残します。

もしよろしければ、アプリの感想やご意見も頂ければ幸いです。
https://play.google.com/store/apps/details?id=jp.dev.myapp.todo

はじめに

最近のAndroidアプリケーションでは、ナビゲーションとユーザーインターフェースの一部としてToolbarの使用が一般的です。Navigationコンポーネントを使用することで、Toolbarをナビゲーションに統合することができます。前回のNavigationと統合することで、ページに合わせてToolbarのタイトルの変更など、複雑な要件を満たすこともできます。

アクティビティやフラグメントで、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)

オプションメニューの追加方法

  1. ナビゲーションに応じて動的にオプションメニューを表示する場合、メニューリソースファイルを作成します。
<!-- 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>
  1. onCreateOptionsMenu()メソッドをオーバーライドし、メニューリソースをインフレートします。
// フラグメントやアクティビティ内でのオプションメニューのセットアップ例
override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
    inflater.inflate(R.menu.menu_navigation, menu)
    super.onCreateOptionsMenu(menu, inflater)
}
  1. 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