自定义View（1）--圆形图片、圆角图片的实现
之前说过会将项目中运用的东西抽离出来做一个总结，今天我主要想总结一下圆角和圆形头像问题。由于我们的应用涉及到很多用户头像，如果所有的图像都是方方正正的话，那显得不是很美观，所以设计湿强行要我将头像圆角化处理。好吧，so easy。项目截图我就不想贴了，还是一贯贴demo截图吧，如下：
看着效果还行啊，下面我们就讲讲怎么去实现它。
一、自定义ImageView显示
1.自定义View属性
自定义view，经常会涉及到view的属性问题，很简单，按以下操作你就能轻松实现自定义属性了。首先你得在资源文件里的values目录下，新建一个文件attrs,声明你想自定义的属性。
至于declare-styleable的format,需要了解的同学，可以百度一下，很多文章有介绍哦（点这里查看）。其次，你需要在构造函数去关联这些属性，才能在画图过程中使用到他们。
public CustomImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
if (attrs != null) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.customParams);
isCircle = a.getBoolean(R.styleable.customParams_isCircle, false);
isRoundCorner = a.getBoolean(R.styleable.customParams_isRoundCorner, false);
corner_radius = a.getDimension(R.styleable.customParams_corner_radius, 0);
// 回收TypedArray，以便后面重用
a.recycle();
}
}
/**
* Give back a previously retrieved StyledAttributes, for later re-use.
*/
public void recycle() {
synchronized (mResources.mTmpValue) {
TypedArray cached = mResources.mCachedStyledAttributes;
if (cached == null || cached.mData.length < mData.length) {
mXml = null;
mResources.mCachedStyledAttributes = this;
}
}
}2.图片绘画过程onDraw
这是本篇文章的重点，自定义View你必须去重写onDraw(Canvas canvas)，在其中去实现你所需要的逻辑，代码如下：
@Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
if (defaultWidth == 0) {
defaultWidth = getWidth();
}
if (defaultHeight == 0) {
defaultHeight = getHeight();
}
if (isCircle || isRoundCorner) {// 圆形或圆角
int radius = 0;
radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2;
Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight / 2 - radius, null);
} else {
super.onDraw(canvas);
}
}/**
* 获取裁剪后的圆形图片
*
* @param bmp
* 原图
* @param radius
* 半径
*/
public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
Bitmap scaledSrcBmp;
int diameter = radius * 2;
// 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片
int bmpWidth = bmp.getWidth();
int bmpHeight = bmp.getHeight();
int squareWidth = 0, squareHeight = 0;
int x = 0, y = 0;
Bitmap squareBitmap;
if (bmpHeight > bmpWidth) {// 高大于宽
squareWidth = squareHeight = bmpWidth;
x = 0;
y = (bmpHeight - bmpWidth) / 2;
// 截取正方形图片
squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight);
} else if (bmpHeight < bmpWidth) {// 宽大于高
squareWidth = squareHeight = bmpHeight;
x = (bmpWidth - bmpHeight) / 2;
y = 0;
squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight);
} else {
squareBitmap = bmp;
}
if (squareBitmap.getWidth() != diameter || squareBitmap.getHeight() != diameter) {
scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter, diameter, true);
} else {
scaledSrcBmp = squareBitmap;
}
Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(), scaledSrcBmp.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
Paint paint = new Paint();
Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(), scaledSrcBmp.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
if (isRoundCorner) {
// 画圆角
RectF rectF = new RectF(rect);
float r = corner_radius;
if (corner_radius == 0)
r = radius / 4;// 设置圆角默认值
canvas.drawRoundRect(rectF, r, r, paint);
} else {
// 画圆形图片
canvas.drawCircle(scaledSrcBmp.getWidth() / 2, scaledSrcBmp.getHeight() / 2, scaledSrcBmp.getWidth() / 2, paint);
}
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
bmp = null;
squareBitmap = null;
scaledSrcBmp = null;
return output;
}ok，自定义view显示圆形图片，到这里就结束了。有问题的提出来，大家一起学习哈！
二、自定义Drawable来显示圆形、圆角图片
显示圆形图片还有其他方法，在此顺便学习了别人的博客并介绍下如何使用自定义Drawable。
相对于自定义view，使用Drawable 又有哪些优点呢？
1.自定义Drawable，相比View来说，Drawable属于轻量级的、使用也很简单
2.自定义drawableU性能更加
那么怎么用呢，不说了直接上代码
public class CustomDrawable extends Drawable {
private Paint mPaint;
private int mWidth;
private Bitmap mBitmap;
private RectF rectF;
private int mType = 0;// 0表示正常，1表示圆形，其他表示圆角
private float mRadius = 50;
public CustomDrawable(Bitmap bitmap, int type) {
mBitmap = bitmap;
BitmapShader bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setShader(bitmapShader);
mWidth = Math.min(mBitmap.getWidth(), mBitmap.getHeight());
mType = type;
}
public CustomDrawable setRadius(float radius) {
this.mRadius = radius;
return this;
}
@Override
public void setBounds(int left, int top, int right, int bottom) {
super.setBounds(left, top, right, bottom);
rectF = new RectF(left, top, right, bottom);
}
@Override
public void draw(Canvas canvas) {
if (mType == 1)
canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mPaint);
else {
canvas.drawRoundRect(rectF, mRadius, mRadius, mPaint);
}
}
@Override
public int getIntrinsicWidth() {
return mWidth;
}
@Override
public int getIntrinsicHeight() {
return mWidth;
}
@Override
public void setAlpha(int alpha) {
mPaint.setAlpha(alpha);
}
@Override
public void setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView iv_circle = (ImageView) findViewById(R.id.iv_circle);
ImageView iv_roundcorner = (ImageView) findViewById(R.id.iv_roundcorner);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl1);
iv_circle.setImageDrawable(new CustomDrawable(bitmap, 1));
iv_roundcorner.setImageDrawable(new CustomDrawable(bitmap, 2).setRadius(dip2px(50)));
}
/**
* Dip转Px
*
* @param context
* @param dipValue
* @return
*/
public int dip2px(float dipValue) {
try {
final float scale = getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
} catch (Exception ex) {
ex.printStackTrace();
return 0;
}
}舒口气，自定义圆形、圆角图片就讲到这里了。有问题的可以提出来，大家一起探讨哦。我也是一只边学边记录的菜鸟，欢迎骚扰。
最后感谢一下鸿洋的博客，他写的更好，大伙可以去学学！
Android Xfermode 实战 实现圆形、圆角图片
Android Drawable 那些不为人知的高效用法