重学 Android 自定义 View 系列(五)：文字变色的应用前言上一篇介绍了文字变色的原理，本篇文章就简单介绍下

前言

上一篇介绍了文字变色的原理，本篇文章就简单介绍下其应用。原理都掌握了，应用还不是手拿把掐😁

最终效果如下：在这里插入图片描述

1. 结构分析

指示器：配合Viewpage显示界面标签，这里的指示器由于要用到我们的 ColorTrackTextView ，所以需要自定义，动态添加。
ViewPage：通过监听界面滚动信息，设置指示器文字变色。

2. 代码实现

指示器为 LinearLayout，动态添加ColorTrackTextView

 val items: List<String> by lazy {
        listOf("首页", "关注", "附近", "我的")
    }

private val mIndicators: ArrayList<ColorTrackTextView> by lazy { ArrayList() }
 
  private fun initIndicator() {
        items.forEachIndexed { index, s ->
            //动态添加颜色跟踪的TextView
            val params = LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
            params.weight = 1f
            val colorTrackTextView = ColorTrackTextView(this)

            //设置颜色
            colorTrackTextView.setChangeColor(Color.RED)
            colorTrackTextView.setOriginColor(Color.BLACK)
            colorTrackTextView.textSize = 20f
            colorTrackTextView.text = s
            colorTrackTextView.layoutParams = params

            // 把新的加入LinearLayout 中
            mBind.indicator.addView(colorTrackTextView)
            //加入集合
            mIndicators.add(colorTrackTextView)
        }

    }

注意，在上一篇ColorTrackTextView源码中，需要加入以下两个方法，设置颜色：

    public void setChangeColor(int changeColor) {
        this.mChangePaint.setColor(changeColor);
    }

    public void setOriginColor(int originColor) {
        this.mOriginPaint.setColor(originColor);
    }

初始化ViewPage，示例使用的是ViewPager2

注意：在 ViewPager2 中，addOnPageChangeListener() 被替换成了 registerOnPageChangeCallback() 方法。原因是 ViewPager2 是基于 RecyclerView 构建的，RecyclerView 提供了更高的灵活性和更强的功能。

    private fun initViewPager() {
        mBind.viewPager.adapter = ViewPagerAdapter(this)

        mBind.viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels)
                // 页面滚动时调用
                // position：当前页面的位置
                // positionOffset：滑动的进度（0到1之间）
                // positionOffsetPixels：滑动的像素
                Log.i("TAG", "position:$position positionOffset:$positionOffset positionOffsetPixels:$positionOffsetPixels")

                val left = mIndicators.getOrNull(position)
                val right = mIndicators.getOrNull(position + 1)
                
                //使用Java代码实现的话，注意防止数组越界哦！
                if (left != null) {
                    left.setDirection(ColorTrackTextView.Direction.RIGHT_TO_LEFT)
                    left.setProgress(1 - positionOffset)
                }

                if (right != null) {
                    right.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT)
                    right.setProgress(positionOffset)
                }


            }
        })
    }

简单介绍下上面回调中的left 和 right 两个 ColorTrackTextView ，顾名思义，一个是当前的Tab标签，一个是下一个标签。由于当前是选中状态默认为改变后的颜色，所以设置颜色方向为从右至左 ColorTrackTextView.Direction.RIGHT_TO_LEFT，与上一篇从右至左演示效果不同，这次是红色由多变少，但原理是相同的只是起始的分割线坐标位置不同而已。而 right则与上一篇从左至右演示效果完全相同。

3. 最后

结束，睡觉！

另外给喜欢记笔记的同学安利一款好用的云笔记软件，对比大部分国内的这个算还不错的，免费好用：wolai