KotlinでNavigationDrawerを表示してみた

検証環境

この記事の内容は、以下の環境で検証した。

• Java:open jdk 1.8.0_152
• Kotlin 1.2.10
• Android Studio 3.0.2
• CompileSdkVersion:26

はじめに

今更ですが、Kotlinで最小限のNavigationDrawerを実装してみました。
本当に必要最小限のため、ハンバーガーなどは実装していません。

アプリの全体像

下図のアプリを作成しました。

実装手順

アプリを作るために下記の順で実装していきました。

1. build.gradle(APPモジュール)
2. 文字列の定義
3. 1行分のレイアウト
4. 画面のレイアウトファイル
5. ListViewの行がタップされた時の処理

実装内容の説明

1.build.gradle(APPモジュール)

NavigationDrawerはSuppert v4に含まれているため、gradleに下記を追記しました。

build.gradle

dependencies {
    implementation 'com.android.support:support-v4:26.1.0'
}

2. 文字列の定義

メニューとして表示する文字列配列を文字列リソースに定義しました。

strings.xml

<resources>
    <string name="app_name">NavigationDrawerKotlin</string>

    <string-array name="menu_string_array">
        <item>赤</item>
        <item>青</item>
        <item>黄</item>
    </string-array>
</resources>

3. 1行分のレイアウト

メニューはListViewで実装しているため、1行分のレイアウトファイルを作成しました。

list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:textSize="30sp">
</TextView>

4. 画面のレイアウトファイル

画面のレイアウトでは下記がポイントとなります。

• ルートのビューは「android.support.v4.widget.DrawerLayout 」であること。
• ルートビューにidを指定すること。
• 1つ目のューがメインコンテンツになること。
• 2つ目のビューがNavigationDrawerで表示される部分であること。
• 2つ目のビューで「android:layout_gravity」属性を指定すること。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.co.casareal.navigationdrawerkotlin.MainActivity">

    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ここで内容を表示する"
            android:textSize="30sp" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start">

        <ListView
            android:id="@+id/navigation_menu_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white" />
    </LinearLayout>


</android.support.v4.widget.DrawerLayout>

5. ListViewの行がタップされた時の処理

メニューはListViewで実装しているため、ListViewの行がタップされた時の処理を実装しています。
タップされた時に、コンテンツの背景を変化させ、メニューを閉じています。
メニューを閉じるには、「DrawerLayout」のcloseDrawersメソッドを呼び出します。

MainActivity.kt

package jp.co.casareal.navigationdrawerkotlin

import android.graphics.Color
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.app.ActionBarDrawerToggle
import android.view.View
import android.widget.ArrayAdapter
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val strings = resources.getStringArray(R.array.menu_string_array)
        val adapter = ArrayAdapter<String>(this,R.layout.list_row,strings)

        navigation_menu_list.adapter=adapter
        navigation_menu_list.setOnItemClickListener { _, _, position, _ ->
            val color = when{
                strings[position] == "赤" -> Color.RED
                strings[position] == "青" -> Color.BLUE
                else -> Color.YELLOW
            }
            content_layout.setBackgroundColor(color)

            drawer_layout.closeDrawers()
        }
    }
}

まとめ

NavigationDrawerはハンバーガーなどを実装しなければ、かなり簡潔にかけますね。
また、Javaでの実装と比べてみると、Kotlinで実装したほうがかなり簡潔にかけるように感じます。