Android TextView文字镂空效果的两种实现

一图胜千言

文字镂空效果主要有两种实现方式:

1，自动义View，在canvas中绘制圆角矩形作为背景，然后绘制文字，通过PorterDuff.Mode.DST_OUT把背景擦除，实现镂空效果。如上图中的第一个。

2，自定义TextView，定义两Bitmap，分别在Bitmap上画背景和文字前景，然后通过PorterDuff.Mode.DST_OUT，把背景擦除，实现镂空效果。如上图中的第二个。

比较：两种方式原理上是一样的，但是第二种方式继承自TextView，可以直接使用TextView的属性，如字体大小、颜色、样式等等。而第一种则需要定义大量的属性。

下面分别介绍两种方式。

一，自动义View方式。

1，初始化

public void init(Context context, AttributeSet attrs) {
    if (attrs != null) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HollowView);
        // 获取要实现的内容
        textString = a.getString(R.styleable.HollowView_textString);
        // 获取背景色
        mBgColor = a.getColor(R.styleable.HollowView_bgColor, mBgColor);
        if (a.hasValue(R.styleable.HollowView_textSize)) {
            // 获取文字大小
            textSize = a.getDimension(R.styleable.HollowView_textSize, textSize);
        }
        // 获取圆角半径
        mRadius=a.getDimension(R.styleable.HollowView_radius,mRadius);
        a.recycle();
    }

    mPaint = new Paint();
    mPaint.setTextSize(textSize);
    mPaint.setAntiAlias(true);
    mPaint.setColor(mBgColor);
    
    Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
    // 计算绘制文字起始点的Y值
    drawY = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
}

2，测量

这里用了默认的wrap_content测量方式，如果有需要可自行修改。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // 获取文字宽度
    width = FontUtil.getTextWidth(textString, mPaint);
    // 获取文字高度
    height = FontUtil.getTextHeight(textString, mPaint);
    // 计算空间应占的宽度
    mWidth = width + getPaddingLeft() + getPaddingRight();
    // 计算空间应占的高度
    mHeight = height + getPaddingTop() + getPaddingBottom();
    // 背景的绘制范围
    rectF = new RectF(-mWidth / 2, -mHeight / 2, mWidth / 2, mHeight / 2);

    setMeasuredDimension(mWidth, mHeight);
}

3，绘制

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 移动原点到view中心
    canvas.translate(mWidth / 2, mHeight / 2);
    // 保存layer
    int layer = canvas.saveLayer(rectF, mPaint);
    // 绘制圆角矩形的背景
    canvas.drawRoundRect(rectF, mRadius, mRadius, mPaint);
    // 设置画笔PorterDuff.Mode.DST_OUT模式
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    // 绘制文字
    canvas.drawText(textString, -width / 2, drawY, mPaint);
    mPaint.setXfermode(null);
    // 还原图层
    canvas.restoreToCount(layer);
}

这样就实现了图中第一个效果。

4，使用

<per.wangsj.myview.view.textview.HollowView
        android:id="@+id/hollowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:textString="撒拉嘿!"
        app:bgColor="@color/color_1"
        app:textSize="24sp"
        app:radius="4dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        />

二，自动义TextView方式。

1，初始化属性，画笔等

private void init(AttributeSet attrs) {
    TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.HollowView);
    // 获取背景颜色属性
    bgColor = typedArray.getColor(R.styleable.HollowView_bgColor, bgColor);
    // 获取圆角半径属性
    mRadius = typedArray.getDimension(R.styleable.HollowView_radius, mRadius);
    // 获取文本
    textString = getText().toString();
    // 初始化画笔
    bgPaint = new Paint();
    bgPaint.setColor(bgColor);
    bgPaint.setAntiAlias(true);
}

2，初始化两个Bitmap和canvas

通过canvas分别在bitmap上绘制文字，和背景。

private void initCanvas() {
    // 显示文字的Bitmap
    textBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_4444);
    textCanvas = new Canvas(textBitmap);
    // 计算文字开始绘制位置的Y值
    Paint.FontMetrics fontMetrics = getPaint().getFontMetrics();
    float y = mHeight / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
    
    // 在textBitmap上画背景
    textCanvas.drawText(textString, getPaddingLeft(), y, getPaint());

    // 绘制背景的bitmap
    bgBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_4444);
    Canvas bgCanvas = new Canvas(bgBitmap);
    // 在bgBitmap上画背景
    bgCanvas.drawRoundRect(0, 0, mWidth, mHeight, mRadius, mRadius, bgPaint);
}

3，绘制

protected void onDraw(Canvas canvas) {
    // 保存图层
    int layer = canvas.saveLayer(0, 0, mWidth, mHeight, bgPaint);
    // 画背景 
    canvas.drawBitmap(bgBitmap, 0, 0, bgPaint);
    // 设置画笔模式
    bgPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    // 画文字
    canvas.drawBitmap(textBitmap, 0, 0, bgPaint);
    bgPaint.setXfermode(null);
    // 还原图层
    canvas.restoreToCount(layer);
}

代码注释已经比较清楚了，就不多做解释了。

可以看出，这种方式只需要添加背景色和圆角半径两个自定义属性。

4，使用

<per.wangsj.myview.view.textview.HollowTextView
        android:id="@+id/hollowTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        app:bgColor="@color/color_1"
        app:radius="4dp"
        android:text="撒拉嘿!"/>

参考：https://www.colabug.com/4763345.html

Android TextView文字镂空效果的两种实现

一，自动义View方式。

二，自动义TextView方式。

猜你喜欢