BadgeView 介紹

1、定義
一個(gè)可以自由定制外觀、支持拖拽消除的 MaterialDesign 風(fēng)格 Android BadgeView
2、特性
隨意定制外觀，包括 Badge 位置、底色、邊框、陰影、文字顏色(支持透明色)、大小、內(nèi)外邊距等
Badge 數(shù)字小于 0 時(shí)顯示 dot，等于 0 時(shí)隱藏整個(gè) Badge，在普通模式下超過(guò) 99 時(shí)顯示 99+，精確模式下顯示具體值
支持設(shè)置文本內(nèi)容
支持設(shè)置圖片背景
支持類似 QQ 的拖拽消除效果（默認(rèn)關(guān)閉）
支持以動(dòng)畫(huà)的方式隱藏 Badge

44934.jpg

BadgeView 方法說(shuō)明

六、BottomNavigationView + BadgeView 使用詳解

1、依賴包引入

`implementation 'q.rorbin:badgeview:1.1.3'` </pre>

2、獲取 BottomNavigationMenuView

Badge 需要綁定一個(gè) View，所有方法和操作都是以這個(gè) View 為中心的。因?yàn)楸疚闹v的是 BottomNavigationView，所以就以 BottomNavigationView 的 MenuItemView 為中心。

查看源碼可以看到 BottomNavigationMenuView 是 BottomNavigationView 內(nèi)部添加的一個(gè)子 View，也就是說(shuō)他是導(dǎo)航欄中添加的所有 Menu 的一個(gè)父 View，那么獲取 BottomNavigationMenuView 以及子 Menu 就很簡(jiǎn)單了。

    BottomNavigationMenuView itemView = (BottomNavigationMenuView) bottomNav.getChildAt(0);
    // 獲取導(dǎo)航欄Tab數(shù)量
    int childCount = itemView.getChildCount();

3、BadgeView 初始化

Badge 是一個(gè)接口，創(chuàng)建實(shí)現(xiàn)類 QBadgeView 對(duì)象，然后設(shè)置相關(guān)屬性。

     QBadgeView qBadgeView=new QBadgeView(context);

4、BadgeView 基礎(chǔ)用法

BadgeView 設(shè)置綁定 View、數(shù)字、位置

    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、設(shè)置是否為精確模式數(shù)

setExactMode(boolean isExact)方法設(shè)置為 false，當(dāng)消息數(shù)>99,則顯示 99+，若設(shè)置為 true，當(dāng)消息數(shù)>99，則顯示具體的消息數(shù)。

    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)方法設(shè)置為 true 時(shí)表示有陰影效果，為 false 時(shí)取消陰影效果。

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

8、BadgeView 拖拽效果

BadgeView 添加setOnDragStateChangedListener監(jiān)聽(tīng)，即可實(shí)現(xiàn)仿 QQ 拖拽效果，本文在 BottomNavigationView 導(dǎo)航欄 Item 上使用，也可以在 RecyclerView 的 Item 上實(shí)現(xiàn)，使用極其簡(jiǎn)單。

回調(diào)函數(shù)onDragStateChanged其中 dragState 狀態(tài)有五種：

• 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) {
  
      }
  });` </pre>
  

以上只是挑選出來(lái)幾個(gè)比較常用的屬性做詳細(xì)講解，如果對(duì)其他屬性感興趣的可以自己寫(xiě)個(gè)案例嘗試一下。

image

七、BadgeView 使用注意事項(xiàng)

• 請(qǐng)不要在 xml 中創(chuàng)建 Badge
• Badge 和 TargetView 綁定是采用替換 TargetView 的 Parent 方式實(shí)現(xiàn)的，同時(shí)將 Parent 的 Id 和 TargetView 的 Id 設(shè)置成一樣來(lái)保證不會(huì)在 RelativeLayout 中出現(xiàn)位置錯(cuò)亂問(wèn)題，所以在 bindTarget 后再次使用 findViewById(TargetViewId)得到的會(huì)是 Parent 而不是 TargetView，此時(shí)建議使用 Badge.getTargetView 方法來(lái)獲取 TargetView。

源碼下載：****https://github.com/jaynm888/MaterialDesign-master.git****

源碼包含 Material Design 系列控件集合，定時(shí)更新，敬請(qǐng)期待！

此系列是轉(zhuǎn)載別人文章,目的在于方便自己的使用.