今天重点内容是我们学习自己定义view里面的混合模式。事实上我们的画布就跟photoshop一样。是个图层关系，一层盖着一层。这样就导致有非常多种覆盖模式，这就是我们今天的主题。“混合模式”。

好，如今我们来看下这个模式的说明图：

canvas原有的图片 能够理解为背景 就是dst
新画上去的图片 能够理解为前景 就是src

从上面我们能够看到PorterDuff.Mode为枚举类,一共同拥有16个枚举值:
1.PorterDuff.Mode.CLEAR
所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
显示上层绘制图片
3.PorterDuff.Mode.DST
显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
上下层都显示。

下层居上显示。

6.PorterDuff.Mode.SRC_IN
取两层绘制交集。显示上层。

7.PorterDuff.Mode.DST_IN
取两层绘制交集。

显示下层。
8.PorterDuff.Mode.SRC_OUT
取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN
取两图层所有区域。交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
取两图层所有，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
取两图层所有区域，交集部分变为透明色

我决定以以下2个效果来作为联系和实现以下请看效果。1、一个是进度条转完以波纹动画的方式显示实物。2、是一款进度条，当进度覆盖文字的时候，覆盖到哪里，哪里的文字的一部分就显示成白色：

第一种效果：

接下来我们就来看这个gif的代码，事实上非常easy主要实现方式呢就是圆形载入条是以Canvas画扇形的方式画出，仅仅是圆心空心而已。载入完之后呢外面的大圆就是Canvas以画圆的方式画出。仅仅是混合模式是CLEAR也是清除的意思。占用大小刚好就是载入条的大小，然后小圆的大小也是载入条的大小，刚好覆盖在大圆上面。

接着就启动循环载入知道所有显示。大圆扩散显示（由于是CLEAR模式所以，覆盖到的地方全是透明的）。小圆缩小显示：

package com.wyw.lodingdemo;import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;public class LoadingView extends View {public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}public LoadingView(Context context, AttributeSet attrs) {super(context, attrs);init();}public LoadingView(Context context) {super(context);init();}private Paint paint;/** 设置矩阵的坐标点 */private RectF rectF;/** 当前进度 */private int current = 0;/** 横向中心X轴 */private float centerX = 0;/** 竖向中心Y轴 */private float centerY = 0;/** 园半径 */private float circleRadius;/** 是否完毕 */private boolean isComplete = false;/** 完毕之后显示的图片 */private Bitmap bitmap;private Matrix matrix;// 缩放比率private float widthRate;private float heightRate;/** bitmap画笔 */private Paint Bpaint;private int size;/** 白屏显示的画布 */private Canvas mCanvas;/** 消失画笔（大圆） */private Paint Gpaint_big;/** 消失画笔（小圆） */private Paint Gpaint_small;private Bitmap fgBitmap;private Bitmap frontBitmap;/** 消失的园半径 */private float gone_circleRadius_big = 0;/** 消失的园半径 */private float gone_circleRadius_small = 0;@SuppressLint("DrawAllocation")@Overrideprotected void onLayout(boolean changed, int left, int top, int right,int bottom) {centerX = (right - left) / 2;centerY = (bottom - top) / 2;rectF = new RectF(centerX - circleRadius, centerY - circleRadius,centerX + circleRadius, centerY + circleRadius);// 弧形super.onLayout(changed, left, top, right, bottom);}private void init() {size = Math.min(getResources().getDisplayMetrics().widthPixels,getResources().getDisplayMetrics().heightPixels);paint = new Paint();// 布局xml里面引用paint.setColor(Color.parseColor("#fe871a"));paint.setAntiAlias(true);// 设置抗锯齿paint.setStrokeWidth(getInt(1f, size));paint.setStyle(Style.STROKE);// 设置圆心掏空// 设置画笔形状 圆形，须要先设置画笔样式 SYROKE 或者 FILL_AND_STROKEpaint.setStrokeCap(Paint.Cap.ROUND);circleRadius = getInt(7f, size);}/** 获取传入颜色，高度。宽度的Bitmap */public Bitmap CreateBitmap(int color, int width, int height) {int[] rgb = new int[width * height];for (int i = 0; i < rgb.length; i++) {rgb[i] = color;}return Bitmap.createBitmap(rgb, width, height, Config.ARGB_4444);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (!isComplete) {// 没完毕canvas.drawArc(rectF, 0, current, false, paint);} else {// 已完毕if (bitmap != null && isComplete) {if (matrix == null) {initParameters();matrix.reset();matrix.postScale(widthRate, heightRate);// 绘制白色背景图mCanvas.drawBitmap(frontBitmap, 0, 0, null);}canvas.drawBitmap(bitmap, matrix, Bpaint);// 绘制前景canvas.drawBitmap(fgBitmap, 0, 0, null);// mCanvas.drawArc(left, top, right, bottom, startAngle,// sweepAngle, useCenter, Gpaint);mCanvas.drawCircle(centerX, centerY, gone_circleRadius_big,Gpaint_big);// 绘制前景canvas.drawCircle(centerX, centerY, gone_circleRadius_small,Gpaint_small);if (gone_circleRadius_big < centerX * 1.5f|| gone_circleRadius_small > 0) {handler.post(drawRunnable);}}}}private Handler handler = new Handler();private Runnable drawRunnable = new Runnable() {@Overridepublic void run() {gone_circleRadius_big += centerX * 1.5f / 50f;gone_circleRadius_small -=  circleRadius / 50f;invalidate();}};/** 初始化matrix */private void initParameters() {matrix = new Matrix();Bpaint = new Paint();Bpaint.setAntiAlias(true);gone_circleRadius_big = circleRadius;gone_circleRadius_small = circleRadius;Gpaint_small = new Paint();// 防锯齿Gpaint_small.setAntiAlias(true);Gpaint_small.setColor(Color.BLACK);Gpaint_big = new Paint();// 防锯齿Gpaint_big.setAntiAlias(true);// 设置混合模式为DST_INGpaint_big.setXfermode(new PorterDuffXfermode(Mode.CLEAR));// 生成前景图Bitmap 这里拿的宽高要在onDraw里面才干拿到哦。fgBitmap = Bitmap.createBitmap(getWidth(), getHeight(),Config.ARGB_4444);frontBitmap = CreateBitmap(Color.BLACK, getWidth(), getHeight());mCanvas = new Canvas(fgBitmap);if (bitmap != null) {float iw = bitmap.getWidth();float ih = bitmap.getHeight();float width = this.getWidth();float height = this.getHeight();// 初始放缩比率widthRate = width / iw;heightRate = height / ih;}}/** 是否完毕 */public void setComplete(boolean isComplete, Bitmap bitmap) {this.isComplete = isComplete;this.bitmap = bitmap;invalidate();}/*** 设置当前进度* * @param current*            进度*/public void setCurrentProgress(float current, float max) {this.current = (int) ((360f / max) * current);invalidate();}/*** 获取占屏幕的百分比* * @param value*            使用size的百分比* @param size*            最大值* @return 依据百分算出的大小*/private int getInt(float value, int size) {try {return Math.round(value * (float) size / 100f);} catch (Exception ignore) {return 0;}}
}

另外一种效果：

好，我们来看下代码，我这里的默认模式是SCREEN。SCREEN呢就是覆盖的时候覆盖部分会是白色。这里我的文字是SCREEN模式。所以呢当我的进度条覆盖到文字的时候。覆盖的部分就会变成白色。

这里呢我把所有的模式和不同的颜色都加上了，详细怎么理解怎么定义能够下载demo亲自去尝试，去切换看看。那些混合模式究竟都是哪些效果。

package com.wyw.loadingdemob;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.PorterDuffXfermode;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff.Mode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;public class LoadingViewb extends View {public LoadingViewb(Context context) {super(context);init();}public LoadingViewb(Context context, AttributeSet attrs) {super(context, attrs);init();}public LoadingViewb(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}// 背景圆角矩形画笔private Paint paint_bg;// 背景圆角矩形private RectF rect_bg;// 字体画笔private Paint paint_txt;// 前景圆角private Paint paint_front;// 前景圆角矩形private RectF rect_front;// 结束位置private int endX;// 起始位置private int startX;// 当前位置private int currentX;// 竖向中间位置private int centerY;// 横向中间位置private int centerX;// 要显示的文字private String text = "0%";// 文字竖向居中的数值private int txt_center_y = 0;@Overrideprotected void onLayout(boolean changed, int left, int top, int right,int bottom) {//開始位置（由于是圆角所以会突出一部分所以開始位置得加上屏幕的百分之5）startX = 0 + getInt(5f);//结束位置（由于是圆角所以会突出一部分所以開始位置得减去屏幕的百分之5）endX = right - left - getInt(5f);//拿到y轴中心点centerY = (bottom - top) / 2;//拿到x轴中心点centerX = (right - left) / 2;super.onLayout(changed, left, top, right, bottom);}private void init() {paint_bg = new Paint();paint_bg.setColor(Color.parseColor("#fe871a"));// 设置抗锯齿paint_bg.setAntiAlias(true);paint_bg.setStrokeWidth(getInt(1f));// 设置圆心掏空paint_bg.setStyle(Style.STROKE);// 设置画笔形状 圆形。须要先设置画笔样式 STROKE 或者 FILL_AND_STROKEpaint_bg.setStrokeCap(Paint.Cap.ROUND);paint_txt = new Paint();paint_txt.setColor(Color.parseColor("#fe871a"));paint_txt.setTextSize(getInt(5f));// 设置抗锯齿paint_txt.setAntiAlias(true);// 设置混合模式为SCREENpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SCREEN));// 以下这行是实现字体水平居中paint_txt.setTextAlign(Paint.Align.CENTER);paint_front = new Paint();paint_front.setColor(Color.parseColor("#fe871a"));// 设置抗锯齿paint_front.setAntiAlias(true);// 设置混合模式为SRC_ATOPpaint_front.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (rect_bg == null) {rect_bg = new RectF(startX, centerY - getInt(5f), endX, centerY+ getInt(5f));rect_front = new RectF(startX, centerY - getInt(5f), currentX,centerY + getInt(5f));// 实现字体竖向居中FontMetricsInt fontMetrics = paint_txt.getFontMetricsInt();txt_center_y = (centerY * 2 - fontMetrics.bottom - fontMetrics.top) / 2;}canvas.drawRoundRect(rect_bg, getInt(10f), getInt(10f), paint_bg);canvas.drawRoundRect(rect_front, getInt(10f), getInt(10f), paint_front);canvas.drawText(text, centerX, txt_center_y, paint_txt);}// 设置当前进度public void setCurrentProgress(float current, float max) {//由于起点不是0，所以总长度须要减去起点 (endX-startX)currentX = (int) (((float) (endX-startX) / max) * current);text = (int) ((float) currentX / (float) (endX-startX) * 100) + "%";//由于起点不是0所以须要加上起点的rect_front.right = currentX+startX;invalidate();}// 设置字体颜色public void setTextColor(int color) {paint_txt.setColor(color);//重置数据currentX = 0;text = "0%";if (rect_front != null) {rect_front.right = currentX;}invalidate();}// 设置重叠模式public void setMode(String mode) {if (mode.equals("clear")) {// 设置混合模式为CLEARpaint_txt.setXfermode(new PorterDuffXfermode(Mode.CLEAR));} else if (mode.equals("Src")) {// 设置混合模式为SRCpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SRC));} else if (mode.equals("Dst")) {// 设置混合模式为DSTpaint_txt.setXfermode(new PorterDuffXfermode(Mode.DST));} else if (mode.equals("srcOver")) {// 设置混合模式为SRC_OVERpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SRC_OVER));} else if (mode.equals("DstOver")) {// 设置混合模式为DST_OVERpaint_txt.setXfermode(new PorterDuffXfermode(Mode.DST_OVER));} else if (mode.equals("SrcIn")) {// 设置混合模式为SRC_INpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));} else if (mode.equals("DstIn")) {// 设置混合模式为DST_INpaint_txt.setXfermode(new PorterDuffXfermode(Mode.DST_IN));} else if (mode.equals("SrcOut")) {// 设置混合模式为SRC_OUTpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT));} else if (mode.equals("DstOutr")) {// 设置混合模式为DST_OUTpaint_txt.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));} else if (mode.equals("SrcATop")) {// 设置混合模式为SRC_ATOPpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));} else if (mode.equals("DstATop")) {// 设置混合模式为DST_ATOPpaint_txt.setXfermode(new PorterDuffXfermode(Mode.DST_ATOP));} else if (mode.equals("Xor")) {// 设置混合模式为XORpaint_txt.setXfermode(new PorterDuffXfermode(Mode.XOR));} else if (mode.equals("Darken")) {// 设置混合模式为DARKENpaint_txt.setXfermode(new PorterDuffXfermode(Mode.DARKEN));} else if (mode.equals("Lighten")) {// 设置混合模式为LIGHTENpaint_txt.setXfermode(new PorterDuffXfermode(Mode.LIGHTEN));} else if (mode.equals("Multiply")) {// 设置混合模式为MULTIPLYpaint_txt.setXfermode(new PorterDuffXfermode(Mode.MULTIPLY));} else if (mode.equals("Screen")) {// 设置混合模式为SCREENpaint_txt.setXfermode(new PorterDuffXfermode(Mode.SCREEN));}//重置数据currentX = 0;text = "0%";if (rect_front != null) {rect_front.right = currentX;}invalidate();}/*** 获取占屏幕的百分比* * @param value*            使用size的百分比* @param size*            最大值* @return 依据百分算出的大小*/private int getInt(float value) {int size = Math.min(getResources().getDisplayMetrics().widthPixels,getResources().getDisplayMetrics().heightPixels);try {return Math.round(value * (float) size / 100f);} catch (Exception ignore) {return 0;}}
}

本篇博客就到这里，假设有有疑问的欢迎留言讨论。同一时候希望大家多多关注我的博客。多多支持我。

尊重原创转载请注明：（http://blog.csdn.net/u013895206） ！

以下是地址传送门：

第一种效果下载地址：http://download.csdn.net/detail/u013895206/9479008

另外一种效果下载地址：http://download.csdn.net/detail/u013895206/9479013