Android Canvas使用layer实现圆形头像

一、前言

在开发中遇到这么一个问题。我们app注册时候使用了微博的头像，但是目前微博用户初始头像(未曾设置过头像的时候)返回的是gif格式，而在我们的某个地方的头像显示控件SimpleDraweeView中需要使用圆形特性，但是的Fresco使用中gif图无法实现圆形。网上也有方案，当背景不是纯色，Fresco解决gif不能转圆形问题的终极方案，思路或许可行，但是太过麻烦。然后就考虑使用自定义view实现。过程中发现一个简单的圆形方案，过程用到Canvas的layer知识，在此学习记录下来。

二、Canvas与Layer

• Canvas，即画布。Canvas有一系列简单的操作方法提供，有 平移（translate），旋转（rotate）,缩放（scale），错切（skew），裁剪（clip），保存（save），保存图层(saveLayer)，恢复（restore）,恢复到指定状态(restoreToCount)等。
  关于操作，在这篇文章中讲的很透彻了，我就不一一累述。Canvas的变换
• Layer，即图层。详细了解，参考Canvas的saveLayer理解

三、圆形头像实现思路

利用Xfermode实现只绘制自己想要的区域，即圆形部分。更多在 Android-PorterDuffXfermode的正确使用方式

package com.zii.canvas.layer;

import android.content.Context;
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.RectF;
import android.support.annotation.UiThread;
import android.util.AttributeSet;

import com.facebook.drawee.view.SimpleDraweeView;
import com.zii.canvas.R;

public class GenderAvatarView extends SimpleDraweeView {

    private Paint mDstPaint;
    private Paint mSrcPaint;
    private Paint mOverlayPaint;

    private Bitmap mBitmapFemale;
    private Bitmap mBitmapMale;
    private Bitmap mBitmapGender;

    private RectF mRoundRectF;
    private boolean mIsMale;

    public GenderAvatarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public GenderAvatarView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

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

        mSrcPaint = new Paint();
        mSrcPaint.setAntiAlias(true);
        mSrcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//重点

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

        mBitmapFemale = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.ic_setting_gender_lady);
        mBitmapMale = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.ic_setting_gender_man);

        mRoundRectF = new RectF();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mBitmapGender = mIsMale ? mBitmapMale : mBitmapFemale;
        mBitmapGender = zoomBitmap(mBitmapGender, w, h);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        mRoundRectF.set(0, 0, getWidth(), getHeight());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.saveLayer(mRoundRectF, mDstPaint, Canvas.ALL_SAVE_FLAG);
        canvas.drawRoundRect(mRoundRectF, mRoundRectF.centerX(), mRoundRectF.centerY(), mDstPaint);//dst，圆形区域

        canvas.saveLayer(mRoundRectF, mSrcPaint, Canvas.ALL_SAVE_FLAG);//paint使用src_in模式，与上一次相交保留src显示
        super.onDraw(canvas);//src，头像
        canvas.restore();

        canvas.drawBitmap(mBitmapGender, 0, 0, mOverlayPaint);//overlay
    }

    private Bitmap zoomBitmap(Bitmap src, int dstWidth, int dstHeight) {
        if (src == null || (src.getWidth() == dstWidth && src.getHeight() == dstHeight)) {
            return src;
        }

        return Bitmap.createScaledBitmap(src, dstWidth, dstHeight, true);
    }

    @UiThread
    public void setGender(boolean isMale) {
        this.mIsMale = isMale;
        invalidate();
    }
}

四、后记

emmm，很简单，是不是？同时也解决了fresco的SimpleDraweeView对gif不实现圆形的特性，同时根据我自己需要增加性别圈圈的覆盖物了。