来吧，展示！！！

演示Normal.gif

演示Fg.gif

演示Vp+Fg.gif

快速实现上述效果

在根目录下的 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文件

res/raw包

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

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 = 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()

}

}

布局文件资源_activity_main.xml

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">

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" />

运行显示结果

演示.jpg