189 8069 5689
本篇文章给大家分享的是有关怎么在Android中利用ImageView将图片进行圆形、圆角处理，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
10多年的武进网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整武进建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“武进网站设计”,“武进网站推广”以来，每个客户项目都认真落实执行。
基本思路是，自定义一个ImageView，通过重写onDraw方法画出一个圆形的图片来：
public class ImageViewPlus extends ImageView{
private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mRawBitmap;
private BitmapShader mShader;
private Matrix mMatrix = new Matrix();
public ImageViewPlus(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Bitmap rawBitmap = getBitmap(getDrawable());
if (rawBitmap != null){
int viewWidth = getWidth();
int viewHeight = getHeight();
int viewMinSize = Math.min(viewWidth, viewHeight);
float dstWidth = viewMinSize;
float dstHeight = viewMinSize;
if (mShader == null || !rawBitmap.equals(mRawBitmap)){
mRawBitmap = rawBitmap;
mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
}
if (mShader != null){
mMatrix.setScale(dstWidth / rawBitmap.getWidth(), dstHeight / rawBitmap.getHeight());
mShader.setLocalMatrix(mMatrix);
}
mPaintBitmap.setShader(mShader);
float radius = viewMinSize / 2.0f;
canvas.drawCircle(radius, radius, radius, mPaintBitmap);
} else {
super.onDraw(canvas);
}
}
private Bitmap getBitmap(Drawable drawable){
if (drawable instanceof BitmapDrawable){
return ((BitmapDrawable)drawable).getBitmap();
} else if (drawable instanceof ColorDrawable){
Rect rect = drawable.getBounds();
int width = rect.right - rect.left;
int height = rect.bottom - rect.top;
int color = ((ColorDrawable)drawable).getColor();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
return bitmap;
} else {
return null;
}
}
}分析一下代码：
canvas.drawCircle 决定了画出来的形状是圆形，而圆形的内容则是通过 mPaintBitmap.setShader 搞定的。
其中，BitmapShader需要设置Bitmap填充ImageView的方式(CLAMP：拉伸边缘, MIRROR：镜像, REPEAT：整图重复)。
这里其实设成什么不重要，因为我们实际需要的是将Bitmap按比例缩放成跟ImageView一样大，而不是预置的三种效果。
所以，别忘了 mMatrix.setScale 和 mShader.setLocalMatrix 一起用，将图片缩放一下。
四、支持边框
public class ImageViewPlus extends ImageView{
private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mRawBitmap;
private BitmapShader mShader;
private Matrix mMatrix = new Matrix();
private float mBorderWidth = dip2px(15);
private int mBorderColor = 0xFF0080FF;
public ImageViewPlus(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Bitmap rawBitmap = getBitmap(getDrawable());
if (rawBitmap != null){
int viewWidth = getWidth();
int viewHeight = getHeight();
int viewMinSize = Math.min(viewWidth, viewHeight);
float dstWidth = viewMinSize;
float dstHeight = viewMinSize;
if (mShader == null || !rawBitmap.equals(mRawBitmap)){
mRawBitmap = rawBitmap;
mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
}
if (mShader != null){
mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
mShader.setLocalMatrix(mMatrix);
}
mPaintBitmap.setShader(mShader);
mPaintBorder.setStyle(Paint.Style.STROKE);
mPaintBorder.setStrokeWidth(mBorderWidth);
mPaintBorder.setColor(mBorderColor);
float radius = viewMinSize / 2.0f;
canvas.drawCircle(radius, radius, radius - mBorderWidth / 2.0f, mPaintBorder);
canvas.translate(mBorderWidth, mBorderWidth);
canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
} else {
super.onDraw(canvas);
}
}
private Bitmap getBitmap(Drawable drawable){
if (drawable instanceof BitmapDrawable){
return ((BitmapDrawable)drawable).getBitmap();
} else if (drawable instanceof ColorDrawable){
Rect rect = drawable.getBounds();
int width = rect.right - rect.left;
int height = rect.bottom - rect.top;
int color = ((ColorDrawable)drawable).getColor();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
return bitmap;
} else {
return null;
}
}
private int dip2px(int dipVal)
{
float scale = getResources().getDisplayMetrics().density;
return (int)(dipVal * scale + 0.5f);
}
}看代码中，加边框实际上就是用实心纯色的 Paint 画了一个圆边，在此基础上画上原来的头像即可。
需要的注意的地方有三个：
1)、圆框的半径不是 radius ，而应该是 radius - mBorderWidth / 2.0f 。想象着拿着笔去画线，线其实是画在右图中白色圈的位置，只不过它很粗。
2)、在ImageView大小不变的基础上，头像的实际大小要比没有边框的时候小了，所以 mMatrix.setScale 的时候要把边框的宽度去掉。
3)、画头像Bitmap的时候不能直接 canvas.drawCircle(radius, radius, radius - mBorderWidth, mPaintBitmap) ，这样你会发现头像的右侧和下方边缘被拉伸了（右图）
为什么呢？因为 Paint 默认是以左上角为基准开始绘制的，此时头像的实际区域是右图中的红框，而超过红框的部分（圆形的右侧和下方），自然被 TileMode.CLAMP效果沿边缘拉伸了。
所以，需要通过挪动坐标系的位置和调整圆心，才能把头像画在正确的区域（右图绿框）中。
五、更多玩法 —— 支持xml配置
既然有了边框，那如果想配置边框的宽度和颜色该如何是好呢？
基本上两个思路：
1)、给ImageViewPlus加上set接口，设置完成之后通过 invalidate(); 重绘一下即可；
2)、在xml里就支持配置一些自定义属性，这样用起来会方便很多。
这里重点说一下支持xml配置自定义属性。
自定义控件要支持xml配置自定义属性的话，首先需要在 \res\values 里去定义属性：