转载请标明出处：，本文出自：【张鸿洋的博客】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
<?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的构造方法中进行获取这些个渣渣属性：/** * * @author zhy * */public class ColorTrackView extends View{private int mTextStartX;public enum Direction{LEFT , RIGHT ;}private int mDirection = DIRECTION_LEFT;private static final int DIRECTION_LEFT = 0 ; private static final int DIRECTION_RIGHT= 1 ;public void setDirection(int direction){mDirection = direction;}private String mText = "张鸿洋";private Paint mPaint;private int mTextSize = sp2px(30);private int mTextOriginColor = 0xff000000;private int mTextChangeColor = 0xffff0000;private Rect mTextBound = new Rect();private int mTextWidth;private int mRealWidth;private float mProgress;public ColorTrackView(Context context){super(context, null);}public ColorTrackView(Context context, AttributeSet attrs){super(context, attrs);mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.ColorTrackView);mText = ta.getString(R.styleable.ColorTrackView_text);mTextSize = ta.getDimensionPixelSize(R.styleable.ColorTrackView_text_size, mTextSize);mTextOriginColor = ta.getColor(R.styleable.ColorTrackView_text_origin_color,mTextOriginColor);mTextChangeColor = ta.getColor(R.styleable.ColorTrackView_text_change_color,mTextChangeColor);mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);mDirection = ta.getInt(R.styleable.ColorTrackView_direction, mDirection);ta.recycle();mPaint.setTextSize(mTextSize);measureText();}private void measureText(){mTextWidth = (int) mPaint.measureText(mText);mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);}
可以看到我同时贴出了成员变量，大家简单看下就行了，都比较简单。
获取了属性，初始化完成一些成员变量以后，那么应该走向我们的measure之旅了~~
2、onMeasure@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){int width = measureWidth(widthMeasureSpec);int height = measureHeight(heightMeasureSpec);setMeasuredDimension(width, height);mRealWidth = getMeasuredWidth() – getPaddingLeft() – getPaddingRight();mTextStartX = mRealWidth / 2 – mTextWidth / 2;}private int measureHeight(int measureSpec){int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode){case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:result = mTextBound.height();break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingTop() + getPaddingBottom();}private int measureWidth(int measureSpec){int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode){case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:// result = mTextBound.width();result = mTextWidth;break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingLeft() + getPaddingRight();}关于测量，也是比较传统的写法，根据传入的widthMeasureSpec、heightMeasureSpec，利用MeasureSpec分别获取模式和值，如何是EXACTLY万事大吉，如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间，当然了，最好注意如果是AT_MOST不应该大于父类传入的值。我想，旅行需要孤独，需要一个人慢慢体会，静静思考。
