來吧，展示Ｋ卤埂Ｕ畛浴！
演示Normal.gif
演示Fg.gif
演示Vp+Fg.gif
快速實現(xiàn)上述效果
Lottie動畫實現(xiàn)底部導航欄
在根目錄下的 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實現(xiàn)的動效西雀，所以必須引入萨驶。
定義TabEntity實現(xiàn)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腔呜，創(chuàng)建一個包）叁温，放入Lottie動畫資源json文件
res/raw包
在主頁面中實現(xiàn)底部導航欄_詳細注釋文本
class MainActivity : AppCompatActivity(), OnTabSelectListener {
// tab名字數(shù)組
private val mTitles = arrayOf("視頻", "發(fā)現(xiàn)", "我的")
// tabLottieRaw資源數(shù)組
private val mIcons = arrayOf(
R.raw.video,
R.raw.discover,
R.raw.mine
)
// 定義TabEntity數(shù)組
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數(shù)組存入tab名字和tabLottie動畫資源
for (i in mTitles.indices) {
mTabEntities.add(TabEntity(mTitles[i], mIcons[i]))
}
// kt_ext
mainBtwln.configBbwln()
}
fun BottomTabWithLottieNavigation.configBbwln() {
// 組件設置數(shù)據(jù)
setTabItems(mTabEntities)
// 組件設置監(jiān)聽器
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
