用自定义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"/>