一些APP需要新手引导功能，如下图所示：
hollow1.png
一个黑色半透明的浮层盖住页面的大部分，需要引导用户操作的地方突出显示。实现这种效果有两种思路：
- 将要突出显示的地方做成图片，放到下层页面相同的位置，实现伪透明效果。这样的缺点是，如果图片较大或者是动画会占用空间，或者要突出的内容是可变的也不合适。
- 在View的onDraw()方法中绘图，在要突出显示的地方绘制透明区域。也许你会想，这很简单，先把黑色的浮层画出来，再在其中画透明的图形不就行了？事实上直接这么做是行不通的，透明图形会被下面的黑色的浮层“覆盖”，根本看不到。要实现透明效果需要将透明区域从黑色浮层中挖去。
原理
实现挖去效果就需要使用PorterDuffXfermode图片合成技术，它将两张图片合称为一张，合成后的效果会突出或隐藏图片的一部分。
PorterDuffXfermode.jpg
PorterDuffXfermode中的16种模式如上图所示。图中蓝色矩形是源图Src，黄色圆形是目标图Dst。源图和目标图并无差别，只需要知道先画的是目标图，后画的是源图就行了。
根据前面的需求，先画黑色浮层，然后画透明图形，并将透明图形挖去。也就是Dst是黑色浮层，Src是透明图形，Src挖去。满足这个条件的是上图的 SrcOut 模式。
代码
这种镂空布局的实现如下：
HollowLayout.java
public class HollowLayout extends FrameLayout {
private static final int SHADOW_COLOR = 0xB3000000;
private static final int HOLLOW_COLOR = Color.TRANSPARENT;
private RectF mRectF;
private Paint mPaint;
private Xfermode mXfermode;
public HollowLayout(Context context) {
this(context, null);
}
public HollowLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public HollowLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setLayerType(LAYER_TYPE_SOFTWARE, null);
setWillNotDraw(false);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//SrcOut模式
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT);
}
@Override
protected void onDraw(Canvas canvas) {
if(mRectF == null){
mRectF = new RectF(0, 0, getWidth(), getHeight());
}
//绘制目标图
mPaint.setColor(SHADOW_COLOR);
canvas.drawRect(mRectF, mPaint);
//设置混合模式
mPaint.setXfermode(mXfermode);
//绘制源图
mPaint.setColor(HOLLOW_COLOR);
if(onDrawHollowListener != null){
onDrawHollowListener.onDrawHollow(canvas, mPaint);
}
}
private OnDrawHollowListener onDrawHollowListener;
public void setOnDrawHollowListener(OnDrawHollowListener onDrawHollowListener) {
this.onDrawHollowListener = onDrawHollowListener;
}
public interface OnDrawHollowListener{
void onDrawHollow(Canvas canvas, Paint paint);
}
}
- HollowLayout继承自FrameLayout而不是View，是为了方便在镂空布局的上面添加说明文字和图片。
- 由于想要镂空的图形是不确定的，可能是圆的、也可能是方的、或者多个图形的叠加。这里对外部提供 OnDrawHollowListener 接口，在 onDrawHollow(Canvas canvas, Paint paint) 中直接用canvas绘图。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cc.rome753.demo.MainActivity">
<ImageView
android:src="@mipmap/ic_launcher"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<cc.rome753.demo.HollowLayout
android:id="@+id/hv"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:text="这是提示文字"
android:textColor="@android:color/white"
android:layout_marginTop="310dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</cc.rome753.demo.HollowLayout>
</FrameLayout>
将HollowLayout直接放到页面布局的最上层，HollowLayout中放引导文字
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final int size = dp2px(200);
final int left = (getScreenWidth(this) - size) / 2;
final int top = dp2px(100);
final int right = left + size;
final int bottom = top + size;
HollowLayout hl = findViewById(R.id.hv);
hl.setOnDrawHollowListener(new HollowLayout.OnDrawHollowListener() {
@Override
public void onDrawHollow(Canvas canvas, Paint paint) {
canvas.drawOval(new RectF(0,0,300,300), paint);
canvas.drawOval(new RectF(left,top,right,bottom), paint);
}
});
}
public static int dp2px(float dpValue) {
return (int) (0.5f + dpValue * Resources.getSystem().getDisplayMetrics().density);
}
public static int getScreenWidth(Context context) {
return context.getResources().getDisplayMetrics().widthPixels;
}
}
活动页面中给HollowLayout设置回调，在 onDrawHollow(Canvas canvas, Paint paint) 中绘图。这里画了两个圆。注意，canvas绘图是基于像素的，所以要确定具体的位置，就要进行 dp2px 单位转换。
最终效果：
hollow2.png
