CircleImageView详解与源码分析
一、前言
这篇文章要分析的是来自hdodenhof的CircleImageView，其目标是实现一个圆形图片的展示，并且它还支持设置一个可爱的边框。下面是其 demo 展示的效果。帅气的大叔。
image.png
二、库简介
主要是项目主页文档的解读，基础好或者英语还不错的同学可以直接去过一遍原文，毕竟自己的理解才是真正的理解。
原理
(1) 继承自 ImageView，即自定义了 ImageView。
(2) 使用 BitmapShader 来实现圆形绘制，但出于内存优化以及效率的考虑。
a.不会对图片进行复制，即不会有图片的副本。
b.不使用 clipPath，因为其既不支持硬件加速也不支持抗锯齿。
c.不使用setXfermode通过裁剪图片的方式实现，因为那将要绘制 2 次。
限制
(1) 不支持除 CENTER_CROP 之外的 ScaleType，也就是说只支持图片中心裁剪的缩放方式。
(2) 不支持 adjustViewBounds(是否保持原图的长宽比)，当然不支持了，因为其不支持其他的 ScaleType。
(3) 不支持 Picasso or Glide 的动画。不过，话说这 2 个库本身就可以自己实现支持圆形，圆角或者任意形状的图片。
(4) 不支持 TransitionDrawable(渐变)，可能会导致图片混乱。
使用
(1) 依赖
dependencies {
...
implementation 'de.hdodenhof:circleimageview:2.2.0'
}
(2) 在 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"/>
三、源码分析
构造函数
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);
// Look for deprecated civ_fill_color if civ_circle_background_color is not set
if (a.hasValue(R.styleable.CircleImageView_civ_circle_background_color)) {
mCircleBackgroundColor = a.getColor(R.styleable.CircleImageView_civ_circle_background_color,
DEFAULT_CIRCLE_BACKGROUND_COLOR);
} else if (a.hasValue(R.styleable.CircleImageView_civ_fill_color)) {
mCircleBackgroundColor = a.getColor(R.styleable.CircleImageView_civ_fill_color,
DEFAULT_CIRCLE_BACKGROUND_COLOR);
}
a.recycle();
init();
}
构造函数首先是属性的初始化，这里主要是 mBorderWidth(边框粗细)，mBorderColor(边框颜色)，mBorderOverlay(边框是否覆盖图片)。如果在 xml 中在配置了这 3 个属性，则会用 xml 中的，否则就是默认配置。接着是 init() 方法的调用，对整个绘制环境进行初始化。
init()
private void init() {
super.setScaleType(SCALE_TYPE);
mReady = true;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
setOutlineProvider(new OutlineProvider());
}
if (mSetupPending) {
setup();
mSetupPending = false;
}
}
初始化时限定了 ScaleType 为默认 ScaleType.CENTER_CROP，对于 LOLLIPOP 及以上的平台，还可以通过设置轮廓线来约束View的形状。接下来就是最重要的 setup() 调用。
setup()
private void setup() {
// 状态、数据有效性的检查
if (!mReady) {
mSetupPending = true;
return;
}
if (getWidth() == 0 && getHeight() == 0) {
return;
}
if (mBitmap == null) {
invalidate();
return;
}
// 以需要渲染的 bitmap 来构造 BitmapShader
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
// 设置搞锯齿
mBitmapPaint.setAntiAlias(true);
// 设置画笔的 Shader(着色器) 为 BitmapShader
mBitmapPaint.setShader(mBitmapShader);
// 设置边框画笔的样式为 stroke，并设置抗锯齿，画笔颜色，画笔宽度
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setAntiAlias(true);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
// 设置背景画笔的样式为 fill ，并设置抗锯齿，颜色等
mCircleBackgroundPaint.setStyle(Paint.Style.FILL);
mCircleBackgroundPaint.setAntiAlias(true);
mCircleBackgroundPaint.setColor(mCircleBackgroundColor);
mBitmapHeight = mBitmap.getHeight();
mBitmapWidth = mBitmap.getWidth();
// 计算边框的半径
mBorderRect.set(calculateBounds());
// 以较小的那一条边减去画笔宽度为直径，那么除 2 就是半径了
mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2.0f, (mBorderRect.width() - mBorderWidth) / 2.0f);
mDrawableRect.set(mBorderRect);
if (!mBorderOverlay && mBorderWidth > 0) {
// 边框不覆盖并且边框的宽度大于 0 的情况下，留 1 个像素的边框
mDrawableRect.inset(mBorderWidth - 1.0f, mBorderWidth - 1.0f);
}
// 以较小的边为直径
mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);
// 通过 ColorFilter 来设置图片画刷的颜色
applyColorFilter();
// 更新 BitmapShader 的 matrix ，主要作用是作缩放变换
updateShaderMatrix();
// 最后，刷新 View
invalidate();
}
代码中的注释几乎是一行一行的给出了解释，当然如果不熟悉 Shader,ColorFilter,Matrix 这些概念的，可能还是不明白。没关系，这些概念我们适当的展开一下。这里就了解一下Shader，后面会再讲解 ColorFilter 与 Matrix 的相关概念。
Shader 有渲染器，着色器的意思，在图形图像中是一个非常基础的概念。用白话讲，就是我们所期望的某个区域该如何填充，可以填充颜色，也可以填充图片。这就类似于我们在 PPT 或者 Word 中画一个矩形可以填充纯颜色，渐变色，图片等是一个原理。在Android中，系统为我们定义如下 5 个Shader：
BitmapShader：这个简单，也是这里要用到的，就是用图片填充
image.png
ComposeShader：组合 Shader，就是将 2 个 Shader 的效果放在一起进行渲染。当然，这里的组合只能也且是 2 个。
LinearGradient：渐变Shader，是最普通的线性渐变
image.png
RadialGradient：渐变Shader，从中心向四周发散的辐射渐变效果
image.png
SweepGradient：渐变Shader，创建360度颜色旋转渐变效果
image.png
关于 Shader 上面的截图，都是来自于Android中Canvas绘图之Shader使用图文详解，有兴趣的同学可以再进去详细了解。同时也感谢作者的分享。
关于 shader 就了解这么多，最主要是我们要有这么一个认知，那么，再回到 setup() 中来。从 setup() 的实现来看，其主要定义了 3 个画刷，图片画刷，边框画刷以及背景画刷。3 个画刷就确定了它的 3 个功能，圆角图片，边框，背景。我们先进一步分析其内部另外调用的 3 个方法：calculateBounds()，applyColorFilter()，updateShaderMatrix()
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);
}
上面 calculateBounds() 的计算代码，可以以下图的方式来表示。
image.png
假设 padding 都为 0，而又假设置宽高为 8 和 10，那么最后就会得到蓝色区域这个框，也就是矩形的中心区域。
applyColorFilter()
private void applyColorFilter() {
if (mBitmapPaint != null) {
mBitmapPaint.setColorFilter(mColorFilter);
}
}
这个方法非常简单，就是将这个 ColorFilter 设置图片画刷。那么何为 ColorFilter 呢？字面直译就是颜色过滤，其应该理解为一个颜色滤镜。ColorFilter 会与画刷所设置的颜色进行特定的算法运算，从而来改变当前绘制出来的效果。而这种改变不仅仅限于单纯的颜色的改变，还包括饱和度，亮度等。Android 中为我们定义了 3 个非常有用的 ColorFilter，分别是：
ColorMatrixColorFilter：矩阵过滤器，通过一个 4 * 5 的颜色矩阵可以达到提高或者减小原色彩的饱和度等
LightingColorFilter：亮度过滤器，通过对 RGB 3 个分量分别提高或者减少其分量值，从而达到调整亮度的目的。
PorterDuffColorFilter：PorterDuff 过滤器。所谓的 PorterDuff 是一种用定义图像/颜色的组合模式。其名字来由是 Thomas Porter and Tom Duff。他们最初将其发表在论文《Compositing Digital Images》里面，有兴趣的同学可以去拜读一下。
updateShaderMatrix()
private void updateShaderMatrix() {
float scale;
float dx = 0;
float dy = 0;
// 矩阵重置
mShaderMatrix.set(null);
// mDrawableRect 的宽与高是一样的。所以下方是以长边为基准进行缩放比例的计算
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);
// 设置图片的位移，以使它能定位在通过 calculateBounds() 计算出来的区域里面
mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
// 最后送给着色器的局部转换矩阵
mBitmapShader.setLocalMatrix(mShaderMatrix);
}
updateShaderMatrix() 的作用就是构造出一个变换矩阵，以使图片可以按照预期的大小进行缩放，并且展示在指定的位置上。
矩阵在图形图像编程中非常重要，不管是2D还是3D都有着不可或缺的作用。在Android 最基础的 2D 图像中，有前面所提及的 ColorMatrixColorFilter，还有这里的 Matrix ，以及动画变换的内部实现都是用的 Matrix 的变换。
到这里 setup() 就分析完了，其主要的作用就是构造好绘制的环境与所需要的材料，图片画刷，边框画刷，背景画刷。图片的半径，变换矩阵，边框宽度，边框半径等。准备好了这些材料，接下来就是等待系统刷新来调用我们的 onDraw() 了。
onDraw()
@Override
protected void onDraw(Canvas canvas) {
if (mDisableCircularTransformation) {
super.onDraw(canvas);
return;
}
if (mBitmap == null) {
return;
}
// 绘制背景
if (mCircleBackgroundColor != Color.TRANSPARENT) {
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mCircleBackgroundPaint);
}
// 绘制图片
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mBitmapPaint);
// 绘制边框
if (mBorderWidth > 0) {
canvas.drawCircle(mBorderRect.centerX(), mBorderRect.centerY(), mBorderRadius, mBorderPaint);
}
}
onDraw()的实现是非常简单的，先绘制背景，再绘制图片，最后再绘制边框，然后就完成了整个绘制了。其实可以注意到了，这里实现的原理是图片的画刷可以画出一个图片，而 canvas.drawCircle() 可以确定该画出什么形状。那么类似的，只要改变 canvas.drawXXX() 就可以达到绘制出其他形状的图片了。是不是很简单呢。
至此，整个 CircleImageView 都分析完了。里面所涉及到的知识点也做了适当的展开与分析，以帮助我们能更深入的理解其实现的原理。
四、总结
最后，感谢你能读到此文章并读完此文章。希望我的分享能够帮助到你，如果分析的过程中存在错误或者疑问都欢迎留言讨论。最后再简单小结下 CircleImageView 的原理：
(1) 通过 BitmapShader 构造一个可以绘制出图片的画刷
(2) 通过 View 的大小，Padding，边框等计算出图片需要进行变换的变换矩阵
(3) 通过 canvas.drawCircle() 方法绘制出最终需要的圆形图片
