Android自定义View系列（4），自定义一个TabLayo

先看效果：

自定义Tablayout[1].gif

功能分三个步骤：

（1）自定义一个TextView，实现文本左右两半显示不同颜色，且可调节两半百分比

（2）自定义一个Layout，装载多个步骤（1）中所实现的自定义TextView，文本间颜色实现联动

（3）监听ViewPager滑动翻页百分比，实现TabLayout的item字体颜色随百分比变化

一、自定义一个TextView，实现文本左右两半显示不同颜色，且可调节两半百分比

一个TextView文本左右两边显示不同颜色效果图如下：

mTextView.jpg
此控件的实现和[第一节自定义TextView](Android自定义View系列（1）-绘制文字实现一个简单的TextView（自定义View基础） - 简书 (jianshu.com)
)过程大体相同，都是自主绘制文字。区别在于使用了画布的canvas.clipRect()方法，该方法可实现只显示被裁剪的区域。自定义文本显示不同颜色的TextView完整代码：（MyTabLayout/ColorTrackTextView.java at master · EthanLee-88/MyTabLayout (github.com)
）

二、自定义TabLayout,实现完整的标题栏

效果如下：

tabLayout.jpg
此处添加三个步骤一中自定义的TextView形成一个完整的标题栏。
该布局实现简单，只是重写了Linearlayout,使用addView(colorTrackTextView)方法水平添加三个自定义TextView。完整代码：（MyTabLayout/MyTabLayout.java at master · EthanLee-88/MyTabLayout (github.com)
）

三、对ViewPager滑动进行监听，获取页面滑动百分比，实现item颜色变化联动显示

ViewPager页面滑动百分比代码如下：

mainPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // 1页面滑动监听
                    if (position > colorText.size() - 1) return;
                    if (position + 1 < colorText.size()){
                        colorText.get(position).changeRightColor(1 - positionOffset);
                        colorText.get(position + 1).changeLeftColor(positionOffset);
                    }
            }
            @Override
            public void onPageSelected(int position) {

            }
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

注释1处就是滑动监听的回调方法，其中参数positionOffset是一个偏移量，是一个百分数。获得该参数即可设置item颜色区域百分比。
Demo完整代码：（EthanLee-88/MyTabLayout: 自定义TabLayout，item颜色随滑动百分比变化 (github.com)
）