KotlinでNavigationDrawerを表示してみた

# 検証環境
この記事の内容は、以下の環境で検証した。
* Java:open jdk 1.8.0_152
* Kotlin 1.2.10
* Android Studio 3.0.2
* CompileSdkVersion:26

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

# アプリの全体像
下図のアプリを作成しました。
![アプリの全体像.png](https://qiita-image-store.s3.amazonaws.com/0/99960/a5ef78d2-3499-f908-369a-b39d9bba4b90.png)



# 実装手順
アプリを作るために下記の順で実装していきました。
1. build.gradle(APPモジュール)
2. 文字列の定義
3. 1行分のレイアウト
4. 画面のレイアウトファイル
5. ListViewの行がタップされた時の処理

# 実装内容の説明
## 1.build.gradle(APPモジュール)
NavigationDrawerはSuppert v4に含まれているため、gradleに下記を追記しました。

```groovy:build.gradle
dependencies {
    implementation 'com.android.support:support-v4:26.1.0'
}

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

```xml: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行分のレイアウトファイルを作成しました。

```xml: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」属性を指定すること。


```xml: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メソッドを呼び出します。

```kotlin: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で実装したほうがかなり簡潔にかけるように感じます。