Zenn
📱

[Android]Toolbar + Navigationでドロワーを実装したい

2022/06/13に公開
Android
Kotlin
Jetpack
navigation
toolbar
tech

前提

  • Navigationでの基本的な遷移を理解していること

概要


こういうヘッダー付きのドロワーを実装したい

手順概要

  • ドロワーのヘッダーをxmlで設定
  • ドロワーで設定するアイテムをxmlで設定
  • activity_main.xmlにドロワーレイアウト、ナビゲーションビューを設定
  • toolbarにハンバーガーメニューを表示させる
  • MainActivityにonSupportNavigateUpをオーバーロードする
  • ドロワーアイテムをタップすると遷移するようにする

ドロワーのヘッダーをxmlで設定

プロジェクトツリーからlayoutを右クリックし、New>Layout Resourse Fileで新規layoutを作成

drawer_header.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/drawer">

    <ImageView
        android:id="@+id/drawer_image"
        android:layout_width="0dp"
        android:layout_height="192dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/cat" />
</androidx.constraintlayout.widget.ConstraintLayout>

ここではドロワーヘッダーに設定する画像（猫）を設定しています。

ドロワーで設定するアイテムをxmlで設定

プロジェクトツリーのresで右クリックし、New>Android Resource FileでResource typeでmenuに選択して新規作成する

drawer_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/first_drawerFragment"
        android:title="ドロワーアイテム１" />
    <item
        android:id="@+id/secondDrawerFragment"
        android:title="ドロワーアイテム２" />
</menu>

ドロワーに表示するアイテムを設定する
※アイテムをタップした時に遷移させたいnavigation graphで設定されているフラグメントのidとこのレイアウトで設定しているidを同じにすると、後程の設定でタップ時に遷移できるようにnavigationが上手いことやってくれるようになる

activity_main.xmlにドロワーレイアウト、ナビゲーションビューを設定

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
    <androidx.drawerlayout.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme"
                app:title="ナビゲーションサンプル" />

        </LinearLayout>
        <fragment
            android:id="@+id/myNavHostFragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:defaultNavHost="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toolbar"
            app:navGraph="@navigation/navigation"
            android:layout_marginTop="?attr/actionBarSize"/>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

まずルートのviewGroupをDrawerLayoutに変更する
ドロワー部分であるNavigationViewを設定する
app:headerLayoutでドロワーヘッダーのxmlを参照する
app:menuでドロワーアイテムを設定しているmenuのxmlを参照する
android:layout_gravity="start"で左からスワイプするとドロワーメニューが表示されるようになる
右からにしたいのならendにすればいい
※

  • ToolbarがLinearLayoutが囲まれているのは囲まないと画面いっぱいにtoolbarが広がってしまったため
  • android:layout_marginTop="?attr/actionBarSize"を設定しているのはtoolbar分marginTopを開けないとレイアウトがtoolbarが被ってしまうため
    （もっといい方法があると思いますが、、、）

toolbarにハンバーガーメニューを表示させる

onCreate内

MainActivity
val navController = findNavController(R.id.myNavHostFragment)
        val appBarConfiguration = AppBarConfiguration(navController.graph)
        drawerLayout = findViewById(R.id.drawerLayout)

        NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)

setupActionBarWithNavControllerの引数にコンテキスト、navControllerdrawerLayoutを入れることで、toolbarにハンバーガーメニューが表示されます

MainActivityにonSupportNavigateUpをオーバーロードする

MainActivity
override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.myNavHostFragment)
        return NavigationUI.navigateUp(navController, drawerLayout)
    }

NavigationUI.navigateUpにnavControllerとdrawerLayout（drawerLayout = findViewById(R.id.drawerLayout)）を渡してやる
そうするとスワイプするとドロワーメニューが表示されるようになる

ドロワーアイテムをタップすると遷移するようにする

現状ドロワーアイテムをタップしても遷移しない
onCreate内

MainActivity
NavigationUI.setupWithNavController(findViewById<NavigationView>(R.id.navView), navController)

NavigationUI.setupWithNavControllerの引数にactivity_main.xmlのNavigationViewのidとnavController（val navController = findNavController(R.id.myNavHostFragment)）を渡す
そうするとドロワーアイテムをタップするとnavigation graphで設定したfragmentへと遷移するようになる

Discussion