Edited at

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

NavigationUI クラスを使うことでAACのNavigationと後述するUIComponentを簡単に連携されることができるので備忘録として記事にします。

公式リファレンスはこちら


NavigationUIクラスとは

NavigationUIクラスには、

Top App BarNavigation DrawerBottom NavigationとNavigationを連携するためのメソッドが用意されている。


Top App Bar

mio-design-assets-1ekbPWQqJ5sMNvJ0om7XelfzOhaWMaeyM-topappbars-howtouse-1.png


Navigation Drawer

mio-design-assets-1JkhpaOoDpFrCKLLoZMmbfiBMofzKS-lY-usage-do.png


Bottom Navigation

mio-design-assets-1h5m0BGM_LfXii-6hO4JisEM0bcWvG0Gl-bottomnav-usage-1.png

画像は公式サイトのものをお借りしました。

マテリアル・デザイン


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)
}

今回記事は以上です。