TabLout+ViewPager+Fragment
手拨屏幕不滚动，标签选中变色，标签右上角红色序号、小红点
正在做一个商城项目的底部标签，遇到了很多难题，经过努力，有了些眉目，将心得写下来，一是巩固、整理知识，二来也能为像我这样的新手提供些许帮助，在学习的道路上少作些难。
本项目采用了TabLout+ViewPager+Fragment的结构。主活动中关联TabLout和ViewPager，为ViewPager安装适配器，适配器中组织各个碎片，碎片中实现商城的各种功能。主界面如下图：
一、手拨屏幕不滚动
只是点击底部标签时，屏幕切换成不同的碎片界面，如“首页”、“分类”等。可在mViewPager代码中,令isCanScroll = false、onTouchEvent()、onInterceptTouchEvent()返回false即可，代码如下：
// 定义一个是否可以滑动的boolean 值
private boolean isCanScroll = false;
...
// 触摸事件
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (isCanScroll) {
return super.onTouchEvent(ev);
} else {
return false;
}
}
...
// 拦截触摸事件
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (isCanScroll) {
return super.onInterceptTouchEvent(ev);
} else {
return false;
}
}
二、标签选中变色
主要在主活动的布局文件中实现。标签内包含图标、文字、指示器。代码如下：
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#FFFFFFFF"
app:tabIndicatorColor="#F44336"
app:tabIndicatorHeight="0dp"
app:tabTextColor="#5A5663"
app:tabSelectedTextColor="#2DA839"
app:tabIconTint="@drawable/color_change"
app:tabMode="fixed" />
1、底部标签若不使用指示器，可将其高度修改为0，即：
app:tabIndicatorHeight="0dp"
2、标签文字变色较简单，修改对应代码即可：选中变绿，未选中为灰
app:tabTextColor="#5A5663"
app:tabSelectedTextColor="#2DA839"
3、“标签图标”选中变色稍微麻烦点。
先将图标的颜色设置为：@drawable/color_change
app:tabIconTint="@drawable/color_change"
再到drawable中创建color_change.xml,其代码如下：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="true"
android:color="@color/green"></item>
<item
android:color="@color/grey"></item>
</selector>
如果缺少item中的颜色，可去res/values/colors.xml中添加。
这样将变色的任务交给了布局文件，避免修改原生的Java代码，降低了复杂度，模块分工也显得清晰了。
三、标签右上角红色序号、小红点
借助第三方代码，在主活动中进行修改。
首先添加依赖，类似功能的第三方代码不止一家，我使用的是itingchunyu。app/buid.gradle中添加：
dependencies {
implementation 'com.itingchunyu.badgeview:badgeview:1.0.5'
...
其次，主活动中添加如下代码：
// 右上角小红圆点
// 先从mTabLayout中提取出图标对应的view，再接受BadgeTextView的“加工”
BadgeTextView badgeTextView = new BadgeTextView(this);
ViewGroup vg = (ViewGroup) mTabLayout.getChildAt(0);
View view = vg.getChildAt(4);
badgeTextView.setTargetView(view);
badgeTextView.setBadgeCount(0) // 数量(0:表示小红点)
.setmDefaultRightPadding(70) // 右依附视图距离
.setmDefaultTopPadding(0); // 上依附视图距离
// 右上角红圆序号
BadgeTextView badgeTextView1 = new BadgeTextView(this);
ViewGroup vg1 = (ViewGroup) mTabLayout.getChildAt(0);
View viewGroup1 = vg1.getChildAt(0);
badgeTextView1.setTargetView(viewGroup1);
badgeTextView1.setBadgeCount(8) // 数量(0:表示小红点)
.setmDefaultRightPadding(32) // 右依附视图距离
.setmDefaultTopPadding(0); // 上依附视图距离
其中ViewGroup vg1 = (ViewGroup) mTabLayout.getChildAt(0)，“抽出”了mTabLayout中的含各个标签的“长条”，View view1 = vg1.getChildAt(0)，则从长条中解析出含图片、文字的“竖牌子”，如图：
红圈（点）距图标的距离可以通过setmDefaultRightPadding()设置，参数为0时，就是个红点。
此方法的问题：1、红圈与图标之间的距离不好控制，如显示8、12时，会出现红圈距图标的距离不好调整的问题。2、利用原生设置，图标和文字之间的距离偏大，若自定义，要修改大量代码，较麻烦。可能TabLayout中有调整此二者距离的设置吧。
总结：
之前看代码多，练手少，好赖做出个东西，实属不易。到处都是不认识，满脑子都是为什么，这就是我当前的状态。但毕竟还是做出了东西，写出了博客，总结、巩固了知识，歪歪斜斜地走出了第一步，相信以后的路会逐渐变得好走起来。被自己感动，为自己加油！
参考：https://blog.csdn.net/weixin_35433920/article/details/117502318