android MD风格组件(BottomNavigationView,配合lottie使用[三]

基本使用
设置小红点及其位置
- 小坑:
BottomNavigationView 配合lottie实现联动效果
官方的效果

android material design 风格组件(MaterialButton,MaterialButtonToggleGroup,Chip,ChipGroup)大汇总(一).
android MD风格组件(TextInputLayout AutoCompleteTextView MaterialButton SwitchMaterial MaterialRadio)(二)

先来看今天完成的效果!

小红点	小红点位置以及样式	lottie

基本使用

 <com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottomNavigationView"style="@style/Widget.MaterialComponents.BottomNavigationView"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/cccccc"android:theme="@style/bottomButtonNavigationStyle"app:itemRippleColor="@color/red"app:layout_constraintBottom_toBottomOf="parent"app:menu="@menu/button_navigation_menu" />

@style/bottomButtonNavigationStyle:

    <style name="bottomButtonNavigationStyle" parent="Theme.MaterialComponents.Light"><!--        是选中颜色--><item name="colorPrimary">@color/purple_500</item><!--        未选中颜色 --><item name="android:textColorSecondary">@color/cccccc</item></style>

@menu/button_navigation_menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><!--    tips: BottomNavigationView 最多设置5个tab--><itemandroid:id="@+id/itemPage1"android:icon="@drawable/ic_home_24"android:title="page1" /><itemandroid:id="@+id/itemPage2"android:icon="@drawable/ic_phone_android_24"android:title="page2" /><itemandroid:id="@+id/itemPage3"android:icon="@drawable/ic_psychology_24"android:title="page3" />
</menu>

参数介绍:

参数	说明
android:theme	常用来设置选中按钮颜色
app:itemRippleColor	水波纹颜色 [app:itemRippleColor="@null" 去除水波纹!]
app:itemIconTint	icon色调
app:menu	设置tab
app:itemIconSize	按钮大小
app:labelVisibilityMode	按钮模式

app:labelVisibilityMode模式4种模式对比:

模式	说明	效果图
auto	item 少于等于 3 个时，标题处于显示状态；大于等于 4 个，选中才显示标题
selected	选中才显示标题
labeled	一直显示
unlabeled	只显示icon

style参数:

style参数	说明
Widget.MaterialComponents.BottomNavigationView	默认
Widget.MaterialComponents.BottomNavigationView.Colored	彩色(看着很丑…)
Widget.MaterialComponents.BottomNavigationView.PrimarySurface	支持深色主题

官方文档

tips: BottomNavigationView 最多设置5个tab,否则会提示

"Maximum number of items supported by "+ viewClassName+ " is "+ maxItemCount+ ". Limit can be checked with "+ viewClassName+ "#getMaxItemCount()

源码分析,两张图直接搞明白:
图一:

图二:

设置小红点及其位置

设置小红点需要通过BottomNavigationView#BadgeDrawable来设置

private val badgeGravityValues = intArrayOf(BadgeDrawable.TOP_END, // 右上BadgeDrawable.TOP_START, // 左上BadgeDrawable.BOTTOM_END, // 右下BadgeDrawable.BOTTOM_START // 左下)// 设置小红点binding.bottomNavigationView.apply {val itemId = menu.getItem(index).itemIdgetOrCreateBadge(itemId).apply {isVisible = truenumber += 1// 设置位置badgeGravity = badgeGravityValues[indexOfChild]}}

辅助图:

来看看效果:

小坑:

长按事件的时候,回弹出提示框,例如这样

你可以通过拦截长按事件来捕获它

binding.bottomNavigationView.menu.forEach {binding.bottomNavigationView.findViewById<View>(it.itemId).setOnLongClickListener { true }}

BottomNavigationView 配合lottie实现联动效果

Lottie官方使用文档

implementation com.airbnb.android:lottie:3.6.0"

lottie 类型:

LottieAnimationView 扩展 ImageView 并且是加载 Lottie 动画的默认和最简单的方法。
LottieDrawable 与 LottieAnimationView 有大部分相同的 API，但你可以在任何你想要的视图上使用它。
LottieComposition是动画的无状态模型表示。只要您需要，此文件就可以安全地缓存，并且可以在绘图/视图之间自由重用。
LottieCompositionFactory 允许您从多个输入创建 LottieComposition。这就是setAnimation(…)API 在后台使用LottieDrawable和LottieAnimationView使用的内容。工厂方法也与这些类共享相同的缓存。

这里结合主要用到了LottieDrawable

来看完整代码思路:


class NavigationBottomViewModel : ViewModel() {// 注意 最多能放5个！！(源码规定)private val pairAnimationList = listOf("tissue.json" to "首页","chemical.json" to "通讯录","cow.json" to "朋友圈","astronaout.json" to "我的",)private var mCurrentPosition = 0fun initBottomNavigationView(bottomNav: BottomNavigationView) {bottomNav.menu.apply {for (i in pairAnimationList.indices) {// 添加titleadd(Menu.NONE, i, Menu.NONE, pairAnimationList[i].second)// 设置lottiesetLottieDrawable(pairAnimationList, bottomNav, i)}}// 初始化点击监听initClickEvent(bottomNav)}private fun initClickEvent(bottomNav: BottomNavigationView) {// 监听选中事件bottomNav.setOnItemSelectedListener(getOnNavigationItemSelectedListener(bottomNav))bottomNav.setOnItemReselectedListener {getOnNavigationItemReselectedListener(bottomNav)}// 默认选中第一个bottomNav.selectedItemId = 0// 禁止长按弹出 拦截长按事件bottomNav.menu.forEach {val menuItemView = bottomNav.findViewById<BottomNavigationItemView>(it.itemId)menuItemView.setOnLongClickListener {true}}}// 监听变化// Listener for handling selection events on bottom navigation items.// 事件监听器来处理选择底部导航项。private fun getOnNavigationItemSelectedListener(lottieBottomNavView: BottomNavigationView) =NavigationBarView.OnItemSelectedListener { item ->handleNavigationItem(item, lottieBottomNavView)true}// Listener for handling reselection events on bottom navigation items// 用于处理底部导航项上的重新选择事件的侦听器private fun getOnNavigationItemReselectedListener(lottieBottomNavView: BottomNavigationView) =NavigationBarView.OnItemReselectedListener { item ->handleNavigationItem(item, lottieBottomNavView)}/** 作者:android 超级兵* 创建时间: 1/24/22 7:46 PM* TODO 将lottie转变为drawable 设置给menu*/private fun Menu.setLottieDrawable(lottieAnimationList: List<Pair<String, String>>,bottomNav: BottomNavigationView,position: Int) {// 转变为lottieDrawablefindItem(position).icon =replaceLottieDrawable(lottieAnimationList[position].first, bottomNav)}/** 作者:android 超级兵* 创建时间: 1/26/22 1:50 PM* TODO 选中监听*/private fun handleNavigationItem(item: MenuItem, bottomNav: BottomNavigationView) {handlePlayLottieAnimation(item, bottomNav)mCurrentPosition = item.itemId}private fun handlePlayLottieAnimation(item: MenuItem, bottomNav: BottomNavigationView) {val currentIcon = item.icon as? LottieDrawablecurrentIcon?.apply {// 开启动画playAnimation()// 无限播放
//            loop(true)}// 处理 tab 切换，icon 对应调整if (item.itemId != mCurrentPosition) {bottomNav.menu.findItem(mCurrentPosition).icon =replaceLottieDrawable(pairAnimationList[mCurrentPosition].first,bottomNav)}}/*** 替换成 LottieDrawable*/private fun replaceLottieDrawable(jsonKey: String,bottomNavigationView: BottomNavigationView): LottieDrawable {return LottieDrawable().apply {val result = LottieCompositionFactory.fromAssetSync(// 加载lottie 数据bottomNavigationView.context.applicationContext, jsonKey)callback = bottomNavigationView// 设置动画composition = result.value}}
}

使用:

private val viewModel: NavigationBottomViewModel by viewModels()// 初始化lottie 与 bottomNavView 结合起来
viewModel.initBottomNavigationView(binding.lottieBottomNavView)

lottie图片出处,购买其他lottie图片要掏美子,有点贵,所以就选了几张免费的图来用用…

思路参考自

官方的效果

先来看看官方实现的效果:

这种效果我是看material design源码看到的,因为涉及到很多的代码,这里自分析完成思路,具体细节请下载完整代码查看

先来看一眼布局:

具体细节:

思路分析:
官方感觉像是自定义svg图,来实现这个效果的,说实话,要给我我是弄不出来… 但是感觉这种代码像是自动生成的.

android MD风格组件(BottomNavigationView,配合lottie使用) (三)相关推荐

Android MD风格颜色汇总
Android MD风格颜色汇总标签(空格分隔): Android MD 网上逛发现了不错的颜色代码,留个备份. 原文: http://www.aichengxu.com/view/46260 &l ...
android md风格Switch,带有图标动画和颜色转换的Switch – material...
Material Animated Switch 一个MD风格的Switch,带有图标动画和颜色转换. 如何使用默认情况下显示收件箱锁定开关 android:id="@+id/pin&qu ...
Android Notes｜BottomNavigationView 爱上 Lottie
鸡老大说:大丈夫岂能久居人下. 前言好容易解决个问题,感觉记录一波. 当日事当日毕,践行鸡老大,点滴积累,万一某天优秀了呢? 以前大部分项目底部导航栏关于图片部分的实现,要么两套图 selector ...
android的应用组件,跟我学android-Android应用基本组件介绍（五）
Activity activity 是最基本的模块,我们成为活动,一个activity通常就是一个单独的屏幕,每一个活动都被实现为一个独立的类,且都继承活动的基类.在activity的实现类里显示用户 ...
android实现箭头流程列表_反思|Android 列表分页组件Paging的设计与实现：系统概述...
作者:却把清梅嗅链接:https://github.com/qingmei2/blogs/issues/30 前言本文将对Paging分页组件的设计和实现进行一个系统整体的概述,强烈建议读者将本 ...
android 使用4大组件的源码,Android Jetpack架构组件之 Paging（使用、源码篇）
1.前言最近简单看了下google推出的框架Jetpack,感觉此框架的内容可以对平时的开发有很大的帮助,也可以解决很多开发中的问题,对代码的逻辑和UI界面实现深层解耦,打造数据驱动型UI界面. A ...
MD 风格的 Dialog ---- MaterialDialog
一个 MD 风格的 Dialog 的开源项目,GitHub 地址:https://github.com/afollestad/material-dialogs 定义: MaterialDialog:一 ...
开启Fluter基础之旅二-------Future再论、常用组件、Material Design风格组件学习
Future再论: 这里在继续往下学习之前,先来看一下Dart语言关于Event-Queue和Microtask Queue需要注意的一个小点,这个在之前https://www.cnblogs.com ...
开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
Android 之四大组件、六大布局、五大存储
Android 之四大组件.六大布局.五大存储:https://blog.csdn.net/shenggaofei/article/details/52450668 Android 四大组件.五大存储 ...

android MD风格组件(BottomNavigationView,配合lottie使用) (三)