圆形ImageView系列（一）-----Xfermode+View

前言

看标题就知道，这是一个系列，因为实现圆形ImageView的方法有很多种，所以接下来准备将这几种方法都实现一遍，最后总结对比下各种方法。

虽然网上已经有很多现成的分析文章以及源代码，但是毕竟是别人总结的，还是没有自己实践来的真实。

纸上得来终觉浅，绝知此事要躬行哈。

下面就开始来说最简单常用的一种方法：自定义View+设置Xfermode的方式。先给大家看效果图：

提莫萌萌哒~

主要原理

关于Xfermode相关的知识，这里不多做介绍，只稍微提一下。会用ps的同学应该都用过选框工具，选框工具也有不同的模式，分别是：

• 新选区
• 添加到选区
• 从选区减去
• 与选区交叉

总之就是各种取交集、并集的过程。Xfermode的各种不同模式思想上跟这个有点类似，不过比ps的选区强大得多，大家看图就明白了：

可以看到Xfermode的取值有很多种，不同的取值可以达到不同的效果，类似于一些刮刮卡以及撕美女裙子等的游戏应该都可以利用设置Xfermode的不同值来实现。

16条Porter-Duff规则

对于上图中的不同取值，网上有人总结出来了下面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

有的同学对于上面的src和dest可能分不清楚，究竟先画的是src还是dest呢？分析google给的android apidemo里面graphics/xfermode里面的onDraw方法可以看到

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);

            Paint labelP = new Paint(Paint.ANTI_ALIAS_FLAG);
            labelP.setTextAlign(Paint.Align.CENTER);

            Paint paint = new Paint();
            paint.setFilterBitmap(false);

            canvas.translate(15, 35);

            int x = 0;
            int y = 0;
            for (int i = 0; i < sModes.length; i++) {
                // draw the border
                paint.setStyle(Paint.Style.STROKE);
                paint.setShader(null);
                canvas.drawRect(x - 0.5f, y - 0.5f,
                                x + W + 0.5f, y + H + 0.5f, paint);

                // draw the checker-board pattern
                paint.setStyle(Paint.Style.FILL);
                paint.setShader(mBG);
                canvas.drawRect(x, y, x + W, y + H, paint);

                // draw the src/dst example into our offscreen bitmap
                int sc = canvas.saveLayer(x, y, x + W, y + H, null,
                                          Canvas.MATRIX_SAVE_FLAG |
                                          Canvas.CLIP_SAVE_FLAG |
                                          Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                                          Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                                          Canvas.CLIP_TO_LAYER_SAVE_FLAG);
                canvas.translate(x, y);
                canvas.drawBitmap(mDstB, 0, 0, paint);
                paint.setXfermode(sModes[i]);
                canvas.drawBitmap(mSrcB, 0, 0, paint);
                paint.setXfermode(null);
                canvas.restoreToCount(sc);

                // draw the label
                canvas.drawText(sLabels[i],
                                x + W/2, y - labelP.getTextSize()/2, labelP);

                x += W + 10;

                // wrap around when we've drawn enough for one row
                if ((i % ROW_MAX) == ROW_MAX - 1) {
                    x = 0;
                    y += H + 30;
                }
            }
        }

这段代码完成的效果也就是上面那个xfermode效果对照表所展示的效果了，可以看到onDraw里面的第35~38行中，可以非常清楚的知道：

• 先画mDstB

• 然后设置xfermode

• 最后画mSrc

也就是先画的图是作为dest画在canvas 的下层的，后画的图是作为src画在canvas的上层的。

对于我们这个圆形的ImageView的话，主要是使用srcIn的模式即可：在canvas下层画一个圆，然后将图片画在圆上，取两者的交集并且显示上层，就可以达到圆形图片的效果了。

方法如下：

• 在canvas上画一个圆；
• 调用paint.setXfermode设置为srcIn模式；
• 将要显示的图作为Src画在上面的那个圆上；
• 两次绘图之后叠加起来的效果就是圆形的图片了；

那么能不能先画图片然后画圆，将xfermode设置成destIn呢？试了一下发现不行，这是为什么呢？(用官方的demo调换绘制顺序并且改成destin是可以实现srcin的效果的)

主要原理已经介绍完了，当然除了设置Xfermode的值，还需要考虑其他一些小细节，比如图片和圆的相对位置、图片和view的相对大小等，纯粹就是计算了，也很简单。

具体实现

先贴代码吧。

先在attr.xml中声明两个自定义属性，以支持设置默认图片和初始图片，比如从网络获取一张图片时你可能需要一张默认图片显示，就可以设置默认图片了，代码如下

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="image" format="reference" />
    <attr name="defaultImage" format="reference" />

    <declare-styleable name="CircleImageView">
        <attr name="image" />
        <attr name="defaultImage" />
    </declare-styleable>

</resources>

然后在布局文件中声明xml命名空间，如下

 xmlns:circleImage="http://schemas.android.com/apk/res-auto"

接下来就可以使用自定义属性了

<com.passerby.androidadvanced.circleimage.xfermode.CircleImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        circleImage:defaultImage="@drawable/image"/>

CircleImageView源码如下：

package com.passerby.androidadvanced.circleimage.xfermode;

import com.passerby.circleimage.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by mac on 16/2/1.
 */
public class CircleImageView extends View {

    private Paint mPaint;
    private Bitmap mSrcBitmap;
    private Bitmap mDefaultBitmap;

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

    public CircleImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyleAttr, 0);
        int count = a.getIndexCount();
        for (int i = 0; i < count; i++) {
            int resId;
            int index = a.getIndex(i);
            switch (index) {
                case R.styleable.CircleImageView_defaultImage:
                    resId = a.getResourceId(index, 0);
                    mDefaultBitmap = BitmapFactory.decodeResource(getResources(), resId);
                    break;
                case R.styleable.CircleImageView_image:
                    resId = a.getResourceId(index, 0);
                    mSrcBitmap = BitmapFactory.decodeResource(getResources(), resId);
                    break;
            }
        }
        a.recycle();

        if (null == mSrcBitmap) {

            mSrcBitmap = mDefaultBitmap;
        }

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        //取宽、高中的较小值
        int min = width > height ? height : width;
        if (null != mSrcBitmap) {

            canvas.drawBitmap(createCircleBitmap(mSrcBitmap, min), 0, 0, mPaint);   
        }
    }

    /***
     * 将传入的bitmap转换成圆的正方形图片
     *
     * @param bitmap
     * @param min    目标bitmap的高
     * @return
     */
    private Bitmap createCircleBitmap(Bitmap bitmap, int min) {

        Paint paint = new Paint();
        paint.setAntiAlias(true);

        final int tWidth = getMeasuredWidth();
        final int tHeight = getMeasuredHeight();
        //创建一个新的bitmap，大小跟imageview一样
        Bitmap target = Bitmap.createBitmap(tWidth, tHeight, Bitmap.Config.ARGB_8888);        
        //下面所有的绘图操作均在这个target上面完成
        Canvas canvas = new Canvas(target);

        //1.画圆形
        //计算圆的圆心在imageview中的坐标
        int halfWidth = tWidth >> 1;
        int halfHeight = tHeight >> 1;
        //得到圆的半径
        int radius = min;
        //画圆
        canvas.drawCircle(halfWidth, halfHeight, radius >> 1, paint);

        //2.设置Xfermode
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        //3.画图片
        //将图片画在imageview居中的位置
        Rect srcRect = new Rect(0, 0, mSrcBitmap.getWidth(), mSrcBitmap.getHeight());
        int offsetX = (tWidth - min) >> 1;
        int offsetY = (tHeight - min) >> 1;
        Rect dstRect = new Rect(offsetX, offsetY, offsetX + min, offsetY + min);
        canvas.drawBitmap(bitmap, srcRect, dstRect, paint);

        return target;
    }

    public void setImage(int resId) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resId);
        setImage(bitmap);
    }

    public void setImage(Bitmap bitmap) {

        mSrcBitmap = bitmap;
        invalidate();
    }
}

代码第37~53行是获取属性，得到用户指定的默认图片和直接显示的图片。

55~58行，如果用户没有指定直接显示的图片，就使用默认图片。

67~70行，获取控件宽和高中的较小值min，因为要显示圆形图片，所以要以min作为那个圆的直径。

71~74行，画圆形图片。createCircleBitmap()方法是核心，主要注释都写好了，就不多提了。

对于上面代码实现的思路，是直接继承View然后将图片弄成圆形画出来，这种方法适合只需要圆形图片的需求，像用户头像之类的。

当然也可以继承ImageView然后在上面盖一个遮罩层，也可以实现圆形ImageView的效果，而且可以同时保留ImageView相关的很多属性。

第二种方法请看这里《 圆形ImageView系列（二）—–Xfermode+ImageView》。