一个简单的自定义圆角ImageView

最近在学自定义View的过程，然后想到有个很常用的圆形头像View，想自己动手实现一下，以为自己应该可以实现一个简单的圆角ImageView，真正写起来才发现还有很多知识点不懂。起初的思路是想把图片画上去然后扣个圆出来，然后发现图片画上去了不知道怎么扣，这就很尴尬了。最终实在不行就跟着鸿洋大神的文章实现了一个，文章里的思路是给Paint设置一个BitmapShader看完才发现，卧槽，还能这样。果然是基础不够哇。下面是文章的链接，

https://blog.csdn.net/lmj623565791/article/details/41967509

接下来我在这里做一下思路的总结

1. 继承现有的ImageView

直接继承ImageView的话会有个提示：This custom view should extend android.support.v7.widget.AppCompatImageView，改成继承AppCompatImageView就可以了，主要是为了兼容低版本

2. 添加自定义属性

我们可以在values/attrs.xml中添加自定义属性，然后需要在我们的自定义View的两参数的构造函数中通过TypeArray获取到我们自定义控件属性的值。在布局文件中加上：xmlns:app=“http://schemas.android.com/apk/res-auto”，这样我们就可以使用自己的自定义属性了，其中“app”这个名字是可以随意更换的。

在这个例子中我们添加了两个属性：图片的类型是圆角或圆形（type），圆角大小（borderRadius）

<attr name="borderRadius" format="dimension"/>
<attr name="type">
	<enum name="circle" value="0"/>
	<enum name="round" value="1"/>
</attr>
<declare-styleable name="CircleImageView">
	<attr name="borderRadius"/>
	<attr name="type"/>
</declare-styleable>

3. 重写onMeasure

在onMeasure方法里面，我们调用父类的onMeasure方法，然后对图片类型为圆形时做特殊处理，让图片的宽和高相等

4. 初始化BitmapShader

整个我们的自定义圆角控件的核心就是这个东西了。BitmapShader是什么，简单来说就是着色器，它是shader的子类。我们通过getDrawable()方法获取到图片资源，然后把Drawable转化成Bitmap。然后再初始化我们的BitmapShader，BitmapShader构造方法接收三个参数，第一个是Bitmap，第二三个分别是x，y轴上的铺盖模式（具体解释大家可以百度查一下，在这里我只是说一下简单的思路）。然后我们需要用到Matrix类对我们的BitmapShader进行缩放，然后通过bitmapShader.setLocalMatrix(mMatrix)，设置缩放矩阵。最终通过mPaint.setShader(bitmapShader)，把初始化的BitmapShader注入到我们要用的画笔上

5. 画图

最后，也就是作者最熟练的一步了，画图。判断一下是要画圆形还是圆角矩形，把我们设置好的画笔画上去就好了。

下面是完整的源码：

/**
 * @author: created by linjunhao
 * @date: 2019/4/22 22:57
 * @description: 实现简单的圆角图像
 */
public class CircleImageView extends AppCompatImageView {

    /**
     * 图片类型，圆角或圆形
     */
    private int type;
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;

    /**
     * 圆角大小的默认值
     */
    private static final int BORDER_RADIUS_DEFAULT = 10;

    /**
     * 圆角大小
     */
    private int mBorderRadius;

    /**
     * 圆角半径
     */
    private int mRadius;

    private Paint mBitmapPaint;

    /**
     * 3x3矩阵，主要用于缩小放大
     */
    private Matrix mMatrix;

    /**
     * 渲染图象，使用图像为绘制图形着色
     */
    private BitmapShader mBitmapShader;

    private int mWidth;
    private RectF mRoundRectF;

    public CircleImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mMatrix = new Matrix();
        mBitmapPaint = new Paint();
        mBitmapPaint.setAntiAlias(true);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView);
        /**
         * 获取圆角值，默认为10dp
         */
        mBorderRadius = typedArray.getDimensionPixelOffset(R.styleable.CircleImageView_borderRadius,
                (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, BORDER_RADIUS_DEFAULT, getResources().getDisplayMetrics()));
        /**
         * 获取View类型（默认为圆形）
         */
        type = typedArray.getInt(R.styleable.CircleImageView_type, TYPE_CIRCLE);
        typedArray.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /**
         * 如果类型为圆形，则强制使View的宽高一致，以宽高最小值为准
         */
        if (type == TYPE_CIRCLE) {
            mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
            mRadius = mWidth / 2;
            setMeasuredDimension(mWidth, mWidth);
        }
    }

    /**
     * 初始化BitmapShader
     */
    private void setUpShader() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }
        Bitmap bmp = drawableToBitmap(drawable);
        mBitmapShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        if (type == TYPE_CIRCLE) {
            //获取bitmap宽高的最小值
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
            scale = mWidth * 1.0f / bSize;
        } else if (type == TYPE_ROUND) {
            //如果图片的宽高与view的宽高不匹配，计算出需要缩放的比例
            scale = Math.max(getWidth() * 1.0f / bmp.getWidth(),
                    getHeight() * 1.0f / bmp.getHeight());
        }
        //shader的变换矩阵，我们这里主要用于放大或者缩小
        mMatrix.setScale(scale, scale);
        //设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        //设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }

    /**
     * drawable转bitmap
     * @param drawable
     * @return Bitmap
     */
    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return;
        }
        setUpShader();
        if (type == TYPE_ROUND) {
            canvas.drawRoundRect(mRoundRectF, mBorderRadius, mBorderRadius, mBitmapPaint);
        } else {
            canvas.drawCircle(mRadius, mRadius,mRadius, mBitmapPaint);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        /**
         * 圆角图片范围
         */
        if (type == TYPE_ROUND) {
            mRoundRectF = new RectF(0, 0, getWidth(), getHeight());
        }
    }

    public void setBorderRadius(int borderRadius) {
        int pxVal = dp2px(borderRadius);
        if (this.mBorderRadius != pxVal) {
            this.mBorderRadius = pxVal;
            invalidate();
        }
    }

    /**
     * 改变图片显示效果
     * @param type
     */
    public void setType(int type) {
        if (this.type != type) {
            this.type = type;
            if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE) {
                this.type = TYPE_CIRCLE;
            }
            requestLayout();
        }
    }

    public int dp2px(int dpVal) {
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, getResources().getDisplayMetrics());
    }
}