KotlinでBottomNavigationViewを使用してFragmentを切り替え

最近、Kotlinの勉強がてら色々作ってみたいと思っています。
以前はAndroidで下タブは色々言われてたけど、
今となっては標準で用意されていて新規プロジェクト作成のテンプレが用意されているので
それを使って簡単に下タブ + Fragmentの切り替えを簡単に作ってみます。

#新規プロジェクト作成

新規プロジェクトの作成でBottom Navigation Activityを選択します。
![スクリーンショット 2018-05-21 11.41.35.png](https://qiita-image-store.s3.amazonaws.com/0/172740/e0e3da60-7db2-a7ab-9555-8b3b9fcdb16e.png)

そうすると、MainActivityにBottomNavigationActivityのListenerの処理も記述されている状態で作成されるので超簡単。

下タブの内容を変更したいときはapp　→ res → menu →　navigation.xmlのitemを追加・削除したり、title変えたり、iconを変えたりするだけ。

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>
```

#Fragmentの切り替え
初期のTextViewが入っているところをFrameLayoutに置き換えて、そこにFragmentが入るようにする。

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/navigation"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>
```

今回はdefault下タブに合わせてHomeFragmentとDashboardFragmentとNotificationFragmentを作成。
Fragmentのlayoutをそれぞれ作成(fragment_dashboard.xmlとfragment_notification.xmlはTextViewのところの文字が違うだけのものを作成)

```xml:fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/title_home"/>

</android.support.constraint.ConstraintLayout>
```

それぞれのFragmentを作成(DashboardFragment.ktとNotificationFragment.ktはinflateするlayoutがそれぞれR.layout.fragment_dashboardとR.layout.fragment.notificationになっただけ)

```kotlin:HomeFragment.kt
class HomeFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return  inflater.inflate(R.layout.fragment_home, container, false)
    }
}
```

MainActivityのBottomNavigationViewのリスナーにFragment切り替えの処理を記述

```kotlin:MainActivity.kt
class MainActivity : AppCompatActivity() {

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->

        when (item.itemId) {
            R.id.navigation_home -> {
                supportFragmentManager.beginTransaction()
                        .replace(R.id.frameLayout, HomeFragment())
                        .commit()
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                supportFragmentManager.beginTransaction()
                        .replace(R.id.frameLayout, DashboardFragment())
                        .commit()
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                supportFragmentManager.beginTransaction()
                        .replace(R.id.frameLayout, NotificationsFragment())
                        .commit()
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

        //初期表示
        supportFragmentManager.beginTransaction()
                .replace(R.id.frameLayout, HomeFragment())
                .commit()
    }

}
```
これだけです。
![Screenshot_1526874585.png](https://qiita-image-store.s3.amazonaws.com/0/172740/a9bf5bb5-ba34-d341-b1b7-6536c48d5ef3.png)

Fragmentに表示するViewを色々分ければそれなりのアプリが簡単に作れそうな気がしました。