bubble-navigation底部导航栏实现

        文章主要是介绍使用bubble-navigation，实现底部导航栏选中对应选项时，展示图标和文字；未选中的，则只是展示图标。bubble-navigation在github上的地址：https://github.com/gauravk95/bubble-navigation

        官方介绍主要介绍了4中动画效果，本文主要介绍BottomBarActivity的效果实现。

1、 build.gradle中引入

dependencies {
    implementation 'com.gauravk.bubblenavigation:bubblenavigation:1.0.7'
}

2、 创建activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainActivity">

    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:background="@color/white">

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/main_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="true"
            app:bt_badgeTextColor="#6236FF"
            app:bt_duration="150"
            app:bt_colorActive="#6236FF"
            app:bt_colorInactive="@color/blue"
            app:bt_icon="@mipmap/main_home"
            app:bt_shape="@drawable/shape_purple_18"
            app:bt_title="home"
            app:bt_titleSize="12sp"
            app:bt_titlePadding="4dp"
            android:paddingStart="17dp"
            android:paddingEnd="17dp"/>

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/main_record"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="false"
            app:bt_badgeTextColor="#6236FF"
            app:bt_duration="150"
            app:bt_colorActive="#6236FF"
            app:bt_colorInactive="@color/blue"
            app:bt_icon="@mipmap/main_record"
            app:bt_shape="@drawable/shape_purple_18"
            app:bt_title="record"
            app:layout_constraintHorizontal_weight="1"
            app:bt_titleSize="12sp"
            app:bt_titlePadding="4dp"/>

        <com.gauravk.bubblenavigation.BubbleToggleView
            android:id="@+id/main_mine"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:bt_active="false"
            app:bt_badgeTextColor="#6236FF"
            app:bt_duration="150"
            app:bt_colorActive="#6236FF"
            app:bt_colorInactive="@color/blue"
            app:bt_icon="@mipmap/main_mine"
            app:bt_shape="@drawable/shape_purple_18"
            app:bt_title="profile"
            app:bt_titleSize="12sp"
            app:bt_titlePadding="4dp"/>

    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toTopOf="@id/navigation"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

        bt_shape的样式请根据需要自行定义，创建完的效果如下图所示：

3、修改MainActivity:

    private fun initViewPager() {
        pagerAdapter = MainFragmentAdapter(this)
        binding.viewPager.adapter = pagerAdapter
        // 设置ViewPager2的缓存数量
        binding.viewPager.offscreenPageLimit = 3
        binding.viewPager.isUserInputEnabled = false
        // 注册ViewPager的页面切换回调
        binding.viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                binding.navigation.setCurrentActiveItem(position)
            }
        })
        // 设置底部导航栏的点击监听器
        binding.navigation.setNavigationChangeListener { _, position  ->
            // 切换ViewPager2到指定页面
            binding.viewPager.setCurrentItem(position, false)
        }
    }

4、最后修改MainFragmentAdapter:

    override fun getItemCount() = 3

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> MainFragment()
            1 -> RecordFragment()
            else -> MineFragment()
        }
    }

        在运行测试中发现BUG：快速点击切换底部导航按钮会出现，选中时只有图标而没有显示出相对应的标题。造成BUG的原因是，bt_duration默认的切换动画持续时间太长。

        解决方法：只要在布局文件中修改bt_duration，设置一个合适的时间即可（本文步骤1中，设定的持续时间为150）。

以下是BubbleToggleView一些属性：

bt_active	设置为活动状态
bt _ colorActivity	处于活动状态时，将此颜色用于图标和标题
bt_colorInctive	处于非活动状态时，将此颜色用于图标和标题
bt _icon	设置图标
bt_iconWidth	设置图标宽度
bt _iconHight	设置图标高度
bt_title	设置标题文本
bt_titleSize	设置sp中的倾斜文本大小
bt_shape	设置可绘制的背景。使用transitiondrawinable切换时获得淡入淡出效果
bt _ showShapeAlways	如果为真，并使用正常绘制，背景形状始终可见
bt_shapeColor	更改形状的色调。当使用TransitionDrawable或showShapeAlways时，不适用始终为真
bt _duration	设置切换动画以毫秒为单位完成的持续时间
bt_padding	设置dp中的内部填充
bt _titlePadding	在dp中设置标题填充
bt_badgeText	设置徽章的文本
bt_badgeTextSize	设置徽章文本的字体大小
bt_badgeTextColor	设置徽章的文本颜色
bt_badgeBackgroundColor	设置徽章的背景颜色