BottomNavigationView と Navigationを一緒に使う

BottomNavigationView(下タブ)を切り替えるFragmentはNavigationでやったらすごく便利だったので残しておきます。

設定

// navigation 
implementation "android.arch.navigation:navigation-fragment:1.0.0-alpha07"
implementation "android.arch.navigation:navigation-ui:1.0.0-alpha07"
implementation "android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha07"
implementation "android.arch.navigation:navigation-ui-ktx:1.0.0-alpha07"

実装

レイアウトの実装

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".presentation.screen.home.MainActivity">

        <fragment
                android:id="@+id/nav_fragment"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:name="androidx.navigation.fragment.NavHostFragment"
                app:navGraph="@navigation/bottom_navigation_view"
                app:defaultNavHost="true"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="@id/navigation"/>

        <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?android:attr/windowBackground"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:itemTextColor="@color/colorPrimaryDark"
                app:itemIconTint="@color/colorPrimaryDark"
                app:menu="@menu/navigation"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

• bottom_navigation_view.xml

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

    <item
            android:id="@+id/navigation_style"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="メイン"/>

    <item
            android:id="@+id/navigation_item_list"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="アイテム"/>

    <item
            android:id="@+id/navigation_my_Page"
            android:icon="@drawable/ic_notifications_black_24dp"
            android:title="マイページ"/>

    <item
            android:id="@+id/navigation_cart"
            android:icon="@drawable/ic_notifications_black_24dp"
            android:title="カート"/>
</menu>

• navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            app:startDestination="@id/navigation_style"
            android:id="@+id/bottom_navigation_view">

    <fragment android:id="@+id/navigation_style"
              android:name="com.shougoyamada.StyleFragment"
              android:label="fragment_first"
              tools:layout="@layout/style_fragment" />

    <fragment android:id="@+id/navigation_item_list"
              android:name="com.shougoyamada.ItemFragment"
              android:label="fragment_first"
              tools:layout="@layout/item_fragment" />

    <fragment android:id="@+id/navigation_my_Page"
              android:name="com.shougoyamada.MyPageFragment"
              android:label="fragment_first"
              tools:layout="@layout/my_page_fragment" />

    <fragment android:id="@+id/navigation_cart"
              android:name="com.shougoyamada.CartFragment"
              android:label="fragment_first"
              tools:layout="@layout/cart_fragment" />

</navigation>

ここで注意してほしいのが、 bottom_navigation_view.xml と navigation.xml に対応する各要素のIDは同じ名前を設定しなくてはなりません。

実装

下記の設定すれば、下タブの変更に従って、 bottom_navigation_view.xml で定義したFragmentに切り替えてくれます。
これで、 when() を書かなくてよくなりましたね😆

binding.run {
    navigation.setupWithNavController(Navigation.findNavController(this@MainActivity, R.id.nav_fragment))
}

ちなみに

この方法だと、下タブを切り替えるごとにFramentを書き換えてしまうので、インスタンスを保持したい場合は下記の方法を使ってカスタマイズしましょう。

Navigation + BottomNavigationViewでFragmentの状態を残す