Android文字特效

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

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <attr name="text" format="string" />  
5.     <attr name="text_size" format="dimension" />  
6.     <attr name="text_origin_color" format="color|reference" />  
7.     <attr name="text_change_color" format="color|reference" />  
8.     <attr name="progress" format="float" />  
9.     <attr name="direction">  
10.         <enum name="left" value="0" />  
11.         <enum name="right" value="1" />  
12.     </attr>  
13.   
14.     <declare-styleable name="ColorTrackView">  
15.         <attr name="text" />  
16.         <attr name="text_size" />  
17.         <attr name="text_origin_color" />  
18.         <attr name="text_change_color" />  
19.         <attr name="progress" />  
20.         <attr name="direction" />  
21.     </declare-styleable>  
22.   
23. </resources>  

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="text" format="string" />
    <attr name="text_size" format="dimension" />
    <attr name="text_origin_color" format="color|reference" />
    <attr name="text_change_color" format="color|reference" />
    <attr name="progress" format="float" />
    <attr name="direction">
        <enum name="left" value="0" />
        <enum name="right" value="1" />
    </attr>

    <declare-styleable name="ColorTrackView">
        <attr name="text" />
        <attr name="text_size" />
        <attr name="text_origin_color" />
        <attr name="text_change_color" />
        <attr name="progress" />
        <attr name="direction" />
    </declare-styleable>

</resources>

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

[java] view plain copy print ?

1. /** 
2.  *  
3.  * @author zhy 
4.  * 
5.  */  
6. public class ColorTrackView extends View  
7. {  
8.   
9.     private int mTextStartX;  
10.       
11.     public enum Direction  
12.     {  
13.         LEFT , RIGHT ;  
14.     }  
15.   
16.     private int mDirection = DIRECTION_LEFT;   
17.       
18.     private static final int  DIRECTION_LEFT = 0 ;   
19.     private static final int  DIRECTION_RIGHT= 1 ;  
20.       
21.     public void setDirection(int direction)  
22.     {  
23.         mDirection = direction;  
24.     }  
25.       
26.     private String mText = "张鸿洋";  
27.     private Paint mPaint;  
28.     private int mTextSize = sp2px(30);  
29.   
30.     private int mTextOriginColor = 0xff000000;  
31.     private int mTextChangeColor = 0xffff0000;  
32.   
33.     private Rect mTextBound = new