CircleImageView源码分析

下载地址: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的使用
  • 处理图像的居中显示

推荐阅读更多精彩内容