Help us understand the problem. What is going on with this article?

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.xmlnavigation.xml に対応する各要素のIDは同じ名前を設定しなくてはなりません。

実装

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

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

ちなみに

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

Navigation + BottomNavigationViewでFragmentの状態を残す

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away