镂空效果的引导界面
开发中碰到一个需要镂空显示引导界面的需求, 特此记录:
该控件可以设置圆形, 矩形, 椭圆形的镂空形状, 如果需要其他的特殊形状, 可以在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);