来吧，展示！！！
演示Normal.gif
演示Fg.gif
演示Vp+Fg.gif
快速实现上述效果
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文件
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<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()
}
}
布局文件资源_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>
运行显示结果
演示.jpg
