簡介:

BottomNavigationView是一種超基本常見的底部導航欄。
舉例來說，我們現在的activity中裝有四個fragment，分別是首頁、預約、會員跟其他，共四種頁面，我們就可以在activity裡面設定BottomNavigationView來切換頁面，並達到當我點選特定頁面時，icon能夠換圖及變色。
不囉嗦開始做了啦。

0. build.gradle

加入我們要的implementation。

implementation 'com.google.android.material:material:1.2.0-alpha06'

1. res->drawable->

sl是selector的簡寫。
新增sl_bar_home、sl_bar_reservation、sl_bar_member、sl_bar_other
設定當state_checked="true"時，要變換icon。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"  android:drawable="@drawable/ic_tab_home"/>
<item android:state_checked="true" android:drawable="@drawable/ic_tab_home_active"/>
</selector>

2. res->menu->

新增一個menu_navigationbar.xml
每個item的icon屬性各自放入上面寫的selector，這樣當item被點選時，系統就會自動幫你換圖了。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
    android:id="@+id/f1"
    android:title="首頁"
        android:icon="@drawable/sl_tab_home"/>
    <item
        android:id="@+id/f2"
        android:title = "預約"
        android:icon="@drawable/sl_tab_reservation"/>
    <item
        android:id="@+id/f3"
        android:title="會員"
        android:icon="@drawable/sl_tab_member"/>
    <item
        android:id="@+id/f4"
        android:title="其他"
        android:icon="@drawable/sl_tab_other"/>
</menu>

3. res->color->

新增一個sl_tab_color，設定當state_checked="true"時，要變換顏色。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="@color/coloraaaaaa"/>
    <item android:state_checked="true" android:color="@color/color64C1BE"/>
</selector>

4. activity_main.xml

外面那層layout的id取名container_activity_main
將itemIconTint跟itemTextColor設為上面的sl，如此一來每個item被點擊的時候字體及icon就會變色。
在這裡也導入了剛剛寫的menu_navigationbar

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nvgationview"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#FFFFFF"
        
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@color/sl_tab_color"
        app:itemTextColor="@color/sl_tab_color"

        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/menu_navigationbar">

    </com.google.android.material.bottomnavigation.BottomNavigationView>

5. MainActivity.kt

class MainActivity : AppCompatActivity() {

    companion object{
        val homeFragment = HomeFragment()
        val reservationFragment = ReservationFragment()
        val memberFragemnt = MemberFragment()
        val otherFragment = OtherFragment()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setFullScreen(this)

        //設定初始時要show哪個fragment
        supportFragmentManager.beginTransaction()
            .replace(R.id.container_activity_main, homeFragment)
            .commit()
        navigationview.selectedItemId = R.id.f1
        navigationview.setOnNavigationItemSelectedListener(listener)

    }


    private var listener = object : BottomNavigationView.OnNavigationItemSelectedListener {
        //設定navigationBar裡的item們的點擊事件 被點擊後採動態載入fragment的方式
        override fun onNavigationItemSelected(item : MenuItem): Boolean {
            when (item.itemId) {
                R.id.f1 -> {
                    val manager = supportFragmentManager
                    val transaction = manager.beginTransaction()
                    transaction.replace(R.id.container_activity_main, homeFragment).commit()
                }
                R.id.f2 -> {
                    val t = supportFragmentManager.beginTransaction()
                    t.replace(R.id.container_activity_main, reservationFragment).commit()
                }
                R.id.f3 -> {
                    val t = supportFragmentManager.beginTransaction()
                    t.replace(R.id.container_activity_main, memberFragemnt).commit()
                }
                R.id.f4 -> {
                    val t = supportFragmentManager.beginTransaction()
                    t.replace(R.id.container_activity_main, otherFragment).commit()
                }
            }
            return true
        }
    }
}