android自定义局部透明遮罩-新手引导说明

概述

大致思路就是自定义一个View,然后设置一个遮罩背景,再绘制一个圆圈用于透明显示下面的内容,如果想要说明文字啥的,就再绘制,空白画布,想干嘛干嘛啦。
android自定义局部透明遮罩-新手引导说明

画笔

有个重点就是画笔画出来的圆圈要透明显示下面的内容,而不是背景色,这个要借助PorterDuffXfermode来实现。

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
mPaint.setXfermode(porterDuffXfermode);
mPaint.setAntiAlias(true);

控制透明圆的位置

写个方法来改变所绘制的圆圈的位置

public void setCircleLocation(int x, int y, int radius) {
    this.mX = x;
    this.mY = y;
    this.mRadius = radius;
    invalidate();
}

完整代码

public class MyShadeView extends FrameLayout {
    private Paint mPaint;
    private int mX, mY, mRadius;

    public MyShadeView(@NonNull Context context) {
        super(context);
        init();
    }

    public MyShadeView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyShadeView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setBackgroundColor(Color.parseColor("#EF000000"));
        mX = 150;
        mY = 100;
        mRadius = 80;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
        mPaint.setXfermode(porterDuffXfermode);
        mPaint.setAntiAlias(true);
    }

    public void setCircleLocation(int x, int y, int radius) {
        this.mX = x;
        this.mY = y;
        this.mRadius = radius;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mX, mY, mRadius, mPaint);
    }
}

引用加载布局

当成一个控件view来用就行了,我这里是当作悬浮窗的布局来直接new一个实例出来的

MyShadeView mView = new MyShadeView(FloatShadeService.this);
mView.setCircleLocation(200, 300, 100);

作为悬浮窗遮罩还要考虑移动透明圆的位置和不影响遮罩下点击操作等,以后有机会再写啦。
更多玩法自己还可再发挥……

上一篇:android 自定义水波纹点击效果Button


下一篇:TextView自定义边框