Android之使用QBadgeView给TabLayout顶部栏设置数量角标，数值可更新

TabLayout搭配ViewPager、Fragement使用可看另一篇文章：
Android中TabLayout+ViewPager+Fragment实现顶部导航栏

本文主要描述给TabLayout的某一栏添加角标，数值可更新：

一、效果

二、TabLayout使用

1、xml文件中

<com.google.android.material.tabs.TabLayout
                                    android:id="@+id/audit_tabLayout"
                                    android:layout_width="match_parent"
                                    android:layout_height="36dp"
                                    android:layout_marginStart="4dp"
                                    android:layout_marginEnd="4dp"
                                    android:layout_marginTop="3dp"
                                    android:layout_marginBottom="3dp"
                                    app:tabBackground="@drawable/audit_tab_button_background"
                                    app:tabRippleColor = "@android:color/transparent"
                                    app:tabIndicatorColor="@color/white"
                                    app:tabIndicatorHeight="36dp"
                                    app:tabTextColor="@color/color_222222"
                                    app:tabSelectedTextColor="@color/color_D32124"
                                    app:tabMode="fixed"
                                    app:tabPadding="3dp"
                                    app:tabIndicator="@color/white"/>

2、标题栏背景（可自定义），圆角灰白色背景

位置：drawable/audit_tab_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="6dp"
    />
<solid
    android:color="@color/color_F7F7F7"/>
<size
    android:width="50dp"
    android:height="50dp"/>
<stroke
    android:width="2dp"
    android:color="@color/color_F7F7F7"/>
</shape>

3、子tab样式

位置：layout/tv_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_tab"
        android:text="sss"
        android:textStyle="bold"
        android:textColor="@color/color_222222"
        android:layout_gravity="bottom"
        android:textSize="@dimen/sp_21"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

3、Activity中初始化控件时候设置TabLayout标题栏具体内容

（1）绑定控件

 @InjectView(id = R.id.audit_tabLayout,click = true)
 private TabLayout mAuditTabLayout;

（2）初始化TabLayout栏,，添加两个子tab

//tab1
TabLayout.Tab tab1 = mAuditTabLayout.newTab().setCustomView(R.layout.tv_tab);
TextView tv_tab1 = tab1.getCustomView().findViewById(R.id.tv_tab);
 tv_tab1.setText("待审核");
 tv_tab1.setTextSize(TypedValue.COMPLEX_UNIT_PX,getResources().getDimension(R.dimen.sp_16));
 tv_tab1.setTextColor(ContextCompat.getColor(this,R.color.color_D32124));
mAuditTabLayout.addTab(tab1);
//调用自定义方法，给tab1添加数量角标
QBadge(this,mAuditTabLayout.getTabAt(0).view,tab1_number);

//tab2
TabLayout.Tab tab2 = mAuditTabLayout.newTab().setCustomView(R.layout.tv_tab);
TextView tv_tab2 = tab2.getCustomView().findViewById(R.id.tv_tab);
tv_tab2.setText(getString(R.string.audit_audited));
tv_tab2.setTextColor(ContextCompat.getColor(this,R.color.color_222222));
tv_tab2.setTextSize(TypedValue.COMPLEX_UNIT_PX,getResources().getDimension(R.dimen.sp_16));
mAuditTabLayout.addTab(tab2);

三、红色角标设置

1、红色角标自定义方法

	private static Badge qBadgeView;

    /**
     * 右上小红点数量提示
     * @param context  当前activity
     * @param view  要显示在那个空间上的View
     * @param i 数量
     */
    public static void QBadge(Context context, View view, int i){
        qBadgeView = new QBadgeView(context)
                .bindTarget(view)
                .setBadgeNumber(i)  //角标数值
                .setBadgeBackgroundColor(ContextCompat.getColor(context,R.color.color_E82326))  //角标背景色
                .setBadgeTextColor(ContextCompat.getColor(context,R.color.white))  //角标数值字体颜色
                .setBadgeTextSize(10f,true)  //角标数值字体大小
                .setBadgeGravity(Gravity.END | Gravity.TOP)  //角标位置（可看源码进行设置）
                .setGravityOffset(40,3,true);  //位置
    }

2、获取TabLayout单个栏的view，并设置右上角角标

//调用自定义方法，给tab1添加数量角标
QBadge(this,mAuditTabLayout.getTabAt(0).view,tab1_number);

3、更新角标数据

根据项目需求可在对应地方随时调用设置数量方法进行角标数值的更新

int number = 10;
qBadgeView.setBadgeNumber(number);

四、完成，nice！