Android镂空字体,TextvView实现镂空字体效果

前言：

本来朋友问我镂空字体怎么实现，刚开始以为是简简单单调整背景色和透明度，后来发现是我想多了。记录一下

效果图:

 看了几个整体思路都是

• 自定义HolloTextView继承自View，重写onDraw方法，绘制背景，使用PorterDuff.Mode.DST_OUT的画笔调用canvas.drawText方法绘制文字

其实有些背景可以用别的方法实现：

透明背景可以用

binding.btMySignOut.setTextColor(Color.alpha(100));等等

alpha范围是0-250

第一步：

1、创建HollowTextView

public class HollowTextView extends AppCompatTextView {
    private Paint mTextPaint, mBackgroundPaint;
    private Bitmap mBackgroundBitmap, mTextBitmap;
    private Canvas mBackgroundCanvas, mTextCanvas;
    private RectF mBackgroundRect;
    private int mBackgroundColor;
    private float mCornerRadius;

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

    public HollowTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(attrs, 0);
        initPaint();
    }

    public HollowTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(attrs, defStyleAttr);
        initPaint();
    }


    private void initAttrs(AttributeSet attrs, int defStyleAttr) {
        if (attrs == null) {
            return;
        }
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.HollowTextView, defStyleAttr, 0);
        mBackgroundColor = typedArray.getColor(R.styleable.HollowTextView_hollowTextView_background_color, Color.TRANSPARENT);
        mCornerRadius = typedArray.getDimension(R.styleable.HollowTextView_hollowTextView_corner_radius, 0);
        typedArray.recycle();
    }

    /***
     * 初始化画笔属性
     */
    private void initPaint() {
        //画文字的paint
        mTextPaint = new Paint();
        //这是镂空的关键
        mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        mTextPaint.setAntiAlias(true);
        mBackgroundPaint = new Paint();
        mBackgroundPaint.setColor(mBackgroundColor);
        mBackgroundPaint.setAntiAlias(true);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBackgroundBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);
        mBackgroundCanvas = new Canvas(mBackgroundBitmap);
        mTextBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);
        mTextCanvas = new Canvas(mTextBitmap);
        mBackgroundRect = new RectF(0, 0, getWidth(), getHeight());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //这里给super传入的是mTextCanvas，把一些基本属性都支持进去
        super.onDraw(mTextCanvas);
        drawBackground(mBackgroundCanvas);
        int sc;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            sc = canvas.saveLayer(0, 0, getMeasuredWidth(), getMeasuredHeight(), null);
        } else {
            sc = canvas.saveLayer(0, 0, getMeasuredWidth(), getMeasuredHeight(), null, Canvas.ALL_SAVE_FLAG);
        }
        canvas.drawBitmap(mBackgroundBitmap, 0, 0, null);
        canvas.drawBitmap(mTextBitmap, 0, 0, mTextPaint);
        canvas.restoreToCount(sc);
    }

    private void drawBackground(Canvas canvas) {
        if (mCornerRadius > 0) {
            canvas.drawRoundRect(mBackgroundRect, mCornerRadius, mCornerRadius, mBackgroundPaint);
        } else {
            canvas.drawColor(mBackgroundColor);
        }
    }
}

第二步：创建values下styleable的xml（attrs）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="HollowTextView">
        <attr name="hollowTextView_background_color" format="color|reference"/>
        <attr name="hollowTextView_corner_radius" format="dimension|reference"/>
    </declare-styleable>
</resources>

 最后就是引用HollowTextView

<com.test.aaa.activitys.HollowTextView
        android:id="@+id/hollowtext"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="镂空文本"
        android:textSize="30sp"
        android:layout_marginTop="230dp"
        android:layout_marginLeft="@dimen/dp_200"
        android:layout_marginRight="50dp"
        android:textStyle="bold"
        app:hollowTextView_background_color="#4CAF50"
        app:hollowTextView_corner_radius="5dp"/>