自定义view（三）----自定义字体变色

上一篇文章我们使用属性动画实现了自定义view的动画效果，这篇文章主要是结合属性动画自定义一个文字变色的view。先来看效果图。

1645064533118.gif

这篇文章我就直接先贴代码了，里面都有注释，后面分析属性动画时会再来对本文章进行补充。
自定义属性：
attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ColorTrackTextView">
        <attr name="originColor" format="color"/>
        <attr name="changeColor" format="color"/>
    </declare-styleable>
</resources>

自定义view
ColorTrackTextView.java

public class ColorTrackTextView extends androidx.appcompat.widget.AppCompatTextView {
    //变色的画笔
    private Paint mOriginPaint;
    //不变色的画笔
    private Paint mChangePaint;
    private float mCurrentProcess = 0.0f;

    //朝向
    private Direction direction=Direction.LEFT_TO_RIGHT;
    public enum Direction{
        LEFT_TO_RIGHT,RIGHT_TO_Left
    }

    public ColorTrackTextView(Context context) {
        this(context, null);
    }

    public ColorTrackTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorTrackTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(context, attrs);
    }

    private void initPaint(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);
        int originColor = array.getColor(R.styleable.ColorTrackTextView_originColor, getTextColors().getDefaultColor());
        int changeColor = array.getColor(R.styleable.ColorTrackTextView_changeColor, getTextColors().getDefaultColor());
        mOriginPaint = getPointByColor(originColor);
        mChangePaint = getPointByColor(changeColor);
        array.recycle();
    }

    private Paint getPointByColor(int color) {
        Paint paint = new Paint();
        paint.setColor(color);
        paint.setAntiAlias(true);//抗锯齿
        paint.setDither(true);//防抖动
        paint.setTextSize(getTextSize());
        return paint;
    }

    //一个文字两种颜色思路 利用clipRect进行裁剪 用两个画笔来画 左边一个  右边一个  裁剪时不断改变裁剪宽度
    @Override
    public void draw(Canvas canvas) {
         super.draw(canvas);
        int middle = (int) (mCurrentProcess * getWidth());
        if(direction==Direction.LEFT_TO_RIGHT) {//左到右  黑变红 直到全部变为红
            //绘制不变色
            drawText(canvas, mChangePaint, 0, middle);
            //绘制变色的
            drawText(canvas, mOriginPaint, middle, getWidth());
        }else{//右到左 黑变红 直到全部变为红
            //绘制不变色
            drawText(canvas, mChangePaint, getWidth()-middle, getWidth());
            //绘制变色的
            drawText(canvas, mOriginPaint, 0, getWidth()-middle);
        }
    }
    private void drawText(Canvas canvas,Paint paint,int start,int end){
        canvas.save();
        canvas.clipRect(start, 0, end, getHeight());//裁剪区域
        String text = getText().toString();
        //获取字体宽度
        Rect bound = new Rect();
        paint.getTextBounds(text, 0, text.length(), bound);
        int x = getWidth() / 2 - bound.width() / 2;
        //获取基线
        Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
        int baseLine = getHeight() / 2 + dy;
        canvas.drawText(text, x, baseLine, paint);
        canvas.restore();
    }
    //设置字体变色的方向
    public void setDirection(Direction direction){
        this.direction=direction;
    }
    //设置当前变色进度
    public void setCurrentPress(float currentPress){
        this.mCurrentProcess=currentPress;
        invalidate();
    }
}

MainActivity3.java

private ColorTrackTextView mColorTrackTextView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        mColorTrackTextView=findViewById(R.id.color_track_textview);
    }
    public void LeftToRight(View view){
        mColorTrackTextView.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT );
        ValueAnimator valueAnimator= ObjectAnimator.ofFloat(0,1);
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentProcess= (float) animation.getAnimatedValue();
               mColorTrackTextView.setCurrentPress( currentProcess);
            }
        });
        valueAnimator.start();
    }

    public void RightToLeft(View view){
        mColorTrackTextView.setDirection(ColorTrackTextView.Direction.RIGHT_TO_Left);
        ValueAnimator valueAnimator=ObjectAnimator.ofFloat(0,1);
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentProcess= (float) animation.getAnimatedValue();
                mColorTrackTextView.setCurrentPress(currentProcess);
            }
        });
        valueAnimator.start();
    }
}

activity_main3/xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity2">

    <com.example.kotlindemo.ColorTrackTextView
        android:id="@+id/color_track_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Word"
        android:textSize="20sp"
        app:changeColor="@color/purple_200" />

    <Button
        android:onClick="LeftToRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="左到右"
        tools:ignore="OnClick" />
    <Button
        android:onClick="RightToLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="右到左"
        tools:ignore="OnClick" />

</LinearLayout>