使用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組件可使用的屬性

布局檔案資源_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>

運行顯示結果