【kotlin】BottomNavigationViewの設定とFragmentによる画面変遷


BottomNavigationViewとFragmentの設定について学習したので、忘れないように記事にしてみました。

NavigationボタンクリックによりFragment画面を変遷させる。
初心者から初心者へ向けた投稿です。

##■BottomNavigationViewの実装

最初に、activity_main.xmlにBottomNavigationViewを配置
自分でわかりやすいidを設定しておいたほうが後で作業しやすいです。

![スクリーンショット 2021-08-16 6.10.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/108712dc-ac86-4647-83e3-038215df1655.png)


```activity_main.xml
  <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

##■Navigation Resource Fileの設定

![スクリーンショット 2021-08-16 6.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/4cce9afd-75b3-5c89-85dc-4a4794d81203.png)


File nameを入力してOKをクリック。（任意の名前）

![スクリーンショット 2021-08-16 6.26.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/d30ab2be-cd77-8f63-132a-fffa0604c87c.png)


Fragmentを追加。
![スクリーンショット 2021-08-16 6.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/9d093394-4453-f047-29cc-ee49c5195977.png)
Create new destinationをクリックし、Fragment(Blank)を選択

![スクリーンショット 2021-08-16 6.37.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/5fff2dd3-f311-7a05-d6ca-c2f1e613dd27.png)
Fragment Nameに入力（任意の名前）して、Finishをクリック。
同様に処理を行い、下記の①〜③のFragmentを作成

① FragmentHome
② FragmentMenu
③ FragmentSetting

##■NavHostFragmentの設定

NavHostFragmentをactivity_main.xmlに設定

![スクリーンショット 2021-08-16 11.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/498b3407-1bd5-f49a-9b9e-a7c18ad02de0.png)

先ほど作成した、my_navigationを選択

![スクリーンショット 2021-08-16 11.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/9f9ff4b2-56e7-38f6-7ab9-3710d96ba1c0.png)
OKをクリック
activity_main.xml

```activity_main.xml
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="409dp"
        android:layout_height="673dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/my_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

##■Fragment画面の実装

それぞれのFragmentにtextViewを設定


※Navigation Resource FileからFragmentを追加すると、Kotlin Class/Fileが作成され、
layoutにFrameLayoutが自動的に設定される。
FrameLayout上では、textViewの位置を自由に設定できなかったため、先ずConstraintLayoutを貼り付け、textViewを貼り付けた。



![スクリーンショット 2021-08-16 11.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/065c828f-03de-c931-efae-a6bbc6ec607a.png)

##■Menu Resource Fileの設定
Resource ManagerのMenuを選択
![スクリーンショット 2021-08-16 11.43.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/9e9329d6-02a5-6e48-6f5b-01638f0aa193.png)
Navigation Resource Fileの時と同様の処理を行う

![スクリーンショット 2021-08-16 11.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/564e8228-2327-efa9-4965-40c12177fa11.png)
任意の名前を入力して、OKをクリック

![スクリーンショット 2021-08-16 11.47.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/b86d3ec2-ada4-d36e-1bb3-069d86217488.png)

Menu Item（３つ）を設定
![スクリーンショット 2021-08-16 11.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/f919465b-0f3b-75e5-73d2-e99cad87f5b2.png)

##■メニューアイコンの取得
ResourceManagerからDrawableを選択
➕ボタンをクリックし、Vector Assetを選択
![スクリーンショット 2021-08-16 11.57.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/f81eb54f-f265-df44-81b9-cb717a8eb0c7.png)
Clip Artをクリック
![スクリーンショット 2021-08-16 11.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/be43c08a-a8dd-d621-3d28-5d5f26151007.png)

検索窓にコマンドを入力して、好きなアイコンを選択
![スクリーンショット 2021-08-16 12.00.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/60383717-ad0a-7056-fc9d-55331f8cc75c.png)

名前を入力してnext → finish
その他のメニューに表示させるアイコンも取得
![スクリーンショット 2021-08-16 12.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1694374/cf6bd198-b7e5-669d-6bac-f5fcc9e37e29.png)

my_menu.xmlに取得した、Fragmentのid、iconのidを設定


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

    <item
        android:title="ホーム画面"
        android:id="@+id/fragmentHome"
        android:icon="@drawable/ic_home" />
    <item
        android:title="メニュー画面"
        android:id="@+id/fragmentMenu"
        android:icon="@drawable/ic_home"/>
    <item
        android:title="設定画面"
        android:id="@+id/fragmentSetting"
        android:icon="@drawable/ic_home"/>
</menu>
```

activity_main.xmlにapp:menu="@menu/my_menu"を追加
※my_menu部分には、設定した名前を入力

##■BottomNavigationViewにメニュを設定

```activity_main.xml
 <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/my_menu"/>
```

##■MainActivityにBottomNavigationViewからFragmentの画面変遷を設定
最後にMainActivity.ktに画面を変遷させるコードを記述

```MainActivity.kt
package com.example.bottomnav_app

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.navigation.fragment.findNavController
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //BottomNavigationViewの設定
        val bottomNavigationView=findViewById<BottomNavigationView>(R.id.bottomNavigationView)
        val navController=supportFragmentManager.findFragmentById(R.id.fragmentContainerView)
        bottomNavigationView.setupWithNavController((navController!!.findNavController()))
    }
}
```


以上で、BottomNavigationViewによる画面変遷が実装できました。