[原创]andorid最方便定制的新手引导浮层新手引导指引页半透明挖空制作与开源github以及分享实现思路

首先文章非常简单，代码非常精简，也就是说这里的技术只是打造一个非常方便扩展的view,剩下的事情没有学习成本，只需要跟平常开发一样写布局摆放到指定位置就行，越是精简越是非常容易扩展，整个引导浮层就镂空区域没法使用现成view,或者xml写出来的。

设计思路和扩展原理

1、引导箭头是自己摆放，方便用户定制，自己用布局嵌套就好
2、方便用户随意摆放到任何位置,如对话框、顶层decorview或者放置到fragment里面于是我打算设计成一个view,而不是一个封装死的框架.而且这个view只处理镂空形状问题.
3、镂空形状的设计要方便扩展，我采取接口的方式传递画板和画笔 默认实现了圆形和矩形，用户可以轻松实现其他形状定制。

镂空实现原理

超级简单的,我之前看了别人那个就头疼，于是自己着手写了一个镂空的，采用的绘制模式是`
det_out模式来实现，其实吧，实现方式多种多样的.

image.png

首先要说明白一点就是det表示底层图层, src表示顶层的图层
从图中得知,dstout模式 就是把src盖到dstout的右下角，导致右下角消失不见了。

所以我这里是绘制了一个矩形半透明 然后上层 绘制一个要镂空的任意形状， 颜色随便，我这里保持不变。

开源完整地址

https://github.com/qssq/HollowOutView
导入依赖

compile 'cn.qssq666:hollowoutview:0.1'

使用方法

 HollowOutView hollowOutView = (HollowOutView) findViewById(R.id.hollowoutview);
        //在中心点100的区域绘制一个50px大小的圆圈 透明区域
        HollowOutView.CiceleHollowedShapeInfo circle=new HollowOutView.CiceleHollowedShapeInfo().setCx(100).setCy(100).setRadius(100);
        hollowOutView.addGuideDrawInfo(circle);
        //添加一个矩形 镂空透明区域 所有单位都是px,自己转换
        HollowOutView.RectHollowedShapeInfo rect=new HollowOutView.RectHollowedShapeInfo().setHeight(100).setWidth(90).setLeft(400).setTop(800);
        hollowOutView.addGuideDrawInfo(rect);
        hollowOutView.applyChanage();

非完整代码 HollowOutView镂空view代码如下.

/**
 * Created by qssq on 2018/4/29 [email protected]
 */
public class HollowedOutView extends View {

    public Paint getPaint() {
        return paint;
    }

    private Paint paint;

    public HollowedOutView(Context context) {
        super(context);
        init(context);
    }

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

    protected void init(Context context) {


        paint = new Paint();
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.parseColor("#7f000000"));//百分之50
        paint.setColor(Color.parseColor("#32000000"));//百分之20
        paint.setColor(Color.parseColor("#c8000000"));//百分之80
        setLayerType(LAYER_TYPE_SOFTWARE, null);//关闭硬件加速

    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(0, 0, getWidth(), getHeight(), paint);

        Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);//从绘制模式图片得知 这种模式会导致挖空的区域消失
        paint.setXfermode(mXfermode);
        for (int i = 0; i < infos.size(); i++) {

            HollowedOutShapeInfoI guideDrawInfo = infos.get(i);
            guideDrawInfo.executeDraw(canvas, paint);

        }
        paint.setXfermode(null);


    }

    protected List infos = new ArrayList<>();

    public void addGuideDrawInfo(HollowedOutShapeInfoI info) {

    }

    public void addGuideDrawInfos(List infos) {
        this.infos.addAll(infos);

    }

    public void clearGuideDrawInfo() {

        infos.clear();
    }

    /**
     * 镂空形状接口 可用户自定义
     */
    public interface HollowedOutShapeInfoI {
        /**
         * 要挖空的形状
         *
         * @param canvas
         * @param paint
         */
        void executeDraw(Canvas canvas, Paint paint);
    }

    public static class RectHollowedShapeInfo implements HollowedOutShapeInfoI {


        public int getLeft() {
            return left;
        }

        public void setLeft(int left) {
            this.left = left;
        }

        public int getTop() {
            return top;
        }

        public void setTop(int top) {
            this.top = top;
        }

        public int getWidth() {
            return width;
        }

        public void setWidth(int width) {
            this.width = width;
        }

        public int getHeight() {
            return height;
        }

        public void setHeight(int height) {
            this.height = height;
        }

        int left;
        int top;
        int width;
        int height;

        @Override
        public void executeDraw(Canvas canvas, Paint paint) {
            canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
        }

    }

    //默认实现的镂空圆形图标


    public static class CiceleHollowedShapeInfo implements HollowedOutShapeInfoI {

        public int getCx() {
            return cx;
        }

        /**
         * 要绘制的圆圈的中心点x坐标
         *
         * @param cx
         */
        public void setCx(int cx) {
            this.cx = cx;
        }

        /**
         * 要绘制的中心点y坐标
         *
         * @return
         */
        public int getCy() {
            return cy;
        }

        public void setCy(int cy) {
            this.cy = cy;
        }

        public int getRadius() {
            return radius;
        }

        public void setRadius(int radius) {
            this.radius = radius;
        }

        int cx;
        int cy;
        /**
         * 圆角半径
         */
        int radius;

        @Override
        public void executeDraw(Canvas canvas, Paint paint) {


            canvas.drawCircle(
                    cx,
                    cy,
                    radius, paint);
        }
        /**
         * 要挖空的形状
         *
         * @param canvas
         */
    }


}