使用Jetpack元件Navigation（二）使用BottomNavigationView實現Tab切換的效果
本文地址：https://blog.csdn.net/qq_40785165/article/details/113522182,轉載需附上此地址
大家好，我是小黑，一個還沒禿頭的程式設計師~~~
永遠都不要放棄自己，勇往直前，直至成功!
上次我們介紹了Navigation的入門使用，文章地址：使用Jetpack元件Navigation（一），Fragment與Fragment/Activity頁面跳轉，知道了Navigation可以使用配置檔案，通過配置action操作的id以及目標進行導航，但是如果我們想要實現多個fragment進行切換的話（類似Tab切換效果）,action的配置就會顯得比較多，為此，我們今天的內容是使用BottomNavigationView配合NavHostFragment實現Tab切換頁面的效果。原始碼地址：
簡單介紹一下BottomNavigationView
BottomNavigationView表示應用程式的標準底部導航欄，底部導航欄使使用者輕鬆單擊即可瀏覽和在檢視之間切換。當應用程式具有3-5個目標時，就可以使用BottomNavigationView
話不多說，正文開始
（一）設計用來切換的Fragment，這裡我們依然用兩個Fragment做例子
ContactFragment.kt以及fragment_contact.xml程式碼如下，佈局很簡單，就一個TextView,Fragment中不需要編寫邏輯
class ContactFragment : BaseFragment() {
override fun initView(rootView: View) {
}
override fun getLayoutId(): Int {
return R.layout.fragment_contact
}
}<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FB7170" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="聯絡人" android:textColor="#000" /> </LinearLayout>
MessageFragment.kt以及fragment_message.xml程式碼如下，佈局依然就一個TextView
class MessageFragment : BaseFragment() {
override fun initView(rootView: View) {
}
override fun getLayoutId(): Int {
return R.layout.fragment_message
}
}<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#FF791B"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="訊息"
android:textColor="#000" />
</LinearLayout>（二）Fragment準備好了，接下來就要準備容易以及底部導航欄了，容器依然使用FragmentContainerView（name屬性使用NavHostFragment），底部導航欄使用BottomNavigationView，activity_bottomview.xml程式碼如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragment_container_view"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_with_bottomview" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#c0c0c0" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
app:itemIconTint="@null"
app:itemTextColor="@color/color_tab_item"
app:menu="@menu/my_navigation_items" />
</LinearLayout>在FragmentContainerView容器中，依然需要一個navigation的配置檔案，nav_with_bottomview.xml程式碼如下：
<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
android:id="@+id/nav_with_bottomview.xml"
app:startDestination="@id/action_contact"
tools:ignore="UnusedNavigation">
<fragment
android:id="@+id/action_contact"
android:name="com.example.navigationdemo.part2.ContactFragment" />
<fragment
android:id="@+id/action_message"
android:name="com.example.navigationdemo.part2.MessageFragment" />
</navigation>注意事項：這裡的id屬性值需要和底部導航配置檔案的item標籤的id屬性一致，否則會報錯，報錯表示底部導航中的item的id不在Navigation配置中
在BottomNavigationView中的屬性：
- app:itemTextColor屬性可以自定義選擇時文字的顏色
- app:menu用來指定配置檔案
文字顏色自定義配置color_tab_item.xml程式碼如下：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FF791B" android:state_checked="true" />
<item android:color="#000" />
</selector>（三）編寫導航欄配置檔案，在res底下新建menu資料夾，新建my_navigation_items.xml檔案，my_navigation_items.xml程式碼如下：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_contact"
android:icon="@drawable/switch_contact_icon"
android:title="聯絡人" />
<item
android:id="@+id/action_message"
android:icon="@drawable/switch_message_icon"
android:title="訊息" />
</menu>
- android:id屬性用來指定底部導航子項的id
- android:icon屬性可以用來指定圖示，可以使用預設的圖示選擇表換樣式，也可以使用自定義的drawable樣式，但是需要在程式碼中將預設的樣式清除，程式碼如下：bottom_navigation_view.itemIconTintList = null，bottom_navigation_view為BottomNavigationView控制元件的id
- android:title屬性指定導航欄的文字
圖示樣式檔案switch_contact_icon.xml程式碼如下：其他幾個圖示的樣式類似
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_contact_select" android:state_checked="true" />
<item android:drawable="@mipmap/icon_contact" android:state_checked="false" />
</selector>資原始檔都在原始碼中，有需要的小夥伴自行獲取，原始碼地址:https://gitee.com/fjjxxy/navigation-demo.git
（四）最後在Activity中將NavHostFragment與BottomNavigationView進行關聯即可,BottomViewActivity.kt程式碼如下：
class BottomViewActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_bottomview)
bottom_navigation_view.itemIconTintList = null
var navHostFragment =
supportFragmentManager.findFragmentById(R.id.fragment_container_view) as NavHostFragment
bottom_navigation_view.setupWithNavController(navHostFragment.navController)
}
}這樣一來，使用BottomNavigationView實現Tab切換的效果就完成了，還是蠻簡單的，大家可以自己試一下，最後，也希望喜歡我文章的朋友們可以幫忙點贊、收藏、評論，也可以關注一下，如果有問題可以在評論區提出，也歡迎大家訂閱我的個人微信公眾號，謝謝大家的支援！
