Android CircleImageView 源碼閱讀

CircleImageView

概述

1. initializeBitmap():初始化Bitmap,尺寸等操作,不對CircleImageView的尺寸做操作.
2. updateDimensions():對CircleImageView尺寸,外邊框等計算邏輯
3. 計算完以上屬性後,就調用invalidate()重繪.

主流程

1. 初始化

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);
    mCircleBackgroundColor = a.getColor(R.styleable.CircleImageView_civ_circle_background_color, DEFAULT_CIRCLE_BACKGROUND_COLOR);
    a.recycle();
    init();
}
/**
 * 初始化一些東西
 */
private void init() {
    mInitialized = true;
    // 設置圖片縮放類型, 這個與updateShaderMatrix()中邏輯呼應.
    super.setScaleType(SCALE_TYPE);
    // 下面是對畫筆的基本操作.
    mBitmapPaint.setAntiAlias(true);
    mBitmapPaint.setDither(true);
    mBitmapPaint.setFilterBitmap(true);
    mBitmapPaint.setAlpha(mImageAlpha);
    mBitmapPaint.setColorFilter(mColorFilter);
    mBorderPaint.setStyle(Paint.Style.STROKE);
    mBorderPaint.setAntiAlias(true);
    mBorderPaint.setColor(mBorderColor);
    mBorderPaint.setStrokeWidth(mBorderWidth);
    mCircleBackgroundPaint.setStyle(Paint.Style.FILL);
    mCircleBackgroundPaint.setAntiAlias(true);
    mCircleBackgroundPaint.setColor(mCircleBackgroundColor);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // 設置CircleImageView控件輪廓.
        setOutlineProvider(new OutlineProvider());
    }
}

2. 初始化Bitmap

/**
 * 初始化Bitmap,該方法只涉及更新Bitmap對象以及計算Bitmap縮放比例及其尺寸位置,
 * 對CircleImageView控件本身的尺寸以及畫筆,外環邊框寬等屬性不做改變.
 */
private void initializeBitmap() {
    // 獲取Bitmap
    mBitmap = getBitmapFromDrawable(getDrawable());
    // Bitmap不爲空且Bitmap可以被繪製.
    if (mBitmap != null && mBitmap.isMutable()) {
        mBitmapCanvas = new Canvas(mBitmap);
    } else {
        mBitmapCanvas = null;
    }
    if (!mInitialized) {
        return;
    }
    if (mBitmap != null) {
        // 更新着色器矩陣
        updateShaderMatrix();
    } else {
        mBitmapPaint.setShader(null);
    }
}

3. 計算CircleImageView顯示區域,計算邊界區域

/**
 * 該方法主要作用是計算CircleImageView控件的半徑,外邊框寬度,外邊框半徑等.
 */
private void updateDimensions() {
    // 計算得到的外環矩形設置給mBorderRect對象
    mBorderRect.set(calculateBounds());
    // 計算外環半徑, 其中考慮到了邊框寬度.
    mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2.0f, (mBorderRect.width() - mBorderWidth) / 2.0f);
    // 將外環矩形設置給CircleImageView 顯示區域矩形
    mDrawableRect.set(mBorderRect);
    // 如果不覆蓋邊框,且邊框寬度大於0
    if (!mBorderOverlay && mBorderWidth > 0) {
        // CircleImageView 顯示區域矩形將縮小,空出空間給外邊框使用.
        mDrawableRect.inset(mBorderWidth - 1.0f, mBorderWidth - 1.0f);
    }
    // 獲取CircleImageView控件的半徑距離.
    mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);
    updateShaderMatrix();
}

4. 更新Bitamp着色器矩陣,也就是計算Bitmap縮放,中心點等數據
   • 不論是初始化Bitmap還是修改CircleImageView控件尺寸,都需要更新Bitmap着色器矩陣.

/**
 * 將Bitmap縮小或者放大之後的中心位置移動到CircleImageView圓心位置.
 * 畫圖有助於理解.
 * 短邊縮放至與當前控件直徑一樣.
 */
private void updateShaderMatrix() {
    if (mBitmap == null) {
        return;
    }
    float scale;
    float dx = 0;
    float dy = 0;
    mShaderMatrix.set(null);
    int bitmapHeight = mBitmap.getHeight();
    int bitmapWidth = mBitmap.getWidth();
    // 假如Bitmap寬>高
    if (bitmapWidth * mDrawableRect.height() > mDrawableRect.width() * bitmapHeight) {
        // 得到Bitmap短邊與直徑的比例,整個Bitmap縮放按照該比例來縮放.
        // 縮放後,Bitmap長邊與圓相切.
        scale = mDrawableRect.height() / (float) bitmapHeight;
        // 縮放後Bitmap長邊減去圓直徑除以2得到的就是縮放後Bitmap中心點與圓心點的水平距離.
        // 畫圖很好理解.
        dx = (mDrawableRect.width() - bitmapWidth * scale) * 0.5f;
    } else {
        scale = mDrawableRect.width() / (float) bitmapWidth;
        dy = (mDrawableRect.height() - bitmapHeight * scale) * 0.5f;
    }
    // 按照比例縮放Bitmap
    mShaderMatrix.setScale(scale, scale);
    // 水平移動或者垂直移動Bitmap,使之與圓心座標重合.
    mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
    // 爲着色器添加矩陣配置.
    mRebuildShader = true;
}

5. 繪製

@SuppressLint("CanvasSize")
@Override
protected void onDraw(Canvas canvas) {
    // mDisableCircularTransformation 就會默認原圖, 不會轉爲圓形圖片了.
    if (mDisableCircularTransformation) {
        super.onDraw(canvas);
        return;
    }
    // 繪製純色背景
    if (mCircleBackgroundColor != Color.TRANSPARENT) {
        canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mCircleBackgroundPaint);
    }
    if (mBitmap != null) {
        if (mDrawableDirty && mBitmapCanvas != null) {
            // 如果Drawable失效了, mBitmapCanvas還存在, 那麼重新設置Drawable.
            mDrawableDirty = false;
            Drawable drawable = getDrawable();
            drawable.setBounds(0, 0, mBitmapCanvas.getWidth(), mBitmapCanvas.getHeight());
            drawable.draw(mBitmapCanvas);
        }
        if (mRebuildShader) {
            // 如果着色器重新更新了, 那麼就將更新過的着色器矩陣重新設置.
            mRebuildShader = false;
            BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            bitmapShader.setLocalMatrix(mShaderMatrix);
            mBitmapPaint.setShader(bitmapShader);
        }
        // 繪製圓形Bitmap
        canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mBitmapPaint);
    }
    if (mBorderWidth > 0) {
        // 繪製外圓邊框
        canvas.drawCircle(mBorderRect.centerX(), mBorderRect.centerY(), mBorderRadius, mBorderPaint);
    }
}

次要邏輯

1. Drawable轉Bitmap

/**
 * 通過Drawable資源獲取Bitmap對象
 * @param drawable
 * @return
 */
private Bitmap getBitmapFromDrawable(Drawable drawable) {
    if (drawable == null) {
        return null;
    }
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    }
    try {
        Bitmap bitmap;
        if (drawable instanceof ColorDrawable) {
            bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
        } else {
            bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_
        }
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);
        return bitmap;
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}

2. 設置是否轉換爲圓形圖片

/**
 * 設置是否爲轉換爲圓形圖片
 * @param disableCircularTransformation true 不轉換,爲原圖. false 轉換爲圓形圖片.
 */
public void setDisableCircularTransformation(boolean disableCircularTransformation) {
    if (disableCircularTransformation == mDisableCircularTransformation) {
        return;
    }
    // onDraw()時會判斷mDisableCircularTransformation變量,如果爲ture就直接走父控件onDraw(),不會轉換爲圓形圖片.
    mDisableCircularTransformation = disableCircularTransformation;
    if (disableCircularTransformation) {
        mBitmap = null;
        mBitmapCanvas = null;
        mBitmapPaint.setShader(null);
    } else {
        initializeBitmap();
    }
    invalidate();
}

3. 爲CircleImageView設置輪廓,影響陰影的形狀參考博客

/**
 * 初始化一些東西
 */
private void init() {
    ...
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // 設置CircleImageView控件輪廓.
        setOutlineProvider(new OutlineProvider());
    }
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private class OutlineProvider extends ViewOutlineProvider {
    @Override
    public void getOutline(View view, Outline outline) {
        if (mDisableCircularTransformation) {
            // 如果禁止圖片轉換爲圓形,那麼視圖的輪廓就是默認輪廓.
            ViewOutlineProvider.BACKGROUND.getOutline(view, outline);
        } else {
            // 如果允許轉換爲圓形圖片,
            Rect bounds = new Rect();
            // 取圓形控件外邊框的rect
            mBorderRect.roundOut(bounds);
            // 將輪廓設置爲圓形控件外邊框的輪廓.
            outline.setRoundRect(bounds, bounds.width() / 2.0f);
        }
    }
}

4. 計算事件觸摸點是否在圓形內部

@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (mDisableCircularTransformation) {
        return super.onTouchEvent(event);
    }
    return inTouchableArea(event.getX(), event.getY()) && super.onTouchEvent(event);
}
/**
 * 計算當前觸摸點是否在CircleImageView範圍內, 如果在其中則代表當前觸摸事件被CircleImageView消費了.
 * @param x
 * @param y
 * @return
 */
private boolean inTouchableArea(float x, float y) {
    if (mBorderRect.isEmpty()) {
        return true;
    }
    // Math.pow(a,2):計算a值的平方
    // x - mBorderRect.centerX(): 當前點x座標距離圓心距離.
    // Math.pow(x - mBorderRect.centerX(), 2) + Math.pow(y - mBorderRect.centerY(), 2) :兩直邊的平方和小於或者等於半徑平方和.勾股定理.
    // 就是算當前的點在不在CircleImageView範圍內.
    return Math.pow(x - mBorderRect.centerX(), 2) + Math.pow(y - mBorderRect.centerY(), 2) <= Math.pow(mBorderRadius, 2);
}