浅谈Android实现圆形头像效果的几种思路和方法_安卓 自定义圆形头像,展示长方形图像

前言

我们在开发的过程中，经常会遇到如下的需求：在界面上展示圆形的用户头像，其实这个需求很普遍并且实现难度也不大，网上也有很多相关的教程，那么本文主要来对几种实现思路和方法进行一次总结，方便以后需要时可以随时查阅。

两个核心方法

对于圆形头像的实现，实际上就是对长方形头像的Bitmap作某些处理，以达到变换成圆形头像的效果。我们自然而然地想到了用Canvas和Paint来处理，利用它们我们能实现很多视觉上的效果。因为Canvas实际上就是一种画布，我们能在上面画出Bitmap再配合其他技术来实现我们的需求。在这里，主要用到了以下两个类：
1、PorterDuffXfermode 图层混合技术，一个Canvas上有多个图层，在不同的图层上绘制不同的图案，然后把不同的图层绘制到同一张Canvas后，由于采用了某个规则来进行图层混合，所以可以得到不同的最终绘制效果。
2、BitmapShader图像渲染器，它是Shader渲染器的一个子类，可以在绘制某一图像的时候，把另一图像同时渲染上去。比如我们绘制一个圆形，同时把方形头像渲染上去，便实现了圆形头像。
以上两个类都可以通过画笔Paint的mPaint.setXfermode()和mPaint.setShader()来调用，只要使用其中一种便能实现圆形头像的效果。
下面，我们利用上述两个方法来实现一下圆形头像。

思路一：从View的角度出发

首先，拿到一个视觉方面的需求时，我们可以考虑是否能从自定义View的角度出发来解决问题，一般通过自定义View都能解决很多视觉方面的需求。简单来说，自定义View的核心无非在于两点：视觉和交互。视觉由onMeasure、onLayout、onDraw这三个方法来完成，而交互则是由dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent等这几个方法来控制，只要处理好这几个方法，我们就能实现形态各异的自定义View了。
那么，回到本文所讨论的问题：实现一个圆形头像需要做些什么呢？
首先，我们需要在onMeasure方法里面对View的宽高做出调整，因为一般圆形头像的宽高都是相等的。
其次，我们需要在onDraw方法内实现圆形头像的逻辑。而实现圆形头像的逻辑，我们首先需要拿到原始头像的图片，我们这里可以直接继承ImageView，以方便我们直接拿到设置到ImageView的图片。拿到Bitmap之后，我们就可以对它进行处理了，我们先来看看代码是怎样实现的。

(1)利用PorterDuffXfermode技术来实现
自定义一个CircleImageView继承自AppCompatImageView：

public class CircleImageView extends AppCompatImageView {

    private int mSize;
    private Paint mPaint;
    private Xfermode mPorterDuffXfermode;

    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);
        init();
    }

    private void init(){
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);

        mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        mSize = Math.min(width,height);  //取宽高的最小值
        setMeasuredDimension(mSize,mSize);    //设置CircleImageView为等宽高
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获取sourceBitmap，即通过xml或者java设置进来的图片
        Drawable drawable = getDrawable();
        if (drawable == null) return;

        Bitmap sourceBitmap = ((BitmapDrawable)getDrawable()).getBitmap();
        if (sourceBitmap != null){
            //对图片进行缩放，以适应控件的大小
            Bitmap bitmap = resizeBitmap(sourceBitmap,getWidth(),getHeight());
            drawCircleBitmapByXfermode(canvas,bitmap);    //(1)利用PorterDuffXfermode实现
            //drawCircleBitmapByShader(canvas,bitmap);    //(2)利用BitmapShader实现
        }
    }

    private Bitmap resizeBitmap(Bitmap sourceBitmap,int dstWidth,int dstHeight){
        int width = sourceBitmap.getWidth();
        int height = sourceBitmap.getHeight();

        float widthScale = ((float)dstWidth) / width;
        float heightScale = ((float)dstHeight) / height;

        //取最大缩放比
        float scale = Math.max(widthScale,heightScale);
        Matrix matrix = new Matrix();
        matrix.postScale(scale,scale);

        return Bitmap.createBitmap(sourceBitmap,0,0,width,height,matrix,true);
    }

    private void drawCircleBitmapByXfermode(Canvas canvas,Bitmap bitmap){
        final int sc = canvas.saveLayer(0,0,getWidth(),getHeight(),null,Canvas.ALL_SAVE_FLAG);
        //绘制dst层
        canvas.drawCircle(mSize / 2,mSize / 2,mSize / 2,mPaint);
        //设置图层混合模式为SRC_IN
        mPaint.setXfermode(mPorterDuffXfermode);
        //绘制src层
        canvas.drawBitmap(bitmap,0,0,mPaint);
        canvas.restoreToCount(sc);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

现在分析一下上面代码实现的逻辑：
①当我们拿到一个Bitmap时，首先要对它进行缩放，因为它大概率上都是不适合我们当前控件的宽高的。上面的resize()方法，这里的缩放利用了Matrix对原始Bitmap进行了等比列缩放生成了一个新的Bitmap，新的Bitmap与控件的宽或者高是相等的，也即是原始Bitmap与控件大小差不多了(至少宽或者高相等)。
②接着，我们来看drawCircleBitmapByXfermode()方法，这里利用了PorterDuffxfermode技术来实现。首先调用canvas.saveLayer方法生成了一个透明的Bitmap，然后绘制dst图层在下面，接着把图层混合模式设置成了SRC_IN模式，表示SRC和DST图层混合后，显示交集的SRC部分。然后绘制SRC层，这样就实现了圆形头像。因为圆形和方形头像的图层混合后，交集部分就是圆形头像的部分了。

(2)利用BitmapShader实现
我们在上面代码的末尾添加多一个方法即可：

    private void drawCircleBitmapByShader(Canvas canvas,Bitmap bitmap){
        BitmapShader shader = new BitmapShader(bitmap,BitmapShader.TileMode.CLAMP,BitmapShader.TileMode.CLAMP);
        mPaint.setShader(shader);
        canvas.drawCircle(mSize / 2,mSize /2 ,mSize / 2,mPaint);
    }
1
2
3
4
5

上面的代码很简单，就是生成一个BitmapShader，然后绑定到画笔Paint上，这样在绘制圆形的同时也会在圆形上渲染出Bitmap了。

我们运行程序，会发现两种方法实现的效果是一样的，都是下面所示：

思路二：从自定义Drawable出发

我们知道，Drawable可以作为ImageView的一个图片来源。Drawable，从名字上来看，就是可绘制的意思，实际上它内部有一个draw(canvas)方法，我们拿到的canvas对象之后，就能在画布上绘制我们想要的东西了，其实核心原理跟上面的差不多，都是通过canvas与paint对一个Bitmap进行绘制的同时，通过渲染器或者通过图层混合技术来实现圆形头像的效果。
我们新建一个CircleImageDrawable继承自Drawable，代码如下：

public class CircleImageDrawable extends Drawable {

    private Bitmap mBitmap;
    private Paint mPaint;
    private BitmapShader mBitmapShader;
    private int mSize;
    private int mRadius;

    private static final String TAG = "CircleImageDrawable";

    public CircleImageDrawable(Bitmap bitmap) {
        this.mBitmap = bitmap;
        mBitmapShader = new BitmapShader(bitmap,Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setShader(mBitmapShader);
        mSize = Math.min(bitmap.getWidth(),bitmap.getHeight());
        mRadius = mSize / 2;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        canvas.drawCircle(mRadius,mRadius,mRadius,mPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public int getIntrinsicWidth() {
        return mSize;
    }

    @Override
    public int getIntrinsicHeight() {
        return mSize;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

在构造方法内，我们就对Paint设置了BitmapShader，跟思路一的代码如出一辙，而使用PorterDuffXfermode的方式则是在draw(canvas)内完成，这里就不再赘述。

思路三：使用Picasso的Transformation来实现

一般我们加载图片的时候，都会使用一个图片加载框架来帮助我们处理加载的异步过程、以及缓存机制等，比如Picass和Glide等都支持很多功能。其实我们在加载的时候，还能添加一个转换器Transformation，对图片进行变换，来实现圆角、高斯模糊等丰富多彩的效果。其核心原理其实也是利用Canvas和Paint，重新绘制一个图片，再加上别的效果，通过这种形式就实现了图形的变换，而实现圆角图片也就很简单了，我们来实践一下吧！
新建一个CircleImageTransformer继承自Transformation，代码如下：

public class CircleImageTransformer implements Transformation {


    @Override
    public Bitmap transform(Bitmap source) {
        //去图片宽高的最小值，变成正方形图片
        int size = Math.min(source.getWidth(),source.getHeight());

        Bitmap bitmap = Bitmap.createBitmap(size,size,source.getConfig());
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();

        BitmapShader shader = new BitmapShader(source,BitmapShader.TileMode.CLAMP,BitmapShader.TileMode.CLAMP);
        paint.setShader(shader);
        paint.setAntiAlias(true);

        float r = size / 2f;
        canvas.drawCircle(r,r,r,paint);
        source.recycle();
        return bitmap;
    }

    @Override
    public String key() {
        return "Circle-Image";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

而使用的时候，可以这样：

Picasso.with(this)
       .load(R.drawable.ic_captain_america)
       .transform(new CircleImageTransformer())
       .into(imageView3);
1
2
3
4

下面，我们来看看上述三个思路所得到的效果是怎样的：

可以看出，三个效果都还不错。

总结

当我们需要对一个Bitmap进行处理，实现不同的效果的时候，首先应该想到利用Canvas和Paint来处理，然后结合Android官方提供的各种库来实现需要的效果。上面三个思路分别从自定义View、自定义Drawable和自定义转换器三个角度来实现圆形头像效果，其核心都是一样的，都是利用了BitmapShader或者PorterDuffXfermode来实现。本文的主要目的是抛砖引玉，给出一个大体的思路和实现方法，但实际上还是有很多可以优化的地方，比如图片压缩裁切、脸部检测等，要完整实现一个圆形头像也还是有不少细节需要注意的，但具体问题具体分析，思路有了，解决问题的方案也就在不远处了。好了，本文到此结束，希望对你有所帮助~