Android 自定义View 字体变色

1.效果

image.png

2.根据效果，分析如实现

效果是，文字自做导游逐渐变色，用TextView无法实现，这里采用自定义View，让他继承自TextView，这样的话，就不需要再重写onMeasure()方法，这里，我们只需要自定义两张字体颜色（默认颜色和要变色的颜色就可）。

3.代码实现

3.1 自定义属性

在valuse目录下创建attrs.xml文件，在里面创建自定义属性

  <declare-styleable name="ColorTrackTextView">
    <attr name="cmOriginTextColor" format="color"></attr>
    <attr name="cmChangeTextColor" format="color"></attr>
</declare-styleable>

3.2 在布局中调用

        <com.test.cmviewdemo.ColorTrackTextView
            android:text="@string/app_name"
            android:id="@+id/main_TrackTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:textSize="22sp"
            app:cmChangeTextColor="@color/colorAccent"
            app:cmOriginTextColor="@color/colorPrimary" />

3.3 创建自定义View类，并继承自TextView

public class ColorTrackTextView extends AppCompatTextView {

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);

  }
}

3.4 创建画笔（在构造方法中调用initPaint()方法，创建画笔）

private Paint cmOriginTextPaint;
private Paint cmChangeTextPaint;

private void initPaint(Context context, AttributeSet attrs) {
    //获取自定义属性
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);
    int cmOriginTextColor = typedArray.getColor(R.styleable.ColorTrackTextView_cmOriginTextColor, getTextColors().getDefaultColor());
    int cmChangeTextColor = typedArray.getColor(R.styleable.ColorTrackTextView_cmChangeTextColor, getTextColors().getDefaultColor());
    typedArray.recycle();

    //根据自定义的颜色来创建画笔
    cmOriginTextPaint = getTextPaintByColor(cmOriginTextColor);
    cmChangeTextPaint = getTextPaintByColor(cmChangeTextColor);

}

3.5 重写onDray()方法，从新绘制Text

  /**
 * 根据自定义画笔，重写onDray()方法，重写绘制
 * @param canvas
 */
@Override
protected void onDraw(Canvas canvas) {

    //根据当前进度，获取当前中间值
    int middle = (int) (cmCurrentProgress * getWidth());

    //根据朝向，绘制TextView
    if(Directory.LEFT_TO_RIGHT == cmCurrentDirectory){
        //当前朝向为  从左到右
        drawText(canvas,cmChangeTextPaint,0,middle);
        drawText(canvas,cmOriginTextPaint,middle,getWidth());
    }else{
        //当前朝向  从右到左
        drawText(canvas,cmChangeTextPaint,getWidth() - middle,getWidth());
        drawText(canvas,cmOriginTextPaint,0,getWidth()-middle);
    }

}


  /**
 * 绘制TextView
 * @param canvas
 * @param textPaint
 * @param start
 * @param end
 */
private void drawText(Canvas canvas, Paint textPaint, int start, int end) {

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

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

    //获取文字
    String text = getText().toString();

    Rect bounds = new Rect();
    textPaint.getTextBounds(text,0,text.length(),bounds);

    //获取字体的宽度
    int x = getWidth()/2 - bounds.width()/2;
    //获取基线
    Paint.FontMetricsInt fontMetricsInt = textPaint.getFontMetricsInt();
    int dy = (fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;
    int baseLine = getHeight()/2 + dy;

    canvas.drawText(text,x,baseLine,textPaint);

    //释放画布状态，既恢复Canvas旋转，缩放等之后的状态。
    canvas.restore();
}

4

Github Demo 地址
https://github.com/hualianrensheng/CMViewDemo

引用
https://www.jianshu.com/p/2ff454ae6036