自定义TextView，实现文字变色

今天有点时间，跟着大牛们学习了下自定义textview，实现文字变色，效果如下：

device-2017-06-25-161933.gif

上面效果实现的大致的思路为：

1：写一个类，继承自textview，这里继承自view也可以，不过继承自textview的话，只需要重写onDraw()方法就可以了，同时可以使用textview的getText()等方法，代码逻辑上就要少些处理；
2：根据需要自定义一些属性，并初始这些属性；
3：初始化画笔，这里需要初始化两个画笔，一个是变色的画笔，另一个是不变色的画笔，并设置好相应的属性；
4：重写onDraw()方法，进行绘制

继承textview时实现的那三个构造方法什么时候调用在上篇播客中说了，这里就不说了，直接对画笔进行初始化；

    private Paint getPaintByColor(int color) {
        Paint paint = new Paint();
        //设置颜色
        paint.setColor(color);
        //设置抗锯齿
        paint.setAntiAlias(true);
        //设置防抖动
        paint.setDither(true);
        //设置字体大小
        paint.setTextSize(getTextSize());
        return paint;
    }

根据传入的颜色返回一个Paint对象；接下来就是在onDraw()方法中进行绘制；

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas); 

        //根据进度计算中间值
        int middle = (int) (mCurrentProgres * getWidth());
        //从左到右绘制
        if(mDirection==Direction.LEFT_TO_RIGHT){
            //右边是红色左边是黑色
            drawText(canvas, changePaint, 0, middle);
            drawText(canvas, originPaint, middle, getWidth());
        }else{
            drawText(canvas, changePaint, getWidth()-middle, getWidth());
            drawText(canvas, originPaint, 0, getWidth()-middle);
        }
    }

在这里要将super.onDraw(canvas);注释掉，自己去实现绘制，如果没有注释掉就会调用TextView的onDraw方法将文字绘制出来；首先需要计算出文字的中间值，根据计算出来的中间值可以确定变色的绘制的end位置和不变色绘制的start开始位置，因为实现的是从左到右或者从右到左的变色，所有要定义两个方式并初始化值；

    //实现不同朝向变色
    private Direction mDirection=Direction.LEFT_TO_RIGHT;
    public enum Direction{
        LEFT_TO_RIGHT,RIGHT_TO_LEFT;
    }

在绘制的时候其实还是对Paint和Canvas的使用；调用Canvas的

//保存画布
canvas.save();

方法保存画布，接着调用Canvas的

 Rect rt = new Rect(start, 0, end, getHeight());
 canvas.clipRect(rt);

方法进行变色和不变色区域的裁剪，跟着就使用Paint画笔进行绘制了；

String text = getText().toString();
 //获取字体的宽度
Rect rect = new Rect();
paint.getTextBounds(text, 0, text.length(), rect);
int x = getWidth() / 2 - rect.width() / 2;
//基线
Paint.FontMetricsInt metricsInt = paint.getFontMetricsInt();
int dy = (metricsInt.bottom - metricsInt.top) / 2 - metricsInt.bottom;
int baseLine = getHeight() / 2 + dy;
canvas.drawText(text, x, baseLine, paint);

绘制完后要记得重置画布，

//释放画布
canvas.restore();

这样就绘制完成了，在调用的地方设置相应的一些动画效果就可以了，

    /**
     * 设置属性动画
     * @param direction
     */
    private void setAnimator(ColorTextView.Direction direction){
        colorText.setDirection(direction);
        ValueAnimator animator = ObjectAnimator.ofFloat(0, 1);
        animator.setDuration(2000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                colorText.setCurrentProgress(animatedValue);
            }
        });
        animator.start();
    }

源码地址：http://pan.baidu.com/s/1jIHYyvs