Android 自定义CircleImageView

android开发中时常用到圆形、圆角的ImageView，网上也有很多现成的轮子，本不应该重复造轮子。但是本着不断学习和进步的决心，今天就来手撸一个圆形、圆角ImageView，且可设置边框颜色、大小。无图无真相，首先我们来看下效果图:

我是效果图

看完效果图，不知道各位看官觉得如何，觉得好那就 just do it ! (就是干！)。

接下来嗯嗯啊啊啊......

嗯得先来个说明

本文标题说的是自定义CircleImageView，但是我们实际干的却是圆形还有圆角矩形。所以我们就不叫CircleImageView，且叫它ShapeImageView，虽然只有两种形状。觉得不合适的可随意修改嘛...

然后我们得知道自定义控件的四步曲：
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
3、重写onMeasure
4、重写onDraw

接下来就正式开干......

一自定义属性

为了感觉高大上，我们的自定义控件还是配上几个自定义属性才像话嘛！！！总共定义了6个自定义属性，分别是边框宽、边框颜色、边框重叠、填充颜色、圆角半径、形状类型。

    <declare-styleable name="ShapeImageView">
        <attr name="siv_border_width" format="dimension"/>
        <attr name="siv_border_color" format="color"/>
        <attr name="siv_border_overlay" format="boolean"/>
        <attr name="siv_fill_color" format="color"/>
        <attr name="siv_round_radius" format="dimension"/>
        <attr name="siv_shape_type">
            <enum name="circle" value="0"/>
            <enum name="round" value="1"/>
        </attr>
    </declare-styleable>

二获取自定义属性

这里得分两步，这第一步就得是继承自我们的ImageView，并重写他的构造方法：

//这里我们让一个、两个参数的构造方法都去调用三个参数的构造方法
public class ShapeImageView extends ImageView {
    public ShapeImageView(Context context) {
        this(context, null); 
    }

    public ShapeImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ShapeImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

没错，这第二步就是获取自定义属性了，因为我们都统一调用的三个参数的构造方法，所以直接在三个参数的构造方法中获取属性：

    public ShapeImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShapeImageView, defStyleAttr, 0);
        mBorderWidth = a.getDimensionPixelSize(R.styleable.ShapeImageView_siv_border_width, DEFAULT_BORDER_WIDTH);
        mBorderColor = a.getColor(R.styleable.ShapeImageView_siv_border_color, DEFAULT_BORDER_COLOR);
        mFillColor = a.getColor(R.styleable.ShapeImageView_siv_fill_color, DEFAULT_FILL_COLOR);
        mBorderOverlay = a.getBoolean(R.styleable.ShapeImageView_siv_border_overlay, DEFAULT_BORDER_OVERLAY);
        mShapeType = a.getInt(R.styleable.ShapeImageView_siv_shape_type, SHAPE_CIRCLE);
        mRoundRadius = a.getDimensionPixelSize(R.styleable.ShapeImageView_siv_round_radius, DEFAULT_ROUND_RADIUS);
        a.recycle();
    }

这里没什么好说的，就是把我们刚才的6个自定义属性值获取出来了，没有值的都赋上默认值。记得最后调用下recycle()，就行了。

三 ShapeImageView之onMeasure

我们这里是继承自ImageView，所以测量的事情就让ImageView去祸祸，这一步我们就这么愉快的完成了。

四 ShapeImageView之onDraw

这一步是最关键的一步了，也是我们的最后一步，完成它就可以看到最终的效果图了。接下来我们就需要把这一步细分成几小步来完成：

获取要绘制的Bitmap

    //从Drawable中取出Bitmap 
    private Bitmap getBitmapFormDrawable() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return null;
        }
        //是BitmapDrawable直接取出Bitmap 
        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }
        try {
            //这里需要对DEFAULT_DRAWABLE_DIMENSION说明：在ColorDrawable中getIntrinsicWidth为-1，所以给了个默认值2
            int dWidth = drawable.getIntrinsicWidth() <= 0 ? DEFAULT_DRAWABLE_DIMENSION : drawable.getIntrinsicWidth();
            int dHeight = drawable.getIntrinsicHeight() <= 0 ? DEFAULT_DRAWABLE_DIMENSION : drawable.getIntrinsicHeight(); 
            //创建Bitmap画布，并绘制出来
            Bitmap bitmap = Bitmap.createBitmap(dWidth, dHeight, BITMAP_CONFIG);
            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;
        }
    }

更新设置

这里需要简单介绍下BitmapShader:

BitmapShader，顾名思义，就是用Bitmap对绘制的图形进行渲染着色，其实就是用图片对图形进行贴图。
BitmapShader构造函数如下所示：
BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)
第一个参数是Bitmap对象，该Bitmap决定了用什么图片对绘制的图形进行贴图。
第二个参数和第三个参数都是Shader.TileMode类型的枚举值，有以下三个取值：CLAMP(拉伸) 、REPEAT(重复) 和 MIRROR(镜像)。

    private void updateSetup() {
        if (mWidth == 0 && mHeight == 0) {
            return;
        }
        if (mBitmap == null) {
            super.invalidate();
            return;
        }
        //设置BitmapShader  使用拉伸模式
        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        //设置BitmapPaint
        mBitmapPaint.setAntiAlias(true);
        mBitmapPaint.setShader(bitmapShader);
        //设置BorderPaint
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setColor(mBorderColor);
        mBorderPaint.setStrokeWidth(mBorderWidth);
        //设置FillPaint
        mFillPaint.setStyle(Paint.Style.FILL);
        mFillPaint.setAntiAlias(true);
        mFillPaint.setColor(mFillColor);
        //将坐标从src复制到这个mContentRect矩形
        mContentRect.set(calculateRect());
        if (!mBorderOverlay && mBorderWidth > 0) {
            //允许边框重叠操作
            mContentRect.inset(mBorderWidth - 0.0f, mBorderWidth - 0.0f);
        }
        if (mShapeType == SHAPE_CIRCLE) {
            //边框半径
            mBorderRadius = Math.min((mContentRect.width() - mBorderWidth) / 2.0f, (mContentRect.height() - mBorderWidth) / 2.0f);
            //内容半径
            mContentRadius = Math.min(mContentRect.width() / 2.0f, mContentRect.height() / 2.0f);
        } else if (mShapeType == SHAPE_ROUND) {
            // TODO: 2017/8/21
        }
        updateMatrix(bitmapShader);
    }

    //计算矩形大小
    private RectF calculateRect() {
        int width = mWidth - getPaddingLeft() - getPaddingRight();
        int height = mHeight - getPaddingTop() - getPaddingBottom();
        int left = getPaddingLeft();
        int top = getPaddingTop();
        return new RectF(left, top, left + width, top + height);
    }

    //更新矩阵（这里使用ImageView CENTER_CROP类似计算 所以我们这个控件也仅支持CENTER_CROP 其他的都不起作用）
    private void updateMatrix(BitmapShader bitmapShader) {
        float scale;
        float dx = 0, dy = 0;
        final int bHeight = mBitmap.getHeight();
        final int bWidth = mBitmap.getWidth();
        final float cWidth = mContentRect.width();
        final float cHeight = mContentRect.height();
        //计算缩放比例 平移距离
        if (bWidth * cHeight > cWidth * bHeight) {
            //宽度比 > 高度比 取高度比缩放
            scale = cHeight / (float) bHeight;
            //计算横向移动距离
            dx = (cWidth - bWidth * scale) * 0.5f;
        } else {
            scale = cWidth / (float) bWidth;
            dy = (cHeight - bHeight * scale) * 0.5f;
        }
        Matrix mMatrix = new Matrix();
        //缩放 平移
        mMatrix.setScale(scale, scale);
        mMatrix.postTranslate(Math.round(dx) + mContentRect.left, Math.round(dy) + mContentRect.left);
        // 设置变换矩阵
        bitmapShader.setLocalMatrix(mMatrix);
    }

接下来需要在onDraw中进行绘制操作：

    @Override
    protected void onDraw(Canvas canvas) {
        if (mBitmap == null) {
            return;
        }
        if (mShapeType == SHAPE_CIRCLE) {
            drawCircle(canvas);
        } else if (mShapeType == SHAPE_ROUND) {
            drawRoundRect(canvas);
        }
    }

    //圆角矩形
    private void drawRoundRect(Canvas canvas) {
        if (mFillColor != Color.TRANSPARENT) {
            canvas.drawRoundRect(mContentRect, mRoundRadius, mRoundRadius, mFillPaint);
        }
        canvas.drawRoundRect(mContentRect, mRoundRadius, mRoundRadius, mBitmapPaint);
        if (mBorderWidth > 0) {
            canvas.drawRoundRect(mContentRect, mRoundRadius, mRoundRadius, mBorderPaint);
        }
    }

    //圆形
    private void drawCircle(Canvas canvas) {
        if (mFillColor != Color.TRANSPARENT) {
            canvas.drawCircle(mContentRect.centerX(), mContentRect.centerY(), mContentRadius, mFillPaint);
        }
        canvas.drawCircle(mContentRect.centerX(), mContentRect.centerY(), mContentRadius, mBitmapPaint);
        if (mBorderWidth > 0) {
            canvas.drawCircle(mContentRect.centerX(), mContentRect.centerY(), mBorderRadius, mBorderPaint);
        }
    }

到这一步，就是万事具备，只欠东风。我们需要在合适的地方来调用getBitmapFormDrawable和updateSteup方法，到现在还没有调用过这两个方法。不卖关子直接贴出代码：

    @Override
    public void invalidate() {
        mBitmap = getBitmapFormDrawable();
        updateSetup();
        super.invalidate();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
        invalidate();
    }

最开始想在setImageDrawable调用这两个方法，在跟踪源码的是否发现，ImageView的大部分设置图片的最终都调用了setImageDrawable方法，但是setImageURI并没有。

可是它们都调用了invalidate方法，而且当参数改变的时候也会调用这个方法。所以在这里获取getBitmapFormDrawable和updateSteup。

最后我们需要在onSizeChanged获取到mWidth 、mHeight 并invalidate，ShapIamgeView就大功告成了。

五代码设置自定义属性

我们发现6个自定义属性只能在xml配置，但是我们想要通过代码改变怎么办呢？其实也很简单，拿自定义边框宽度属性举个例子：

   public void setBorderWidth(int borderWidth) {
        if (mBorderWidth == borderWidth) {
            return;
        }
        mBorderPaint.setColor(mBorderWidth = borderWidth);
        invalidate();
    }

就是这样，我们就可以得到开头效果图一样的运行效果了，上面四部曲注释也很详细了。

最后福利，贴出完整代码(没有通过代码设置自定义属性的方法)：

public class ShapeImageView extends ImageView {
    public static final int SHAPE_CIRCLE = 0;  //圆形
    public static final int SHAPE_ROUND = 1;   //圆角
    private final int DEFAULT_BORDER_WIDTH = 0;
    private final int DEFAULT_ROUND_RADIUS = 0;
    private final int DEFAULT_BORDER_COLOR = Color.BLACK;
    private final int DEFAULT_FILL_COLOR = Color.TRANSPARENT;
    private final boolean DEFAULT_BORDER_OVERLAY = false;
    private final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
    private final int DEFAULT_DRAWABLE_DIMENSION = 2;

    private int mRoundRadius; //圆角
    private int mBorderWidth; //边框宽
    private int mBorderColor; //边框颜色
    private int mFillColor;   //填充颜色
    private boolean mBorderOverlay;  //边框叠加
    private int mShapeType; //形状

    private RectF mContentRect = new RectF();
    private Paint mBorderPaint = new Paint();
    private Paint mBitmapPaint = new Paint();
    private Paint mFillPaint = new Paint();

    private float mContentRadius;
    private float mBorderRadius;
    private Bitmap mBitmap;
    private int mWidth;
    private int mHeight;

    public ShapeImageView(Context context) {
        this(context, null);
    }

    public ShapeImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ShapeImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShapeImageView, defStyleAttr, 0);
        mBorderWidth = a.getDimensionPixelSize(R.styleable.ShapeImageView_siv_border_width, DEFAULT_BORDER_WIDTH);
        mBorderColor = a.getColor(R.styleable.ShapeImageView_siv_border_color, DEFAULT_BORDER_COLOR);
        mFillColor = a.getColor(R.styleable.ShapeImageView_siv_fill_color, DEFAULT_FILL_COLOR);
        mBorderOverlay = a.getBoolean(R.styleable.ShapeImageView_siv_border_overlay, DEFAULT_BORDER_OVERLAY);
        mShapeType = a.getInt(R.styleable.ShapeImageView_siv_shape_type, SHAPE_CIRCLE);
        mRoundRadius = a.getDimensionPixelSize(R.styleable.ShapeImageView_siv_round_radius, DEFAULT_ROUND_RADIUS);
        a.recycle();
    }

    @Override
    public void invalidate() {
        mBitmap = getBitmapFormDrawable();
        updateSetup();
        super.invalidate();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mBitmap == null) {
            return;
        }
        if (mShapeType == SHAPE_CIRCLE) {
            drawCircle(canvas);
        } else if (mShapeType == SHAPE_ROUND) {
            drawRoundRect(canvas);
        }
    }

    //圆角矩形
    private void drawRoundRect(Canvas canvas) {
        if (mFillColor != Color.TRANSPARENT) {
            canvas.drawRoundRect(mContentRect, mRoundRadius, mRoundRadius, mFillPaint);
        }
        canvas.drawRoundRect(mContentRect, mRoundRadius, mRoundRadius, mBitmapPaint);
        if (mBorderWidth > 0) {
            canvas.drawRoundRect(mContentRect, mRoundRadius, mRoundRadius, mBorderPaint);
        }
    }

    //圆形
    private void drawCircle(Canvas canvas) {
        if (mFillColor != Color.TRANSPARENT) {
            canvas.drawCircle(mContentRect.centerX(), mContentRect.centerY(), mContentRadius, mFillPaint);
        }
        canvas.drawCircle(mContentRect.centerX(), mContentRect.centerY(), mContentRadius, mBitmapPaint);
        if (mBorderWidth > 0) {
            canvas.drawCircle(mContentRect.centerX(), mContentRect.centerY(), mBorderRadius, mBorderPaint);
        }
    }

    private void updateSetup() {
        if (mWidth == 0 && mHeight == 0) {
            return;
        }
        if (mBitmap == null) {
            super.invalidate();
            return;
        }
        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mBitmapPaint.setAntiAlias(true);
        mBitmapPaint.setShader(bitmapShader);

        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setColor(mBorderColor);
        mBorderPaint.setStrokeWidth(mBorderWidth);

        mFillPaint.setStyle(Paint.Style.FILL);
        mFillPaint.setAntiAlias(true);
        mFillPaint.setColor(mFillColor);
        //边框
        mContentRect.set(calculateRect());
        if (!mBorderOverlay && mBorderWidth > 0) {
            mContentRect.inset(mBorderWidth - 0.0f, mBorderWidth - 0.0f);
        }
        if (mShapeType == SHAPE_CIRCLE) {
            //边框半径
            mBorderRadius = Math.min((mContentRect.width() - mBorderWidth) / 2.0f, (mContentRect.height() - mBorderWidth) / 2.0f);
            //内容半径
            mContentRadius = Math.min(mContentRect.width() / 2.0f, mContentRect.height() / 2.0f);
        } else if (mShapeType == SHAPE_ROUND) {
            // TODO: 2017/8/21
        }
        updateMatrix(bitmapShader);
    }

    private void updateMatrix(BitmapShader bitmapShader) {
        float scale;
        float dx = 0, dy = 0;
        final int bHeight = mBitmap.getHeight();
        final int bWidth = mBitmap.getWidth();
        final float cWidth = mContentRect.width();
        final float cHeight = mContentRect.height();
        //计算缩放比例 平移距离
        if (bWidth * cHeight > cWidth * bHeight) {
            //宽度比 > 高度比 取高度比缩放
            scale = cHeight / (float) bHeight;
            //计算横向移动距离
            dx = (cWidth - bWidth * scale) * 0.5f;
        } else {
            scale = cWidth / (float) bWidth;
            dy = (cHeight - bHeight * scale) * 0.5f;
        }
        Matrix mMatrix = new Matrix();
        mMatrix.setScale(scale, scale);
        mMatrix.postTranslate(Math.round(dx) + mContentRect.left, Math.round(dy) + mContentRect.left);
        bitmapShader.setLocalMatrix(mMatrix);
    }

    private RectF calculateRect() {
        int width = mWidth - getPaddingLeft() - getPaddingRight();
        int height = mHeight - getPaddingTop() - getPaddingBottom();
        int left = getPaddingLeft();
        int top = getPaddingTop();
        return new RectF(left, top, left + width, top + height);
    }

    private Bitmap getBitmapFormDrawable() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return null;
        }
        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }
        try {
            int dWidth = drawable.getIntrinsicWidth() <= 0 ? DEFAULT_DRAWABLE_DIMENSION : drawable.getIntrinsicWidth();
            int dHeight = drawable.getIntrinsicHeight() <= 0 ? DEFAULT_DRAWABLE_DIMENSION : drawable.getIntrinsicHeight();
            Bitmap bitmap = Bitmap.createBitmap(dWidth, dHeight, BITMAP_CONFIG);
            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;
        }
    }
}

到此......

全剧终！！！

最后编辑于：2017.12.10 02:38:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,372评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,368评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,415评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,157评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,171评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,125评论 1赞 297
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,028评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,887评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,310评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,533评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,690评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,411评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,004评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,659评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,812评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,693评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,577评论 2赞 353

Android 自定义CircleImageView

一 自定义属性

二 获取自定义属性

三 ShapeImageView之onMeasure

四 ShapeImageView之onDraw

五 代码设置自定义属性

推荐阅读更多精彩内容

一自定义属性

二获取自定义属性

五代码设置自定义属性