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

来吧，展示！！！

演示Normal.gif

演示Fg.gif

演示Vp+Fg.gif

快速实现上述效果

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文件

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

运行显示结果

演示.jpg