下载地址：https://github.com/hdodenhof/CircleImageView.git
使用CircleImageView控件可以非常轻松的实现类似于圆形头像的处理，只需要简单的配置一下xml文件就可以了,如下：
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
~ so，它的实现原理又是什么样子的呢？下面就从源码中找到答案。
- 继承关系
对于分析一个view，第一步是比较容易忽略的部分，那就是查看这个类的继承关系
public class CircleImageView extends ImageView
CircleImageView继承自ImageView，那么它就具有了ImageView的功能：显示图像。
- 构造函数
第二步就是看这个view的构造函数，在构造函数中可以看到view所需要的一些基本变量的初始化和xml中使用的属性的值
public CircleImageView(Context context) {
super(context);
init();
}
public CircleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_civ_border_width, DEFAULT_BORDER_WIDTH);
mBorderColor = a.getColor(R.styleable.CircleImageView_civ_border_color, DEFAULT_BORDER_COLOR);
mBorderOverlay = a.getBoolean(R.styleable.CircleImageView_civ_border_overlay, DEFAULT_BORDER_OVERLAY);
mFillColor = a.getColor(R.styleable.CircleImageView_civ_fill_color, DEFAULT_FILL_COLOR);
a.recycle();
init();
}
代码足够简单，他通过这段构造函数，可以清晰的看到xml可以处理的4个自定义的属性，分别是：civ_border_width,civ_border_color,civ_border_overlay,civ_fill_color.再处理完属性之后调用了init（）初始化方法，再来看看这个方法。
private void init() {
super.setScaleType(SCALE_TYPE);
mReady = true;
if (mSetupPending) {
setup();
mSetupPending = false;
}
}
init方法中，默认设置了scaleType为ScaleType.CENTER_CROP,是图片截取居中部分显示。初始状态下的mSetupPending为false，后面的setup（）方法在这一步不执行，暂时略过。
- onSizeChanged
一般来说，应该是分析onMeasure中的方法，但是CircleImageView没有重写该方法，也就不分析了。直接看到onSizeChanged（）方法
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
setup();
}
还是调到了setup（）方法，那么来看看这个方法吧
private void setup() {
if (!mReady) {
mSetupPending = true;
return;
}
if (getWidth() == 0 && getHeight() == 0) {
return;
}
if (mBitmap == null) {
invalidate();
return;
}
//设置图片的paint
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setShader(mBitmapShader);
//设置边框的paint
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setAntiAlias(true);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
//设置填充色的paint
mFillPaint.setStyle(Paint.Style.FILL);
mFillPaint.setAntiAlias(true);
mFillPaint.setColor(mFillColor);
mBitmapHeight = mBitmap.getHeight();
mBitmapWidth = mBitmap.getWidth();
mBorderRect.set(calculateBounds());
mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2.0f, (mBorderRect.width() - mBorderWidth) / 2.0f);
mDrawableRect.set(mBorderRect);
if (!mBorderOverlay && mBorderWidth > 0) {
mDrawableRect.inset(mBorderWidth - 1.0f, mBorderWidth - 1.0f);
}
mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);
applyColorFilter();
updateShaderMatrix();
invalidate();
}
代码略长，但是结构还是很清晰的。先是分别设置了mBitmapPaint、mBorderPaint、mFillPaint三个变量分别用于处理绘制图像，绘制边框，绘制填充色。这里特别需要注意的就是mBitmapShader，这个shader指定了绘制的bitmap来源是mBitmap，相当于paint在draw的时候，绘制的就是mBitmap的内容。接着调用了一个calculateBounds（）方法，这个方法干嘛的呢？上代码
private RectF calculateBounds() {
int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int sideLength = Math.min(availableWidth, availableHeight);
float left = getPaddingLeft() + (availableWidth - sideLength) / 2f;
float top = getPaddingTop() + (availableHeight - sideLength) / 2f;
return new RectF(left, top, left + sideLength, top + sideLength);
}
代码逻辑也很清晰，获取view中最大正方形，并且计算好它的位置，使它居中显示。接着上面的代码来看，将计算好的rect赋值给mBorderRect，这个rect包含了绘制border时候需要用到的中心点。接着计算出mBorderRadius也就是边框的半径，这个有个需要注意的地方，边框的strokeWidth是不包含在radius中的，所有整个border绘制的区域是在(mBorderRect.height() - mBorderWidth) / 2.0f ~(mBorderRect.height() +mBorderWidth) / 2.0f之间。接着设置了图片的mDrawableRadius半径，最后调用了updateShaderMatrix()这个方法之后，重绘view。来看看updateShaderMatrix（）这个方法
private void updateShaderMatrix() {
float scale;
float dx = 0;
float dy = 0;
mShaderMatrix.set(null);
if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
scale = mDrawableRect.height() / (float) mBitmapHeight;
dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
} else {
scale = mDrawableRect.width() / (float) mBitmapWidth;
dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
}
mShaderMatrix.setScale(scale, scale);
mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
mBitmapShader.setLocalMatrix(mShaderMatrix);
}
这个函数是用来处理图片的缩放和位移的。我们需要显示的图片是一个正方形的，但是由于图片的比例可以是各式各样的，所以需要缩放图片，这个功能同样是通过之前我们设置的mBitmapShader控制的。我们的目标是设置缩放原始的bitmap的大小到给出的rect的大小，所以当height的缩放比大于width的缩放比的时候，scale取height的缩放比，同时使宽度左移居中，也就是dx，反之设置缩放比为width的缩放比也是一样。在setup的最后一步，调用的invalidate（）方法，那么这就触发了onDraw（）方法。
- onDraw（）方法
@Override
protected void onDraw(Canvas canvas) {
if (mDisableCircularTransformation) {
super.onDraw(canvas);
return;
}
if (mBitmap == null) {
return;
}
if (mFillColor != Color.TRANSPARENT) {
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mFillPaint);
}
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mBitmapPaint);
if (mBorderWidth > 0) {
canvas.drawCircle(mBorderRect.centerX(), mBorderRect.centerY(), mBorderRadius, mBorderPaint);
}
}
这个方法就是最终设置圆形的地方。如果背景色不是透明的画，画一个底色的圆形。接着画我们的bitmap，最后是画圆形border。这样一个圆形的头像就显示出来了。
总结
- BitmapShader的使用
- 处理图像的居中显示
网友评论