BadgeView 的使用

BadgeView 介绍

1、定义
一个可以自由定制外观、支持拖拽消除的 MaterialDesign 风格 Android BadgeView
2、特性
随意定制外观，包括 Badge 位置、底色、边框、阴影、文字颜色(支持透明色)、大小、内外边距等
Badge 数字小于 0 时显示 dot，等于 0 时隐藏整个 Badge，在普通模式下超过 99 时显示 99+，精确模式下显示具体值
支持设置文本内容
支持设置图片背景
支持类似 QQ 的拖拽消除效果（默认关闭）
支持以动画的方式隐藏 Badge

44934.jpg

BadgeView 方法说明

方法	介绍
getBadgeNumber	设置 Badge 数字
setBadgeText	设置 Badge 文本
setBadgeTextSize	设置 Badge 文本字体大小
setBadgeTextColor	设置 Badge 文本字体颜色
setBadgeGravity	设置 Badge 在 TargetView 的位置
setExactMode	设置是否显示精确数字模式
setGravityOffset	设置外边距
setBadgePadding	设置内边距
setBadgeBackgroundColor	设置背景颜色
setBadgeBackground	设置背景图片
setShowShadow	设置是否显示阴影效果
stroke	描边
hide	隐藏 Badge
setOnDragStateChangedListener	开启拖拽消除并监听

六、BottomNavigationView + BadgeView 使用详解

1、依赖包引入

`implementation 'q.rorbin:badgeview:1.1.3'`

2、获取 BottomNavigationMenuView

Badge 需要绑定一个 View，所有方法和操作都是以这个 View 为中心的。因为本文讲的是 BottomNavigationView，所以就以 BottomNavigationView 的 MenuItemView 为中心。

查看源码可以看到 BottomNavigationMenuView 是 BottomNavigationView 内部添加的一个子 View，也就是说他是导航栏中添加的所有 Menu 的一个父 View，那么获取 BottomNavigationMenuView 以及子 Menu 就很简单了。

    BottomNavigationMenuView itemView = (BottomNavigationMenuView) bottomNav.getChildAt(0);
    // 获取导航栏Tab数量
    int childCount = itemView.getChildCount();

3、BadgeView 初始化

Badge 是一个接口，创建实现类 QBadgeView 对象，然后设置相关属性。

     QBadgeView qBadgeView=new QBadgeView(context);

4、BadgeView 基础用法

BadgeView 设置绑定 View、数字、位置

    new QBadgeView(getActivity()).bindTarget(itemView.getChildAt(0))
    .setBadgeNumber(6)
    .setBadgeGravity(Gravity.TOP | Gravity.END);

5、修改文本颜色

    new QBadgeView(getActivity()).bindTarget(itemView.getChildAt(1))
    .setBadgeNumber(27)
    .setBadgeGravity(Gravity.TOP | Gravity.END)
    .setBadgeTextColor(Color.YELLOW)
    .setGravityOffset(10, 0, true);

6、设置是否为精确模式数

setExactMode(boolean isExact)方法设置为 false，当消息数>99,则显示 99+，若设置为 true，当消息数>99，则显示具体的消息数。

    new QBadgeView(getActivity()).bindTarget(itemView.getChildAt(2))
    .setBadgeNumber(999)
    .setBadgeGravity(Gravity.TOP | Gravity.END)
    .setExactMode(false);
    // 显示 1000
    new QBadgeView(getActivity()).bindTarget(itemView.getChildAt(3))
    .setBadgeNumber(1000)
    .setBadgeGravity(Gravity.TOP | Gravity.END)
    .setExactMode(true);

image

7、BadgeView 阴影效果

setShowShadow(boolean showShadow)方法设置为 true 时表示有阴影效果，为 false 时取消阴影效果。

    new QBadgeView(getActivity()).bindTarget(itemView.getChildAt(4))
    .setBadgeNumber(9)
    .setBadgeGravity(Gravity.TOP | Gravity.END)
    .setBadgeBackgroundColor(Color.BLUE)
    .setShowShadow(false);

8、BadgeView 拖拽效果

BadgeView 添加setOnDragStateChangedListener监听，即可实现仿 QQ 拖拽效果，本文在 BottomNavigationView 导航栏 Item 上使用，也可以在 RecyclerView 的 Item 上实现，使用极其简单。

回调函数onDragStateChanged其中 dragState 状态有五种：

int STATE_START = 1;
int STATE_DRAGGING = 2;
int STATE_DRAGGING_OUT_OF_RANGE = 3;
int STATE_CANCELED = 4;

int STATE_SUCCEED = 5;

    new QBadgeView(getActivity()).bindTarget(itemView.getChildAt(4))
    .setBadgeNumber(9)
    .setBadgeGravity(Gravity.TOP | Gravity.END)
    .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {
    @Override
    public void onDragStateChanged(int dragState, Badge badge, View targetView) {

    }
});`

以上只是挑选出来几个比较常用的属性做详细讲解，如果对其他属性感兴趣的可以自己写个案例尝试一下。