前言

在平时自定义View的过程中，基础的测量绘制等操作能够打造一个基本的自定义View，但如果想让你的自定义View玩出更多花样，就要结合一些比较灵活的绘制方式，比如本文要讲的混合模式——Xfermode。之前写的几个自定义View也有用到它来实现：

传送门：『Android自定义View实战』给我一个图标，还你一个水波纹进度球

 
传送门：『Android自定义View实战』自定义完美的刮刮乐效果

正文

什么是混合模式？

其概念最早来自于SIGGRAPH的Tomas Proter和Tom Duff，混合图形的概念极大地推动了图形图像学的发展，延伸到计算机图形图像学像Adobe和AutoDesk公司著名的多款设计软件都可以说一定程度上受到影响。从字面上其实大概猜到了它的作用，混合模式就是将画布中的两个图像，按照一定的算法，合成一个新的图像。在Android中提供了混合模式相关的类——Xfermode，它派生出来的一个子类——ProterDuffXfermode就是我们平常在Android中使用混合模式时需要用到的类，它定义了很多模式供我们选择，实现两个图像叠加在一起时的多样化呈现。

混合模式有哪些？

首先理解下图形的一些概念，图像是由很多个像素点组合而成，每个像素点都有一个自己的颜色通道组合，即所谓的ARGB：

A代表透明度Alpha
R代表红色通道Red
G代表绿色通道Green
B代表蓝色通道Blue

混合模式中，将ARGB划分为两个部分，即A+RGB的格式，也就是每个像素都会被划分为这样的形式的来描述：[Alpha，RGB]，即透明度+颜色值，那么如果是两个图层叠在在一起时，它们交集的区域可以有很多种可能性，例如[取图层1的的透明度，取图层1的颜色值]，[取图层2的透明度，取图层2的颜色值]，稍微复杂一点可以是[取图层1的透明度*图层2的透明度，取图层1的色值*图层2的透明度]....等等，将两个图像分别称之为源图像（Src）和目标图像（Dst），从而可以根据这些算法衍生出很多种模式，也就是我们的18种混合模式：

它们都是根据以上公式计算出来对应的绘制形式，其中，Sa、Sc代表源图像的透明度(Src Alpha)和色值(Src Color)，Ds、Dc代表目标图像的透明度(Dst Alpha)和色值(Dst Color)，例如 DST_IN 模式，它是根据 [Sa * Da, Sa * Dc] 算法来进行绘制，按照上文讲的 [Alpha，RGB] 的公式套进去，那么就是：

交集区域的透明度 = 源图像的透明度 * 目标图像的透明度
交集区域的色值 = 源图像的透明度 * 目标图像的色值

可以看到，无论是透明度还是色值，源图像只有透明度派上用场，换句话说，就是去除了源图像的色值，那么就只剩透明度了，所以在源图像和目标图像的交集区域，只会显示出目标图像的效果，但是其透明度会受到源图像的透明度的影响。

如何使用混合模式？

1.禁用硬件加速

Android中混合模式的操作其实不复杂，首先，也是容易遗漏的一个步骤，就是禁用硬件加速，部分混合模式的使用必须在禁用硬件加速的前提下进行，否则出来的效果会所出入，因此一般保险起见，使用混合模式之前都禁用硬件加速，如果不想影响应用的其他地方，可以只在自定义View的构造方法中调用：

//禁用硬件加速
setLayerType(View.LAYER_TYPE_SOFTWARE, null);

2.绘制目标图像

先用画笔绘制一个形状或图片，作为DST图：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(dstBm, 0, 0, paint);
}

3.设置混合模式

接着为画笔设置一个混合模式：

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

4.绘制源图像

canvas.drawBitmap(srcBm, 0, 0, paint);

5.清除混合模式

最后清除画笔混合模式，以防止下次调用onDraw的时候受影响：

paint.setXfermode(null);

汇总起来也就是：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(dstBm, 0, 0, paint);
    paint.setXfermode(duffXfermode);
    canvas.drawBitmap(srcBm, 0, 0, paint);
    paint.setXfermode(null);
}

混合模式效果

纸上得来终觉浅，我们通过一个demo，来看下这些模式真正呈现出来的效果是怎样的，创建一个自定义View，并绘制一个圆形和一个方形分别作为目标图和源图：

public class DuffModeView extends View{

    private Paint paint;
    private int width, height;
    private Bitmap srcBm, dstBm;

    public DuffModeView(Context context) {
        this(context, null);
    }

    public DuffModeView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init() {
        //禁用硬件加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        //初始化画笔
        paint = new Paint();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = right - left;
        height = bottom - top;
        srcBm = createSrcBitmap(width, height);
        dstBm = createDstBitmap(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(dstBm, 0, 0, paint);
        canvas.drawBitmap(srcBm, 0, 0, paint);
    }

    public Bitmap createDstBitmap(int width, int height) {
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint dstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        dstPaint.setColor(Color.parseColor("#00b7ee"));
        canvas.drawCircle(width / 3, height / 3, width / 3, dstPaint);
        return bitmap;
    }

    public Bitmap createSrcBitmap(int width, int height) {
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint scrPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        scrPaint.setColor(Color.parseColor("#ec6941"));
        canvas.drawRect(new Rect(width / 3, height / 3, width, height), scrPaint);
        return bitmap;
    }
}

将View的宽高划分为了3等分，将圆形绘制在左上角，正方形绘制在右下角，并分别设置不同的颜色，中间有一部分相交，效果如下：

未采用任何混合模式示意图

“素材”准备好了，那么就可以开始“动刀”了，我们实例化一个PorterDuffXfermode对象，将其设置给刚才中的画笔：

duffXfermode = new PorterDuffXfermode(PorterDuff.Mode.ADD);

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //离屏绘制
    int layerID = canvas.saveLayer(0, 0, getWidth(), getHeight(), paint, Canvas.ALL_SAVE_FLAG);
    canvas.drawBitmap(dstBm, 0, 0, paint);
    paint.setXfermode(duffXfermode);
    canvas.drawBitmap(srcBm, 0, 0, paint);
    paint.setXfermode(null);
    canvas.restoreToCount(layerID);
}

这里onDraw中有几个注意的点，我们通过Canvas的saveLayer和restoreToCount将混合模式置于单独的层面中进行，以免混合模式相关的操作对画布的其他区域产生影响，通俗的讲，可以理解成从Canvas中抽取出一层单独的图层，一切绘制都不会影响到原本的画布，等调用restoreToCount之后，就会把我们的最终效果加回到Canvas上。（是不是有点类似Photoshop的图层概念）

接着经过以下几个步骤：

1.调用drawBitmap绘制了DST图
2.为画笔设置混合模式
3.用设置了混合模式的画笔绘制SRC图
4.清除画笔混合模式

这里采用了PorterDuff.Mode.ADD模式，呈现出来的效果如下：

PorterDuff.Mode.ADD 效果图

PorterDuff.Mode.CLEAR

PorterDuff.Mode.CLEAR 效果图

PorterDuff.Mode.DARKEN

PorterDuff.Mode.DARKEN 效果图

相交的区域，看起来像是变成了另外一种颜色，其实这种模式就是比较深色的会覆盖浅色的，可以尝试把其中一个改成黑色或者白色，就更明显了~

PorterDuff.Mode.DST

PorterDuff.Mode.DST 效果图

PorterDuff.Mode.DST_ATOP

PorterDuff.Mode.DST_ATOP 效果图

PorterDuff.Mode.DST_IN

PorterDuff.Mode.DST_IN 效果图.png

PorterDuff.Mode.DST_OUT

PorterDuff.Mode.DST_OUT 效果图

PorterDuff.Mode.DST_OVER

PorterDuff.Mode.DST_OVER 效果图

呈现出来的效果，如同DST图盖住了SRC图，所以称之为DST_OVER~

PorterDuff.Mode.LIGHTEN

PorterDuff.Mode.LIGHTEN 效果图

与DARKEN相反，浅色覆盖深色，会呈现出变亮的效果。

PorterDuff.Mode.MULTIPLY

PorterDuff.Mode.MULTIPLY 效果图.png

PorterDuff.Mode.OVERLAY

PorterDuff.Mode.OVERLAY 效果图

在这种模式下，虽然是覆盖，但是并不会完全遮挡，而是形成叠加的视觉效果。

PorterDuff.Mode.SCREEN

PorterDuff.Mode.SCREEN 效果图

两个形状的交集区域，呈现出了另一种颜色，但其实是取了两者较白的部分混合而成的效果。

PorterDuff.Mode.SRC

PorterDuff.Mode.SRC 效果图

PorterDuff.Mode.SRC_ATOP

PorterDuff.Mode.SRC_ATOP 效果图

PorterDuff.Mode.SRC_IN

PorterDuff.Mode.SRC_IN 效果图

PorterDuff.Mode.SRC_OUT

PorterDuff.Mode.SRC_OUT 效果图

PorterDuff.Mode.SRC_OVER

PorterDuff.Mode.SRC_OVER 效果图

呈现出来的效果，如同SRC图盖住了DST图，所以称之为SRC_OVER~

PorterDuff.Mode.SRC_XOR

PorterDuff.Mode.XOR 效果图

在SRC图像和DST图像相交的区域之外绘制它们，在相交的区域受到对应alpha和色值影响，如果完全不透明则相交处完全不绘制。

运用混合模式实现效果

裁剪任意形状图片

圆形图片View的实现方式有很多种，比如说继承ImageView在onDraw中ClipPath，混合模式也能实现这种效果，只需要将我们要加载的背景图设置为目标图像，然后绘制一个圆形形状的源图像，设置混合模式为DST_IN，那么就只会绘制出圆形范围内的背景图，从而实现圆形图片的效果，关键代码如下：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //离屏绘制
    int layerID = canvas.saveLayer(0, 0, width, height, paint, Canvas.ALL_SAVE_FLAG);
    canvas.drawBitmap(dstBm, 0, 0, paint);
    paint.setXfermode(duffXfermode);
    canvas.drawBitmap(srcBm, 0, 0, paint);
    paint.setXfermode(null);
    canvas.restoreToCount(layerID);
}

public Bitmap createDstBitmap(int width, int height) {
    return BitmapFactory.decodeResource(getResources(), R.drawable.bg_duffmode_test);
}

public Bitmap createSrcBitmap(int width, int height) {
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint dstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    dstPaint.setColor(Color.parseColor("#ec6941"));
    canvas.drawCircle(width/2, height/2, height/2, dstPaint);
    return bitmap;
}

 
效果如下：

混合模式实现圆形图片

甚至我们可以自定义裁剪形状，只要修改上面代码中创建源图像的代码如下：

public Bitmap createSrcBitmap(int width, int height) {
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint srcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    srcPaint.setStyle(Paint.Style.FILL);
    srcPaint.setColor(Color.parseColor("#ec6941"));
    Path path = new Path();
    path.moveTo(width/2, 0);
    path.lineTo(width/6, height);
    path.lineTo(width*5/6, height);
    path.close();
    canvas.drawPath(path, srcPaint);
    //canvas.drawCircle(width/2, height/2, height/2, srcPaint);
    return bitmap;
}

就能得到一个三角形的效果：

混合模式实现三角形图片

水波纹进度球效果

原理其实就是利用贝塞尔曲线绘制水波纹性状并且将其闭合起来，作为目标图像，然后再绘制一个圆形作为源图像，也就是用圆形来“裁剪”水波纹，利用混合模式，只显示出圆形范围内的水波纹部分，从而形成水波纹进度球效果：

纯色水波纹球

结语

简单来讲，其实目标图像就类似于底片，源图像就类似于叠加在上面的图层，混合模式就相当于各种滤镜。混合模式虽然一共只有18种，但巧妙地利用这些模式已经足以帮助我们轻松实现一些特殊效果，本文只是列举一些利用混合模式实现的效果，如果你有更好的创意，欢迎一起讨论~ 文中Demo完整代码已上传到 一个集合酷炫效果的自定义组件库，欢迎Issue。
 

欢迎关注 Android小Y 的简书，更多Android精选自定义View

『Android自定义View实战』实现一个小清新的弹出式圆环菜单
『Android自定义View实战』玩转PathMeasure之自定义支付结果动画
『Android自定义View实战』自定义弧形旋转菜单栏——卫星菜单
『Android自定义View实战』自定义带入场动画的弧形百分比进度条

GitHub：GitHub-ZJYWidget
CSDN博客：IT_ZJYANG
简 书：Android小Y
在 GitHub 上建了一个集合炫酷自定义View的项目，里面有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手点个喜欢， 谢谢~