使用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切换页面的效果。源码地址：https://gitee.com/fjjxxy/navigation-demo.git

简单介绍一下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中的属性： 

1. app:itemTextColor属性可以自定义选择时文字的颜色
2. 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>

1. android:id属性用来指定底部导航子项的id
2. android:icon属性可以用来指定图标，可以使用默认的图标选择表换样式，也可以使用自定义的drawable样式，但是需要在代码中将默认的样式清除，代码如下：bottom_navigation_view.itemIconTintList = null，bottom_navigation_view为BottomNavigationView控件的id
3. 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切换的效果就完成了，还是蛮简单的，大家可以自己试一下，最后，也希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，也欢迎大家订阅我的个人微信公众号，谢谢大家的支持！