CircleImageView详解与源码分析

一、前言

这篇文章要分析的是来自hdodenhof的CircleImageView，其目标是实现一个圆形图片的展示，并且它还支持设置一个可爱的边框。下面是其 demo 展示的效果。帅气的大叔。

二、库简介

主要是项目主页文档的解读，基础好或者英语还不错的同学可以直接去过一遍原文，毕竟自己的理解才是真正的理解。

原理

(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) 依赖

<code>dependencies {
    ...
    implementation 'de.hdodenhof:circleimageview:2.2.0'
}
/<code>

(2) 在 xml 中使用

<code><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:class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>
/<de.hdodenhof.circleimageview.circleimageview>/<code> 

三、源码分析

构造函数

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

构造函数首先是属性的初始化，这里主要是 mBorderWidth(边框粗细)，mBorderColor(边框颜色)，mBorderOverlay(边框是否覆盖图片)。如果在 xml 中在配置了这 3 个属性，则会用 xml 中的，否则就是默认配置。接着是 init() 方法的调用，对整个绘制环境进行初始化。

init()

<code>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;
        }
    }
/<code>

初始化时限定了 ScaleType 为默认 ScaleType.CENTER_CROP，对于 LOLLIPOP 及以上的平台，还可以通过设置轮廓线来约束View的形状。接下来就是最重要的 setup() 调用。

setup()

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

代码中的注释几乎是一行一行的给出了解释，当然如果不熟悉 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()

<code>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);
    }
/<code>

上面 calculateBounds() 的计算代码，可以以下图的方式来表示。

image.png

假设 padding 都为 0，而又假设置宽高为 8 和 10，那么最后就会得到蓝色区域这个框，也就是矩形的中心区域。

applyColorFilter()

<code>private void applyColorFilter() {
        if (mBitmapPaint != null) {
            mBitmapPaint.setColorFilter(mColorFilter);
        }
    }
/<code>

这个方法非常简单，就是将这个 ColorFilter 设置图片画刷。那么何为 ColorFilter 呢？字面直译就是颜色过滤，其应该理解为一个颜色滤镜。ColorFilter 会与画刷所设置的颜色进行特定的算法运算，从而来改变当前绘制出来的效果。而这种改变不仅仅限于单纯的颜色的改变，还包括饱和度，亮度等。Android 中为我们定义了 3 个非常有用的 ColorFilter，分别是：ColorMatrixColorFilter：矩阵过滤器，通过一个 4 * 5 的颜色矩阵可以达到提高或者减小原色彩的饱和度等LightingColorFilter：亮度过滤器，通过对 RGB 3 个分量分别提高或者减少其分量值，从而达到调整亮度的目的。PorterDuffColorFilter：PorterDuff 过滤器。所谓的 PorterDuff 是一种用定义图像/颜色的组合模式。其名字来由是 Thomas Porter and Tom Duff。他们最初将其发表在论文《Compositing Digital Images》里面，有兴趣的同学可以去拜读一下。

updateShaderMatrix()

<code>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);
    }
/<code>

updateShaderMatrix() 的作用就是构造出一个变换矩阵，以使图片可以按照预期的大小进行缩放，并且展示在指定的位置上。

矩阵在图形图像编程中非常重要，不管是2D还是3D都有着不可或缺的作用。在Android 最基础的 2D 图像中，有前面所提及的 ColorMatrixColorFilter，还有这里的 Matrix ，以及动画变换的内部实现都是用的 Matrix 的变换。

到这里 setup() 就分析完了，其主要的作用就是构造好绘制的环境与所需要的材料，图片画刷，边框画刷，背景画刷。图片的半径，变换矩阵，边框宽度，边框半径等。准备好了这些材料，接下来就是等待系统刷新来调用我们的 onDraw() 了。

onDraw()

<code> @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);
        }
    }
/<code>

onDraw()的实现是非常简单的，先绘制背景，再绘制图片，最后再绘制边框，然后就完成了整个绘制了。其实可以注意到了，这里实现的原理是图片的画刷可以画出一个图片，而 canvas.drawCircle() 可以确定该画出什么形状。那么类似的，只要改变 canvas.drawXXX() 就可以达到绘制出其他形状的图片了。是不是很简单呢。

至此，整个 CircleImageView 都分析完了。里面所涉及到的知识点也做了适当的展开与分析，以帮助我们能更深入的理解其实现的原理。

四、总结

最后，感谢你能读到此文章并读完此文章。希望我的分享能够帮助到你，如果分析的过程中存在错误或者疑问都欢迎留言讨论。最后再简单小结下 CircleImageView 的原理：

(1) 通过 BitmapShader 构造一个可以绘制出图片的画刷

(2) 通过 View 的大小，Padding，边框等计算出图片需要进行变换的变换矩阵

(3) 通过 canvas.drawCircle() 方法绘制出最终需要的圆形图片

閱讀更多 仰簡 的文章

關鍵字: 详解 分析 Android