个人笔记：Kotlin创建一个简单底部导航栏（配合fragment使用）

使用android自带的MaterialButtonToggleGroup组件来制作底部导航栏，在Group中嵌套多个Button，将内部button的宽度设为0，权重设为一，就能使按钮分散对齐，需要注意的是，Group中最多只支持5个按钮，超过就会报错，xml中具体代码如下

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/tab_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#08000000"
        app:selectionRequired="true">
        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="首页"
            android:textColor="@color/white"
            app:icon="@mipmap/main_home"
            app:iconGravity="textTop"
            app:iconTint="@color/white"/>
        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="新闻"
            android:textColor="@color/white"
            app:icon="@mipmap/main_home"
            app:iconGravity="textTop"
            app:iconTint="@color/white"/>
        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="服务"
            android:textColor="@color/white"
            app:icon="@mipmap/main_home"
            app:iconGravity="textTop"
            app:iconTint="@color/white"/>
        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="动态"
            android:textColor="@color/white"
            app:icon="@mipmap/main_home"
            app:iconGravity="textTop"
            app:iconTint="@color/white"/>
        <com.google.android.material.button.MaterialButton
            android:id="@+id/tab_5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="用户中心"
            android:textColor="@color/white"
            app:icon="@mipmap/main_home"
            app:iconGravity="textTop"
            app:iconTint="@color/white"/>
    </com.google.android.material.button.MaterialButtonToggleGroup>

 搭配fragment使用的话就需要创建相应个数的fragment与之对应，在activity中将fragement导入，也把高度设置为0，权重为1，和底部导航栏自动分割activity的页面

<FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

做到这一步后xml中的布局算是完成了，效果如下。

 然后再编写activity中的代码

在Oncreate中编写让按钮改变颜色的代码

tab_group.addOnButtonCheckedListener { group, checkedId, isChecked ->
            //拿到制作了按钮的数量
            val childCount  = group.childCount
            //index用于后面对fragment操作
            var index = 0
            for (i in 0 until childCount){
                val childAt = group.getChildAt(i) as MaterialButton
                //让被选中的按钮改变颜色
                if (childAt.id == checkedId){
                    index = i
                    childAt.setTextColor(Color.GREEN)
                    childAt.iconTint = ColorStateList.valueOf(Color.GREEN)
                }else{
                    childAt.setTextColor(Color.WHITE)
                    childAt.iconTint = ColorStateList.valueOf(Color.WHITE)
                }
            }
            switchFragement(index)
        }
        //使其默认指向第一个按钮
     tab_group.check(R.id.tab_1)

然后编写一个switchFragement方法与按钮绑定

    //定义fragment
    private var homeFragment:HomeFragment?=null
    private var fabuFragment: FabuFragment?=null
    private var fuwuFragment: FuwuFragment?=null
    private var newsFragment: NewsFragment?=null
    private var userFragment: UserFragment?=null
    //用于避免fragment重合到一起
    private var ShowFragment: Fragment?=null
    //将按钮与fragment绑定
    private fun switchFragement(index: Int) {
        //让返回值变为fragment
        val fragment = when(index){
            0->{
                if (homeFragment == null){
                    homeFragment = HomeFragment()
                }
            homeFragment
            }
            1 ->{
                if (newsFragment == null){
                    newsFragment = NewsFragment()
                }
                newsFragment
            }
            2->{
                if (fuwuFragment == null){
                    fuwuFragment = FuwuFragment()
                }
                fuwuFragment
            }
            3->{
                if (fabuFragment == null){
                    fabuFragment = FabuFragment()
                }
                fabuFragment
            }
            4->{
                if (userFragment == null){
                    userFragment = UserFragment()
                }
                userFragment
            }
            else -> {
                return
            }
        }?:return
        //开启fragment事务管理
        val ft = supportFragmentManager.beginTransaction()
        //判断返回的fragment中是否被绑定
        if (!fragment.isAdded){
            ft.add(R.id.container,fragment)
        }
        //显示被选中的fragment
        ft.show(fragment)
        //避免所有fragment重合
        if (ShowFragment!=null){
            ft.hide(ShowFragment!!)
        }
        ShowFragment = fragment
        //提交事务
        ft.commitAllowingStateLoss()


    }

到这一步，一个能够跳转的底部导航栏就做好了，本文参考了mooc的讲解内容，视频讲解较为详细，感兴趣的同学可以看一下。【全网稀缺】2021Android从零入门到实战(Kotlin最新版)_哔哩哔哩_bilibili