自定义TextView实现

前言

文本展示在Android开发中非常常见，大部分都是用TextView来实现，不过有些文本展示必须要手动调用Canvas来绘制，如果不了解绘制文本的原理很难把展示的文本对齐，这里就来记录一下文本绘制的各种技巧。

文本测量

在Android中调用Canvas绘制图形图像提供的坐标都代表对象的左上角位置，但绘制文本的坐标却不是左上角而是文本基线的左下角，下面的图详细展示了文本各个位置的对应关系。

图中的各个变量的值都是以基线baseLine作为坐标轴确定的，其中向上为负数，向下为正数，我们可以使用Paint对象的FontMetrics对象查看它的各个属性部分对应的数值，可以看到bottom和desc是正数而top和asc则是负数。

fontMetricsInt.top = -96
fontMetricsInt.ascent = -83
fontMetricsInt.descent = 22
fontMetricsInt.bottom = 25

通常文本都是竖向填满整个控件的内容，而Canvas.drawText方法的x,y却是文本的基线左边位置，x轴防线的左边很容器确定就是getPaddingLeft()左边补白的部分，但竖向的位置还需要仔细的做计算。考虑做一条从View横向平分分割线，那么个这条分割线的y值就是getHeight() / 2, 而baseLine和横向平分线的距离还有一个dy的差值，getHeight() / 2 + dy就是基线的竖直坐标值。

横向分割线其实和(Math.abs(bottom) + Math.abs(top)) / 2处在同一个位置，而基线到bottom之间的距离就是bottom，所以可以得知dy = (bottom - top) / 2 - bottom，最终基线的位置就是：

int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
int baseLine = getHeight() / 2 + dy;

变色TextView实现

TextView经常作为Tab来展示，有些控件能够监听不同Tab切换的进度，这时需要根据进度展示不同的TextView颜色。这种通常都是使用clipPath裁剪一块展示区域专门展示一种颜色的文本，再使用clipPath裁剪另外一块区域展示另外一种颜色的文本，裁剪范围的确定和progress存在关系。

public class CustomTextView extends AppCompatTextView {
    private Paint mInnerPaint;
    private Paint mOuterPaint;
    private float mProgress;
    private int colorDefault = Color.BLACK;
    private int colorNew = Color.RED;

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

    public CustomTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setTextSize(20);
        mInnerPaint = new Paint();
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setDither(true);
        mInnerPaint.setTextSize(dp2sp(20));
        mInnerPaint.setColor(colorDefault);
        mOuterPaint = new Paint();
        mOuterPaint.setAntiAlias(true);
        mOuterPaint.setDither(true);
        mOuterPaint.setTextSize(dp2sp(20));
        mOuterPaint.setColor(colorNew);
        mProgress = 0.5f;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint.FontMetricsInt fontMetricsInt = mOuterPaint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
        int baseLine = getHeight() / 2 + dy;

        // 根据当前进度值计算需要clip的矩形大小，展示红色文本
        canvas.save();
        canvas.clipRect(0, 0, mProgress * getWidth(), getHeight());
        canvas.drawText(getText().toString(), getPaddingLeft(), baseLine, mInnerPaint);
        canvas.restore();

        // 根据当前进度值计算需要clip的矩形大小，展示黑色文本
        canvas.save();
        canvas.clipRect(mProgress * getWidth(), 0, getWidth(), getHeight());
        canvas.drawText(getText().toString(), getPaddingLeft(), baseLine, mOuterPaint);
        canvas.restore();
    }

    public int dp2sp(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }

    public void setProgress(float progress) {
        this.mProgress = progress;
        invalidate();
    }
}

探照灯效果

有些TextView的文按为了能够吸引用户的注意，通常会加入动态元素，探照灯效果就是不停地扫描文本部分内容让它与别的区域展示不同，它主要是利用Shader的内部matrix来实现颜色效果改变。

public class BlinkTextView extends AppCompatTextView {
    private Paint mPaint;
    private LinearGradient mGradient;
    private Matrix mMatrix;
    private String mText = "Hello World, Good Morning to you!!";
    private ValueAnimator mValueAnimator;
    public BlinkTextView(Context context) {
        this(context, null);
    }

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

    public BlinkTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setBackgroundColor(Color.BLACK);
        setText(mText);
        setGravity(Gravity.CENTER);
        mPaint = getPaint();
        mPaint.setColor(getResources().getColor(R.color.colorAccent));

        // 定义渐变颜色，并且指定其本地Matrix
        mGradient = new LinearGradient(0, 0, CommonUtils.dp2px(40), 0,
                new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
                new float[] { 0.1f, 0.5f, 0.9f }, Shader.TileMode.CLAMP);
        mMatrix = new Matrix();
        mGradient.setLocalMatrix(mMatrix);
        mPaint.setTextSize(50);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setShader(mGradient);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        float width = mPaint.measureText(mText);
        mValueAnimator = ValueAnimator.ofFloat((w - width) / 2, w / 2 + width / 2);
        mValueAnimator.setDuration(1000);
        mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimator.addUpdateListener(animation ->  {
            float current = (float) animation.getAnimatedValue();
            // 做属性动画操作不断改变本地matrix的偏移值，实现探照灯效果
            mMatrix.setTranslate(current, 0);
            mGradient.setLocalMatrix(mMatrix);
            invalidate();
        });
        mValueAnimator.start();
    }
}

数据加载控件

有些加载控件需要能够展示自定义的文本，这些文本和当前用户正在执行的应用紧密相关，这就要求能够在自定义的View内部准确绘制文案，保证文案对齐效果，这就需要前面提到的文本测量方法准确计算文本的展示基线。

public class ProgressView extends View {
    // 加载分成圆形和线性展示
    private static final int ROUND = 0;
    private static final int LINE = 1;

    // 文本按照数字或者百分比展示
    private static final int PERCENT = 0;
    private static final int TEXT = 1;

    private int mShape = ROUND;
    private int mType = TEXT;

    private Paint mShapePaint;
    private Paint mTextPaint;

    @ColorInt
    private int mColorUnprocessed = Color.GRAY;
    @ColorInt
    private int mColorProcessed = Color.RED;
    @ColorInt
    private int mColorText = Color.BLACK;

    private int mMaxCount = 111;
    private int mCurrent = 0;

    private RectF mTmpRectF;

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

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

    public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        if (attrs != null) {
            TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);
            mMaxCount = array.getInt(R.styleable.ProgressView_progress_max_count, mMaxCount);
            mCurrent = array.getInt(R.styleable.ProgressView_progress_current, mCurrent);
            mShape = array.getInt(R.styleable.ProgressView_progress_shape, ROUND);
            mType = array.getInt(R.styleable.ProgressView_progress_type, TEXT);
            array.recycle();
        }
        mShapePaint = new Paint();
        mShapePaint.setAntiAlias(true);
        mShapePaint.setDither(true);
        mShapePaint.setStrokeCap(Paint.Cap.ROUND);

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setDither(true);
        mTextPaint.setTextSize(dp2px(30));
        mTextPaint.setColor(mColorText);

        mTmpRectF = new RectF();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float progress = mCurrent * 1.0f / mMaxCount;

        if (mShape == ROUND) {
            int radius = (int) Math.min(getWidth() / 2 - dp2px(5), getHeight() / 2 - dp2px(5));
            mShapePaint.setStyle(Paint.Style.STROKE);
            mShapePaint.setStrokeWidth(dp2px(5));
            mShapePaint.setColor(mColorUnprocessed);

            // 绘制底部圆形
            canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mShapePaint);

            mTmpRectF.set(getWidth() / 2 - radius, getHeight() / 2 - radius, getWidth() / 2 + radius,
                    getHeight() / 2 + radius);
            mShapePaint.setColor(mColorProcessed);
            // 绘制当前进度圆形
            canvas.drawArc(mTmpRectF, 0, progress * 360, false, mShapePaint);

            // 计算处于中间位置的文案baseLine
            Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
            int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;

            String text = mType == PERCENT ? String.format("%.2f%%", progress * 100f) : String.valueOf(mCurrent);
            int x = (int) (getWidth() / 2 - mTextPaint.measureText(text) / 2);
            int y = getHeight() / 2 + dy;
            canvas.drawText(text, x, y, mTextPaint);
        } else {
            mShapePaint.setStyle(Paint.Style.FILL);
            mShapePaint.setColor(mColorUnprocessed);
            mTmpRectF.set(getPaddingLeft(), getHeight() - getPaddingBottom() - dp2px(5),
                    getWidth() - getPaddingRight(), getHeight() - getPaddingBottom());
            canvas.drawRect(mTmpRectF, mShapePaint);

            mTmpRectF.set(getPaddingLeft(), getHeight() - getPaddingBottom() - dp2px(5),
                    getPaddingLeft() + (getWidth() - getPaddingLeft() - getPaddingRight()) * progress,
                    getHeight() - getPaddingBottom());
            mShapePaint.setColor(mColorProcessed);
            canvas.drawRect(mTmpRectF, mShapePaint);

            String text = mType == PERCENT ? String.format("%.2f%%", progress * 100f) : String.valueOf(mCurrent);
            int x = (int) (getPaddingLeft() + (getWidth() - getPaddingLeft() - getPaddingRight()) * progress);
            Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();

            // 计算当文案贴着横条时的baseLine位置
            int y = getHeight() - getPaddingBottom() - fontMetricsInt.descent;
            canvas.drawText(text, x, y, mTextPaint);
        }
    }

    private float dp2px(int dp) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }

    public void setCurrent(int current) {
        this.mCurrent = current;
        invalidate();
    }

    public void setMaxCount(int maxCount) {
        if (maxCount == 0) {
            throw new IllegalArgumentException("mMaxCount must be positive!");
        }
        this.mMaxCount = maxCount;
        invalidate();
    }

    public int getMax() {
        return mMaxCount;
    }
}