7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

NavigationDrawer(サイドメニュー)を実装する

Last updated at Posted at 2021-02-11

はじめに

KotlinでNavigationDrawerを実装する方法を忘れないために、メモがてら書いています。
コードを簡潔にするため、バインディングは使用していません。

環境

  • Android Studio 4.1.1
  • kotlin 1.4.10

事前準備

1. 画面の作成

各画面はフラグメントで実装するため、MainActivity以外に今回は

  • HomeFragment
  • ProfileFragment
  • SettingsFragment

を用意する。

2. Navigation Graphの作成

画面遷移を管理するNavigationファイルを作成する。
res -> New -> Android Resource File

スクリーンショット 2021-02-09 15.13.55.png

最初に作成した3つのフラグメントを追記する。
GUIからでもフラグメントを追加可能。

navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/navigation"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.drawerexample.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.drawerexample.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile" />
    <fragment
        android:id="@+id/settingsFragment"
        android:name="com.example.drawerexample.SettingsFragment"
        android:label="fragment_settings"
        tools:layout="@layout/fragment_settings" />
</navigation>

実装手順

1. 依存関係の追加

build.gradle
implementation 'com.google.android.material:material:1.2.1'
implementation 'androidx.navigation:navigation-fragment-ktx:2.3.0'
implementation 'androidx.navigation:navigation-ui-ktx:2.3.0'

2. メニューのレイアウトファイル作成

res -> New -> Android Resource File

スクリーンショット 2021-02-06 13.59.43.png

メニューに表示するアイテムを定義。
android:idはnavigation.xmlで定義している各フラグメントのidと同じ必要があるので注意。
アイテムにアイコンを表示する場合は、android:iconを定義する。

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

    <item
        android:id="@+id/profileFragment"
        android:title="プロフィール" />
    <item
        android:id="@+id/settingsFragment"
        android:title="設定" />
</menu>

3. DrawerLayoutを定義する

まず、ナビゲーションドロワーを追加するため、DrawerLayoutをルートビューとして宣言する。
既存のfragmentをNavHostFragmentに変更する。
次に、</LinearLayout>の下にナビゲーションドロワーのビューを表示する用のNavigationViewを追加する。

activity_main.xml
<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="match_parent"
        android:orientation="vertical">

        <fragment
            android:id="@+id/navHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:name="androidx.navigation.fragment.NavHostFragment"
            app:defaultNavHost="true"
            app:navGraph="@navigation/navigation" />

    </LinearLayout>

    <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:menu="@menu/navdrawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

android:layout_gravity:どの方向からスワイプすることでメニューが表示されるかを設定する
app:menu:ドロワーメニューのレイアウトファイル(XML)を設定する

この時点で左から右にスワイプするとメニューが表示されるが、各アイテムをタップしても対象の画面に遷移されないため、MainActivity.ktonCreate()に以下のコードを追加。

MainActivity.kt
val navView: NavigationView = findViewById(R.id.navView)
val navController = this.findNavController(R.id.navHostFragment)

NavigationUI.setupWithNavController(navView, navController)

4. ドロワーボタンを追加する

このままではスワイプでしか表示することができないので、ドロワーを表示するためのボタンを設定する。

1. DrawerLayout変数を定義
MainActivity.kt
private lateinit var drawerLayout: DrawerLayout
2. DrawerLayout変数を初期化

onCreate()メソッド内で、drawerLayoutを初期化する。

MainActivity.kt
drawerLayout = findViewById(R.id.drawerLayout)
3. DrawerLayoutをsetupActionBarWithNavController()に追加
MainActivity.kt
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
4. onSupportNavigateUp()を追加

onCreate()メソッドの下に追加する。

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

実行結果

Screenshot_1612850140.png
7
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?