1、概述

本篇博客的产生呢，是因为，群里的哥们暖暖给我发了个效果图，然后问我该如何实现顶部ViewPager指示器的字体变色，该效果图是这样的：

大概是今天头条的app，神奇的地方就在于，切换ViewPager页面的时候，顶部指示器改成了字体颜色的变化，个人觉得还是不错的。

那么核心的地方就是做一个支持字体这样逐渐染色就可以了，我大概想了32s，扫描了一些可能实现的方案，最终定位了一个靠谱的，下面我就带大家开始实现的征程。

实现之前贴一下我们的效果图：

2、效果图

1、简单使用

效果如上图了，关于颜失色的改变我添加了两个方向，一个是左方向，一个是有方向。

单纯的使用，可能觉得没什么意思，下面看结合ViewPager使用的一个例子。

2、结合ViewPager使用

可以看到我们切换页面的时候，上面的指示器的效果，棒棒哒~~~

当然了，学会了原理，你可以扩展，可以做个性的进度条，可以将字体变色改为背景色变色，可以把方向改为上下，太多了，自己去抠脚想把。

3、原理

看完效果图，有木有什么思路~~~花几分钟想想，因为原理很简单~~

我大致想了下，目测绘制半个字估计不行，那么就在绘制范围上下功夫，你可以全部绘制，但是我控制显示的范围，所以上述效果：

其实是绘制了两遍字体，但是呢，分别控制了绘制的显示范围，实现了逐渐变色的效果，那么对于范围的控制，有什么方便的API么，显然是有的

canvas有个clipRect的方法~~~ok，原理分析完毕~~

4、实现

说到实现，那第一步肯定又是自定义属性，我们这里的属性，需要text,textSize,textOriginColor,textChangeColor,progress，大致看一下，应该都能看出来作用吧，看不出来没事，结合下面的代码。tip:我们的View叫做ColorTrackView，感谢小七的命名。

1、自定义属性和获取

attr.xml

然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性：