【Kotlin】Navigation(AAC)とUIComponentを連携する

15440 ワード
MaterialDesign navigation NavigationUI AndroidArchitectureComponents Kotlin Kotlin テキストリンク

記事を移動しました。

https://zenn.dev/dd_sho/articles/7d849ffa8c7829
今後は上記の記事で更新します。（2021/10/03）

NavigationUI クラスを使うことでAACのNavigationと後述するUIComponentを簡単に連携されることができるので備忘録として記事にします。
公式リファレンスはこちら

NavigationUIクラスとは

NavigationUIクラスには、
Top App Bar、Navigation Drawer、Bottom NavigationとNavigationを連携するためのメソッドが用意されている。

Top App Bar

Navigation Drawer

Bottom Navigation

画像は公式サイトのものをお借りしました。
マテリアル・デザイン

Top App Barとの連携

できること
・戻るボタン（←）の表示
・画面遷移時にタイトルをNavigationのグラフで各画面に設定したlabelで自動更新する

連携可能なTop App Bar

  • ToolBar
  • CollapsingToolBarLayout
  • ActionBar

Navigationボタンの挙動を管理するためにAppBarConfigurationクラスを利用する。
デフォルトではNavigationグラフで画面遷移の一番最初の画面ではNavigationボタンは表示されず、
他の画面に遷移したら戻るボタンが表示される。
以下のようにインスタンスを生成する。

val appBarConfiguration = AppBarConfiguration(navController.graph)

画面遷移の一番最初の画面を指定する場合は、

val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.android))

ToolBar

ActivityのonCreate()メソッド内で

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    // ・・・

    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    findViewById<Toolbar>(R.id.toolbar)
        .setupWithNavController(navController, appBarConfiguration)
}

※ToolBarを使う時は、Navigationが自動的にクリックイベントをハンドルするので
onSupportNavigateUp()をオーバーライドする必要はない。

CollapsingToolbarLayout

ActivityのonCreate()メソッド内で

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    // ・・・

    val layout = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar_layout)
    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    layout.setupWithNavController(toolbar, navController, appBarConfiguration)
}

Action Bar

①ActivityのonCreate()メソッド内で


private lateinit var appBarConfiguration: AppBarConfiguration

// ・・・

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    // ・・・

    val navController = findNavController(R.id.nav_host_fragment)
    appBarConfiguration = AppBarConfiguration(navController.graph)
    setupActionBarWithNavController(navController, appBarConfiguration)
}

②onSupportNavigateUp()メソッドをオーバーライドする。（戻るボタンが動作する）

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return navController.navigateUp(appBarConfiguration) || 
        super.onSupportNavigateUp()
}

MenuItemと画面を紐付ける

①Navigationグラフのfragmentに割り振るidと紐づけるMenuItemのidを一致させる。
②ActivityのonOptionsItemSelected()をオーバーライドし、onNavDestinationSelected()を呼び出す。

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return item.onNavDestinationSelected(navController) || 
        super.onOptionsItemSelected(item)
}

Navigation Drawerとの連携

ActivityのonCreate()内で、

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    // ・・・

    val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
    val navController = findNavController(R.id.nav_host_fragment)
    findViewById<NavigationView>(R.id.nav_view)
        .setupWithNavController(navController)
}

※Top App Barがdrawerアイコンと戻るボタンの切り替えを自動でやってくれるのでActionBarDrawerToggleクラスを使う必要はない。

Bottom Navigationとの連携

できること
　Bottomアイテムが選択されるとNavControllerはonNavDestinationSelected()を呼び、自動的に選択状態を更新する。

ActivityのonCreate()内で、

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    // ・・・

    val navController = findNavController(R.id.nav_host_fragment)
    findViewById<BottomNavigationView>(R.id.bottom_nav)
        .setupWithNavController(navController)
}

今回記事は以上です。