镂空效果的引导界面

开发中碰到一个需要镂空显示引导界面的需求, 特此记录:
该控件可以设置圆形, 矩形, 椭圆形的镂空形状, 如果需要其他的特殊形状, 可以在onDraw() 方法中添加用 path 实现





//==========================自定义控件===============================
package com.hongri.demo.widget;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by xgh
 */

public class GuestCoverView extends View {

    /**
     * 圆形镂空
     */
    public static final int TYPE_CIRCLE=1;

    /**
     * 矩形镂空(正方形/长方形)
     */
    public static final int TYPE_RECT=2;

    /**
     * 椭圆形镂空
     */
    public static final int TYPE_OVAL=3;



    public Paint getPaint() {
        return paint;
    }

    private Paint paint;

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

    public GuestCoverView(Context context, 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("#c8000000"));//透明度百分之80
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            setLayerType(LAYER_TYPE_SOFTWARE, null);//关闭硬件加速
        }



    }

    public GuestCoverView(Context context, 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 < holeInfos.size(); i++) {

            HoleInfo holeInfo = holeInfos.get(i);

            switch (holeInfo.getHoleType()){

                case GuestCoverView.TYPE_CIRCLE:

                    int radius=Math.min(holeInfo.getRect().width()/2,holeInfo.getRect().height()/2);
                    canvas.drawCircle(holeInfo.getRect().centerX(),holeInfo.getRect().centerY(),radius,paint);
                    break;
                case GuestCoverView.TYPE_RECT:
                    canvas.drawRect(holeInfo.getRect(),paint);

                    break;
                case GuestCoverView.TYPE_OVAL:
                    canvas.drawOval( new RectF(holeInfo.getRect()),paint);

                    break;


            }


        }
        paint.setXfermode(null);


    }

    protected List<HoleInfo> holeInfos = new ArrayList<>();


    public void setHoleInfo(HoleInfo info) {

        holeInfos.add(info);
        postInvalidate();

    }

    /**
     * 一次性添加多个镂空区域图形
     *
     * @param infos
     */
    public void addHoleInfos(List<HoleInfo> infos) {
        this.holeInfos.addAll(infos);
        postInvalidate();

    }

    public void clearGuideDrawInfo() {

        holeInfos.clear();

    }


    public static class HoleInfo{
        private Rect rect;
        private int holeType;

        public HoleInfo( Rect rect , int holeType){
            this.rect=rect;
            this.holeType=holeType;
        }

        public Rect getRect() {
            return rect;
        }

        public void setRect(Rect rect) {
            this.rect = rect;
        }

        public int getHoleType() {
            return holeType;
        }

        public void setHoleType(int holeType) {
            this.holeType = holeType;
        }
    }





}

//==========================效果如下================================

 

 

 

//========================使用================================

1.布局文件中添加该控件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center_horizontal"

    tools:context=".ui.activity.Login2Activity">

    
    ...

<!-- 镂空控件显示在最外层-->
    <com.hongri.demo.widget.GuestCoverView
        android:id="@+id/view_guest"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</RelativeLayout>

2.Activity中使用:

GuestCoverView  view=findViewById(R.id.view_guest);

 //设置单个镂空形状
 //HoleInfo holeInfo=new HoleInfo(new Rect(100,200,400,400),GuestCoverView.TYPE_CIRCLE);
 // view.setHoleInfo(holeInfo);
 
 //设置单个镂空形状
 //HoleInfo holeInfo=new HoleInfo(new Rect(100,100,400,400),GuestCoverView.TYPE_RECT);
 // view.setHoleInfo(holeInfo);
 
 //设置单个镂空形状
// HoleInfo holeInfo=new HoleInfo(new Rect(100,100,600,400),GuestCoverView.TYPE_OVAL);
// view.setHoleInfo(holeInfo);
 
 //设置多个镂空形状
 ArrayList<HoleInfo> holeInfos=new ArrayList<>();
 holeInfos.add(new HoleInfo(new Rect(100,100,100+400,100+400),GuestCoverView.TYPE_CIRCLE));
 holeInfos.add(new HoleInfo(new Rect(100,600,100+400,600+400),GuestCoverView.TYPE_RECT));
 holeInfos.add(new HoleInfo(new Rect(100,1200,100+600,1200+300),GuestCoverView.TYPE_OVAL));
 view.addHoleInfos(holeInfos);