实现CirleImageView圆形图片的多种方式

前言

在android开发中，圆形图片一般大部分在头像设置是比较常见的，人的美观或许喜欢圆形，比正方形更加优雅，所以就有了圆形图片的扩展

---

使用

首先这篇文章是让我们如何实现圆形图片的功能 ，分为四个部分：

1. 画圆
2. 自定义imageview
3. 导入第三方开源框架
4. Glide图片处理框架

第一种：

一般要做正圆形图片，只能是正方形的基础上才能实现，否则就变成椭圆了，下面说说如何使长方形的图片生成正圆形图片

 private Bitmap CrileBitmap(Bitmap bitmap) {
        //依据原有图片，重新创建一张新的图片，图片格式发生改变
        Bitmap bitmap2 = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),               Bitmap.Config.ARGB_4444);
        //将图片当作画布的北京
        Canvas canvas = new Canvas(bitmap2);
        //创建画笔，设置抗锯齿
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.BLUE);
        //设置画布填充色
        canvas.drawARGB(0, 0, 0, 0);
        //计算绘制圆的半径
        int mins = Math.min(bitmap.getWidth() / 2, bitmap.getHeight() / 2);
        //根据bitmap的高宽的中心点为圆点和圆的半径画图
        canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, mins, paint);
        //画笔重置
        paint.reset();
        //两个View 重叠的时候 取重叠部分
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //将bitmap在画布上
        canvas.drawBitmap(bitmap, 0, 0, paint);
        return bitmap2;
    }

由于图片是长方形，所以图片的 宽、高 肯定会有一边要小于另一边，要生成正方形就已最小的一边为基准，再来裁切定位另一边的显示范围

第二种

实现思路：

• 在定义View 的onMeasure()方法里设置View的宽高相等，应该取宽高中的最小值。
• 在自定义View的onDraw()里面使用画笔paint结合BitmapShaper画出一个圆形区域。
• 上述两步已经可以实现一个圆形图片，但是如果图片大于View的设定的宽高，则只会绘制左上角的局域，内容显示不完全(如下图)。因此，还应该做好图片的缩放。

讲解1.onMeasure()方法里面，计算好宽高

//因为是圆形图片，所以应该让宽高保持一致，取测量尺寸宽高中的最小值最为最终结果。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //因为是圆形图片，所以应该让宽高保持一致
        int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
        mRadius = size / 2;

        setMeasuredDimension(size, size);
    }

讲解2.onDraw()方法里面画出圆形图片，注意看注释，很详细。

 @Override
    protected void onDraw(Canvas canvas) {

        mPaint = new Paint();
        Bitmap bitmap = drawableToBitmap(getDrawable());

        //初始化BitmapShader，传入bitmap对象
        BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        //计算缩放比例
        mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());

        Matrix matrix = new Matrix();
        matrix.setScale(mScale, mScale);
        bitmapShader.setLocalMatrix(matrix);


        mPaint.setShader(bitmapShader);

        //画圆形，指定好中心点坐标、半径、画笔
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    }

讲解3. 上一步中的将drwable转换为bitmap的方法。

//写一个drawble转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;
    }

具体实现：

新建一个java类 CircleImageView继承 ImageView，这个是完整的代码。

public class CircleImageView extends ImageView {

    private Paint mPaint; //画笔

    private int mRadius; //圆形图片的半径

    private float mScale; //图片的缩放比例

    public CircleImageView(Context context) {
        super(context);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //因为是圆形图片，所以应该让宽高保持一致
        int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
        mRadius = size / 2;

        setMeasuredDimension(size, size);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        mPaint = new Paint();
        Bitmap bitmap = drawableToBitmap(getDrawable());

        //初始化BitmapShader，传入bitmap对象
        BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        //计算缩放比例
        mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());

        Matrix matrix = new Matrix();
        matrix.setScale(mScale, mScale);
        bitmapShader.setLocalMatrix(matrix);


        mPaint.setShader(bitmapShader);

        //画圆形，指定好中心点坐标、半径、画笔
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    }

    //写一个drawble转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;
    }
}

使用该自定义View，选择你想要的照片即可

 <cn.zk.CircleImageView
        android:id="@+id/image1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@mipmap/teshi"
        />

第三种：

Gradle:

dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.2.0'
}

Usage

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"/>

简单介绍源码里的自定义属性：

        //设置边界宽度
        <attr name="civ_border_width" format="dimension" />  
        //设置边界颜色
        <attr name="civ_border_color" format="color" />  
        //默认fasle, true效果会变大 （外边圆环是否压住圆形图片）
        <attr name="civ_border_overlay" format="boolean" />  
        <attr name="civ_fill_color" format="color" />  

方法：

      //设置正常显示图片
        profile_image.setDisableCircularTransformation(true);

第三种方式 github地址

---

总结

实现圆形图片有很多种方法： 1.给要求的图片设计一个圆形（多的话UI会估计拔你电脑）2.自定义一个View 3.自定义绘制图形4.依赖啊，最简单的使用方法，想啥呢，快去使用把！！！！！！！！