〈kotlin〉Navigation④ ナビゲーションドロワー

Android studioでkotlinを使ってAndroidアプリ作成の勉強中。

アプリバー内のドロワーアイコンをタップしたときや画面の左端からスワイプしたときに表示される、
アプリのナビゲーションメニューを表示する UI パネルであるナビゲーションドロワーを実装する。

レイアウトファイル

activity_main.xmlに、DrawerLayout をルートビューとして宣言する。
その中にメイン UI コンテンツのレイアウト(NavHostFragment )と、
ナビゲーション ドロワーのコンテンツを格納するビュー( NavigationView)を追加する。

<androidx.drawerlayout.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <androidx.fragment.app.FragmentContainerView
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment"
        ...
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        ...
        //どの方向からスワイプすると表示されるか
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

</androidx.drawerlayout.widget.DrawerLayout>

ドロワーに表示するメニューの作成

resフォルダから「Android Resource File」を開き、
resource typeにmenuを選択して新しいxmlを作成する。

//navdrawer_menu.xml
<menu 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/first_Fragment"
        android:title="Fragment1" />
    <item
        android:id="@+id/second_Fragment"
        android:title="Fragment2" />
</menu>

itemタグでメニューに表示する項目を追加する。
このときitemのidを、ナビゲーショングラフで指定したフラグメントのidと一致させることで、
メニューで項目を選択したとき同じidのついたフラグメントに遷移することができる。

<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nav_graph"
    ... >

    <fragment android:id="@+id/first_fragment"
                      //このidと同じにする
         ... />

    <fragment android:id="@+id/second_fragment"
         ... />
</navigation>

作成したらNavigationViewにメニューを指定する。

<com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        ...
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/navdrawer_menu" />

MainActivityの実装

DrawerLayout を AppBarConfiguration に渡してアプリバーと接続する。
アプリバーにドロワーボタンが表示されるようになる。
NavigationViewにはNavControlleを設定する。

lass MainActivity : AppCompatActivity() {
    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.nav_host_fragment_container) as NavHostFragment
        val navController = navHostFragment.navController
        val drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)

        appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

        findViewById<NavigationView>(R.id.nav_view).setupWithNavController(navController)
        setupActionBarWithNavController(navController, appBarConfiguration)

    }

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

参考https://developer.android.com/guide/navigation/navigation-ui?hl=ja#add_a_navigation_drawer