前言
我们在开发的过程中，经常会遇到如下的需求：在界面上展示圆形的用户头像，其实这个需求很普遍并且实现难度也不大，网上也有很多相关的教程，那么本文主要来对几种实现思路和方法进行一次总结，方便以后需要时可以随时查阅。
两个核心方法
对于圆形头像的实现，实际上就是对长方形头像的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);
}
}
现在分析一下上面代码实现的逻辑：
①当我们拿到一个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);
}
上面的代码很简单，就是生成一个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;
}
}
在构造方法内，我们就对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";
}
}
而使用的时候，可以这样：
Picasso.with(this)
.load(R.drawable.ic_captain_america)
.transform(new CircleImageTransformer())
.into(imageView3);
下面，我们来看看上述三个思路所得到的效果是怎样的：
可以看出，三个效果都还不错。
总结
当我们需要对一个Bitmap进行处理，实现不同的效果的时候，首先应该想到利用Canvas和Paint来处理，然后结合Android官方提供的各种库来实现需要的效果。上面三个思路分别从自定义View、自定义Drawable和自定义转换器三个角度来实现圆形头像效果，其核心都是一样的，都是利用了BitmapShader或者PorterDuffXfermode来实现。本文的主要目的是抛砖引玉，给出一个大体的思路和实现方法，但实际上还是有很多可以优化的地方，比如图片压缩裁切、脸部检测等，要完整实现一个圆形头像也还是有不少细节需要注意的，但具体问题具体分析，思路有了，解决问题的方案也就在不远处了。好了，本文到此结束，希望对你有所帮助~
