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

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

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

■BottomNavigationViewの実装

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

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の設定

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

Fragmentを追加。

Create new destinationをクリックし、Fragment(Blank)を選択

Fragment Nameに入力（任意の名前）して、Finishをクリック。
同様に処理を行い、下記の①〜③のFragmentを作成

① FragmentHome
② FragmentMenu
③ FragmentSetting

■NavHostFragmentの設定

NavHostFragmentをactivity_main.xmlに設定

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

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を貼り付けた。

■Menu Resource Fileの設定

Resource ManagerのMenuを選択

Navigation Resource Fileの時と同様の処理を行う

任意の名前を入力して、OKをクリック

Menu Item（３つ）を設定

■メニューアイコンの取得

ResourceManagerからDrawableを選択
➕ボタンをクリックし、Vector Assetを選択

Clip Artをクリック

検索窓にコマンドを入力して、好きなアイコンを選択

名前を入力してnext → finish
その他のメニューに表示させるアイコンも取得

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による画面変遷が実装できました。