使用Lottie动画实现底部导航栏

来吧，展示！！！

快速实现上述效果

BottomTabWithLottieNavigation

Lottie动画实现底部导航栏

在根目录下的 build.gradle 中添加

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

在Module中的 build.gradle 中添加

// 引入库_必须引入lottie-android
implementation 'com.airbnb.android:lottie:3.5.0'
implementation 'com.github.WarmYunyang:BottomTabWithLottieNavigation:v1.0.1'

因为是使用lottie-android实现的动效，所以必须引入。

定义TabEntity实现CustomBottomTabEntity该类

CustomBottomTabEntity.kt
interface CustomBottomTabEntity {

    fun getTabTitle(): String?

    // 限定资源文件位置必须为raw包下资源
    @RawRes
    fun getTabIcon(): Int

}

一个简单的TabEntity，只有两个属性，tab名字和tab动画资源_RawRes

TabEntity.kt
data class TabEntity(val title: String, val iconRes: Int) : CustomBottomTabEntity {

    override fun getTabTitle(): String? {
        return title
    }

    override fun getTabIcon(): Int {
        return iconRes
    }

}

在module中res/raw（没有raw，创建一个包），放入Lottie动画资源json文件

在主页面中实现底部导航栏_详细注释文本

class MainActivity : AppCompatActivity(), OnTabSelectListener {

    // tab名字数组
    private val mTitles = arrayOf("视频", "发现", "我的")

    // tabLottieRaw资源数组
    private val mIcons = arrayOf(
        R.raw.video,
        R.raw.discover,
        R.raw.mine
    )

    // 定义TabEntity数组
    private val mTabEntities: ArrayList<CustomBottomTabEntity> = ArrayList()

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

        // BottomTabWithLottieNavigation_Lottie动画底部导航栏组件
        val mainBtwln: BottomTabWithLottieNavigation = findViewById(R.id.main_btwln)

        // TabEntity数组存入tab名字和tabLottie动画资源
        for (i in mTitles.indices) {
            mTabEntities.add(TabEntity(mTitles[i], mIcons[i]))
        }

        // kt_ext
        mainBtwln.configBbwln()
    }

    fun BottomTabWithLottieNavigation.configBbwln() {
        // 组件设置数据
        setTabItems(mTabEntities)
        // 组件设置监听器
        setOnTabSelectListener(this@MainActivity)
    }

    // 选中
    override fun onTabSelect(position: Int) {
        Toast.makeText(this@MainActivity, "onTabSelect  $position", Toast.LENGTH_SHORT).show()
    }

    // 再次选中
    override fun onTabReselect(position: Int) {
        Toast.makeText(this@MainActivity, "onTabReselect  $position", Toast.LENGTH_SHORT).show()
    }

}

BottomTabWithLottieNavigation组件可使用的属性

name	format	description
btwln_textSize	dimension	设置字体大小
btwln_textSelectColor	color	设置字体选中颜色
btwln_textUnselectColor	color	设置字体未选中颜色
btwln_textBold	enum	设置字体加粗
btwln_textAllCaps	boolean	设置字体全大写
btwln_textVisible	boolean	设置Text是否可见
btwln_iconWidth	dimension	设置icon宽度
btwln_iconHeight	dimension	设置icon高度
btwln_iconMargin	dimension	设置icon与文字间距

布局文件资源_activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.yunyang.bottombarwithlottie.view.BottomTabWithLottieNavigation
        android:id="@+id/main_btwln"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:btwln_textSelectColor="@android:color/holo_red_dark"
        app:btwln_textUnselectColor="@android:color/white" />

</androidx.appcompat.widget.LinearLayoutCompat>

运行显示结果