使用PorterDuffXfermode图片合成实现安卓新手引导

一些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

将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