TabLayout+ViewPager+Fragment 手拨屏幕不滚动，标签选中变色，标签右上角红色序号、小红点

TabLayout+ViewPager+Fragment

手拨屏幕不滚动，标签选中变色，标签右上角红色序号、小红点

正在做一个商城项目的底部标签，遇到了很多难题，经过努力，有了些眉目，将心得写下来，一是巩固、整理知识，二来也能为像我这样的新手提供些许帮助，在学习的道路上少作些难。
本项目采用了TabLayout+ViewPager+Fragment的结构。主活动中关联TabLayout和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()设置。

此方法的问题：1、红圈与图标之间的距离不好控制，如显示8、12时，会出现红圈距图标的距离不好调整的问题。2、利用原生设置，图标和文字之间的距离偏大，若自定义，要修改大量代码，较麻烦。可能TabLayout中有调整此二者距离的设置吧。

总结：
之前看代码多，练手少，好赖做出个东西，实属不易。到处都是不认识，满脑子都是为什么，这就是我当前的状态。但毕竟还是做出了东西，写出了博客，总结、巩固了知识，歪歪斜斜地走出了第一步，相信以后的路会逐渐变得好走起来。被自己感动，为自己加油！
参考：https://blog.csdn.net/weixin_35433920/article/details/117502318