Android添加蒙层

之前添加蒙层是在布局上添加一个View,蒙层的显示是通过控制它的显示和隐藏.看了Highlight的实现才知道可以有另外一种高效的方式

实现的思路

1. 自定义一个View 继承FrameLayout来添加蒙层
2. 封装一个static 类来表示每一个要添加的蒙层

 public static class ViewPosInfo {
        public View view; //容器View
        public int layoutId; //蒙层引导布局
        public int maskedPos;//标识引导界面与朦版
        public int shape;//漏空圆的形状,CIRCLE/OVAL
    }

3. 新建蒙层来管理蒙层,监听布局;添加、删除蒙层;蒙层消失的回调操作:如保存状态值判断下次不显示

这里通过注册addOnGlobalLayoutListener来监听界面布局的变化,然后再添加引导蒙层

    /**
     * 为mAnchor注册全局布局监听器
     */
    private void registerGlobalLayoutListener() {
        if (mAnchor != null) {
            mAnchor.getViewTreeObserver().addOnGlobalLayoutListener(this);
        }
    }


    /**
     * mAnchor反注册全局布局监听器
     */
    private void unRegisterGlobalLayoutListener() {
        if (mAnchor != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            mAnchor.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        }
    }

    @Override
    public void onGlobalLayout() {
        LogUtils.d(TAG, "onGlobalLayout");
        unRegisterGlobalLayoutListener();

        if (!hasShowMasked){
            addMaskedView();
        }
    }

漏空的实现

        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setXfermode(MODE_DST_OUT);//就是这里

蒙层的实现

创建一个bitmap

mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_4444);

绘制带透明度的颜色

 Canvas canvas = new Canvas(mMaskBitmap);
        canvas.drawColor(maskColor);

画一个圆角按钮

初始化paint

mBtnPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBtnPaint.setStyle(Paint.Style.STROKE);///空心
mBtnPaint.setColor(Color.WHITE);/边缘线的颜色
mBtnPaint.setStrokeWidth(3);//边缘线的宽度
mBtnPaint.setPathEffect(new CornerPathEffect(20));//圆角效果

mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(DisplayUtil.sp2px(mContext, 20));

绘制

int x = screenWidth / 2 ;
int y = screenHeight;

mNextRectF = new RectF(x, y - buttonHeight, x + buttonWidth, y);
canvas.drawRect(mNextRectF, mBtnPaint);

//获取字符串的宽和高, 设置字体居中显示
Rect bounds = new Rect();
mTextPaint.getTextBounds(nextStr, 0, nextStr.length(), bounds);

canvas.drawText(nextStr, buttonWidth / 2 + x - bounds.width() / 2,
    y - buttonHeight / 2 + bounds.height() / 2, mTextPaint);

获取View在屏幕中的位置

int[] postions = new int[2];
viewPosInfo.view.getLocationOnScreen(postions);
int posX = postions[0];
int posY = postions[1] - statusBarHeight;//要减去状态栏的高度

画虚线空心圆

Paint paintdashed = new Paint(Paint.ANTI_ALIAS_FLAG);
paintdashed.setStyle(Paint.Style.STROKE);
paintdashed.setStrokeWidth(3);
paintdashed.setColor(Color.WHITE);
PathEffect pathEffect = new DashPathEffect(new float[]{dashOffset, dashOffset}, 0);
paintdashed.setPathEffect(pathEffect);

destCanvas.drawCircle(rectF.left + (rectF.width() / 2), rectF.top + (rectF.height() / 2),
                    Math.max(rectF.width(), rectF.height()) / 2 + circleOffset, paintdashed);