Android Studio中如何为底部导航栏的购物车图标实现计数文本增量更新

以下两种实现方案均可以达到你需要的计数增量更新效果，可根据项目实际需求选择：

方案1：使用官方Material BadgeDrawable（最简实现） #

前提是项目已经引入com.google.android.material:material依赖，该方案不需要自定义View，自带增量更新动画，适配绝大多数业务场景。

• 绑定购物车菜单项的角标实例：

// 替换为你菜单文件中购物车项对应的id：R.id.menu_cart
val cartBadge = bottomNavigationView.getOrCreateBadge(R.id.menu_cart)
// 初始配置
cartBadge.isVisible = true
cartBadge.number = 0
cartBadge.maxCharacterCount = 3 // 超过999自动显示为999+

• 增量更新时直接修改number属性即可，系统会自动播放数值变化过渡动画：

// 加购1件的更新逻辑
cartBadge.number = cartBadge.number + 1
// 直接重置为指定数值的逻辑
cartBadge.number = newCount

Java写法参考：

BadgeDrawable cartBadge = bottomNavigationView.getOrCreateBadge(R.id.menu_cart);
cartBadge.setVisible(true);
cartBadge.setNumber(0);
// 增量更新
cartBadge.setNumber(cartBadge.getNumber() + 1);

你也可以自定义角标的背景色、文字大小、偏移量等属性，匹配设计稿要求。

方案2：自定义MenuItem布局（适配特殊样式需求） #

如果官方角标的样式无法满足设计要求，可以自定义购物车项的布局自行实现动画：

• 第一步：创建自定义菜单项布局layout_menu_cart.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv_cart"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_cart"/>
    <TextView
        android:id="@+id/tv_count"
        android:layout_width="wrap_content"
        android:layout_height="18dp"
        android:layout_gravity="top|end"
        android:layout_marginStart="12dp"
        android:background="@drawable/bg_badge_red"
        android:gravity="center"
        android:minWidth="18dp"
        android:paddingHorizontal="4dp"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:visibility="gone"/>
</FrameLayout>

• 第二步：给购物车菜单项绑定自定义布局：

val cartItem = bottomNavigationView.menu.findItem(R.id.menu_cart)
cartItem.setActionView(R.layout.layout_menu_cart)
val countTv = cartItem.actionView.findViewById<TextView>(R.id.tv_count)

• 第三步：封装增量更新的动画方法：

fun updateCartCount(newCount: Int) {
    if (newCount <= 0) {
        countTv.visibility = View.GONE
        return
    }
    countTv.visibility = View.VISIBLE
    val oldCount = countTv.text.toString().toIntOrNull() ?: 0
    if (oldCount == newCount) return
    // 数值平滑过渡动画
    ValueAnimator.ofInt(oldCount, newCount).apply {
        duration = 300 // 可根据需求调整动画时长
        addUpdateListener { anim ->
            val current = anim.animatedValue as Int
            countTv.text = if (current > 99) "99+" else current.toString()
        }
        start()
    }
}

后续需要更新计数时，直接调用updateCartCount(目标数值)即可。

内容的提问来源于stack exchange，提问作者Vamshi Rahul