概述

一个可以自由定制外观、支持拖拽消除的 MaterialDesign 风格 Android BadgeView

GitHub

https://github.com/qstumn/BadgeView

特性

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

使用

  1. App模块 build.gradle

    1
    compile 'q.rorbin:badgeview:1.1.3'
  2. 代码

    1
    new QBadgeView(context).bindTarget(textview).setBadgeNumber(5);
  3. 方法

    code 说明
    setBadgeNumber 设置 Badge 数字
    setBadgeText 设置 Badge 文本
    setBadgeTextSize 设置文本字体大小
    setBadgeTextColor 设置文本颜色
    setExactMode 设置是否显示精确模式数值
    setBadgeGravity 设置 Badge 相对于 TargetView 的位置
    setGravityOffset 设置外边距
    setBadgePadding 设置内边距
    setBadgeBackgroundColor 设置背景色
    setBadgeBackground 设置背景图片
    setShowShadow 设置是否显示阴影
    setOnDragStateChangedListener 打开拖拽消除模式并设置监听
    stroke 描边
    hide 隐藏 Badge

示例

RecycleView 中菜单添加角标

  1. menu_item.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="10dp">
    <android.support.v7.widget.AppCompatImageView
    android:id="@+id/menu_image"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:scaleType="fitCenter"/>
    <TextView
    android:id="@+id/menu_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="5dp"
    android:textSize="14sp"/>
    </LinearLayout>
  2. MenuAdapter.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
    NavTreeDto menu = mMenuList.get(position);
    holder.menuName.setText(menu.getText());

    holder.menuImage.setImageResource(menu.getImageId());

    //用户未读公告信息数量
    noticeqBadgeView = (QBadgeView) new QBadgeView(mContext).bindTarget(holder.menuImage).setGravityOffset(20,0,true);
    noticeqBadgeView.setVisibility(View.GONE);


    //创建子线程定时更新角标
    updateNoticeBadgeNumber();
    }

    //子线程更新角标部分代码
    noticeqBadgeView.setVisibility(View.VISIBLE);
    noticeqBadgeView.setBadgeNumber(number);