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

本文主要是介绍Android之使用QBadgeView给TabLayout顶部栏设置数量角标，数值可更新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

一、效果

二、TabLayout使用

1、xml文件中

<com.google.android.material.tabs.TabLayoutandroid: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"/>
<solidandroid:color="@color/color_F7F7F7"/>
<sizeandroid:width="50dp"android:height="50dp"/>
<strokeandroid:width="2dp"android:color="@color/color_F7F7F7"/>
</shape>

3、子tab样式

位置：layout/tv_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextViewandroid: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！

这篇关于Android之使用QBadgeView给TabLayout顶部栏设置数量角标，数值可更新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---