〈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