用自定义ImageView绘制圆形头像（学习笔记）

用自定义ImageView绘制圆形头像（学习笔记）

新人学习AS，在尝试使用自定义ImageView绘制圆形图像时，遇到一些问题，特记录下来。其中基础代码主要参考：https://www.cnblogs.com/JczmDeveloper/p/3873043.html
然后加上自己修改的一些部分，最终成果：

话不多说，上代码：
RoundImageView.java

package com.example.tools;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by zhangjing on 2019/6/21
 */
public class RoundImageView extends ImageView {

    private Paint paint;

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
    }

    /**
     * 绘制圆形图片
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        //获取图片
        Drawable drawable = getDrawable();
        if (drawable != null) {
            Bitmap bitmap = drawableToBitmap(drawable);
            Bitmap square = getSquareBitmap(bitmap);
            //将图形转换成圆形
            Bitmap result = getCircleBitmap(square);

            Rect rectSrc = new Rect(0, 0, result.getWidth(),  result.getHeight());
            Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
            paint.reset();
            canvas.drawBitmap(result, rectSrc, rectDes, paint);
        }
    }

    /**
     * 截取正方形,将矩形截取成正方型
     * @param bitmap
     * @return
     */
    private Bitmap getSquareBitmap(Bitmap bitmap) {
        Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        int len = bitmap.getWidth() < bitmap.getHeight() ? bitmap.getWidth() : bitmap.getHeight();
        Rect square = new Rect(0, 0, len, len);
        Bitmap output = Bitmap.createBitmap(len, len, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        canvas.drawRect(square, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, square, paint);
        return output;
    }

    /**
     * 获取圆形图片方法
     * 原理：在画布上先画个正方形，然后在画个内切圆，两者交集就是内切圆
     *
     * @param bitmap
     * @return
     */
    private Bitmap getCircleBitmap(Bitmap bitmap) {
        //先在画布上画上原图大小的矩形
        Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        paint.reset();
        paint.setAntiAlias(true);//抗锯齿

        //再在画布上或个圆圈
        int x = bitmap.getWidth();
        canvas.drawCircle(x / 2, x / 2, x / 2, paint);

        //接下来就是交集的方法很重要没有就不能变成圆形
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //将图像放进去
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }

    /**
     * 将drawable转换成栅格图，即Bitmap
     *
     * @param drawable
     * @return
     */
    private Bitmap drawableToBitmap(Drawable drawable) {
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        //ARGB_8888代表32位ARGB位图
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        //没有下面的canvas，图像无法显示
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);
        //到此依然是原有的图形
        return bitmap;
    }
}

其中：

• 继承ImageView时，AS提示红色波浪线，这个问题不影响run。
• Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();网上有很多这样强转的代码，但是实际运行时会报错，强转失败。解决方法，是drawableToBitmap方法。
• 采用的原理是矩形和内切圆的交集是圆形的原理，参考https://blog.csdn.net/iispring/article/details/50472485
• 优化：考虑到矩形使用原有方法装换，会出bug。先把矩形统一转换成正方形

xml

<com.example.tools.RoundImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@mipmap/ic_launcher"
            android:layout_centerInParent="true"/>