（如果对自定义View不太熟悉，可以查看上篇文章《Android自定义View——基础知识篇》）
有时显示的图片（如用户头像）是圆形或者圆角矩形的，如果我们把每一种形状的图片都裁剪成一个图片文件，这样既麻烦也浪费空间，所以最好的办法是通过代码来设置图片的显示形状。显示图片用到的是ImageView，最简单的设置图片形状的方法就是在draw()里面通过canvas.clipPath()把画布裁剪成相应形状，但这种方法有个很大的缺点，就是边缘锯齿明显。
这里我通过BitmapShader来绘制图片，可以很好地解决锯齿的问题，将画笔的渲染器设置成BitmapShader，则通过画笔绘制的图案则以图片为背景。关键步骤为：
[java]view plaincopy
// 获取图片
Bitmap bitmap = Util.getBitmapFromDrawable(getDrawable());
// 设置图片渲染器
mBitmapShader =new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
// 把渲染器放入画笔中
mBitmapPaint.setShader(mBitmapShader);
// 在画布上画圆，即可绘制出圆形图片
canvas.drawCircle(cx, cy, radius, mBitmapPaint);
效果如下：
关键代码：
[java]view plaincopy
public class ShapeImageView extends ImageView {
public static int SHAPE_REC =1;// 矩形
public static int SHAPE_CIRCLE =2;// 圆形
public static int SHAPE_OVAL =3;// 椭圆
private float mBorderSize =0;// 边框大小,默认为０，即无边框
private int mBorderColor = Color.WHITE;// 边框颜色，默认为白色
private int mShape = SHAPE_REC;// 形状，默认为直接矩形
private float mRoundRadius =0;// 矩形的圆角半径,默认为０，即直角矩形
private Paint mBorderPaint =newPaint(Paint.ANTI_ALIAS_FLAG);
private RectF mViewRect =newRectF();// imageview的矩形区域
private RectF mBorderRect =newRectF();// 边框的矩形区域
private final Matrix mShaderMatrix =newMatrix();
private Paint mBitmapPaint =newPaint();
private BitmapShader mBitmapShader;
private Bitmap mBitmap;
public ShapeImageView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public ShapeImageView(Context context, AttributeSet attrs,intdefStyle) {
super(context, attrs, defStyle);// 虽然此处会调用setImageDrawable，但此时成员变量还未被正确初始化
init(attrs);
mBorderPaint.setStyle(Style.STROKE);
mBorderPaint.setStrokeWidth(mBorderSize);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setAntiAlias(true);
mBitmapPaint.setAntiAlias(true);
super.setScaleType(ScaleType.CENTER_CROP);// 固定为CENTER_CROP，其他不生效
}
@Override
public void setImageResource(intresId) {
super.setImageResource(resId);
mBitmap = Util.getBitmapFromDrawable(getDrawable());
setupBitmapShader();
}
@Override
public void setImageDrawable(Drawable drawable) {
super.setImageDrawable(drawable);
mBitmap = Util.getBitmapFromDrawable(drawable);
setupBitmapShader();
}
@Override
public void setScaleType(ScaleType scaleType) {
if(scaleType != ScaleType.CENTER_CROP) {
thrownewIllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
}
}
private void init(AttributeSet attrs) {
TypedArray a = getContext().obtainStyledAttributes(attrs,
R.styleable.ShapeImageView);
mShape = a.getInt(R.styleable.ShapeImageView_shape, mShape);
mRoundRadius = a.getDimension(R.styleable.ShapeImageView_round_radius, mRoundRadius);
mBorderSize = a.getDimension(R.styleable.ShapeImageView_border_size, mBorderSize);
mBorderColor = a.getColor(R.styleable.ShapeImageView_border_color, mBorderColor);
a.recycle();
}
/**
* 对于普通的view,在执行到onDraw()时，背景图已绘制完成
*
* 对于ViewGroup,当它没有背景时直接调用的是dispatchDraw()方法, 而绕过了draw()方法，
* 当它有背景的时候就调用draw()方法，而draw()方法里包含了dispatchDraw()方法的调用，
*/
@Override
public void onDraw(Canvas canvas) {
if(getDrawable() !=null) {
if(mShape == SHAPE_CIRCLE) {
canvas.drawCircle(getWidth() /2, getHeight() /2,
Math.min(getWidth(), getHeight()) /2, mBitmapPaint);
}elseif(mShape == SHAPE_OVAL) {
canvas.drawOval(mViewRect, mBitmapPaint);
}else{
canvas.drawRoundRect(mViewRect, mRoundRadius, mRoundRadius, mBitmapPaint);
}
}
if(mBorderSize >0) {// 绘制边框
if(mShape == SHAPE_CIRCLE) {
canvas.drawCircle(mViewRect.right /2, mViewRect.bottom /2,
Math.min(mViewRect.right, mViewRect.bottom) /2- mBorderSize /2, mBorderPaint);
}elseif(mShape == SHAPE_OVAL) {
canvas.drawOval(mBorderRect, mBorderPaint);
}else{
canvas.drawRoundRect(mBorderRect, mRoundRadius, mRoundRadius, mBorderPaint);
}
}
}
@Override
protected void onSizeChanged(intw,inth,intoldw,intoldh) {
super.onSizeChanged(w, h, oldw, oldh);
initRect();
setupBitmapShader();
}
// 不能在onLayout()调用invalidate()，否则导致绘制异常。（setupBitmapShader()中调用了invalidate()）
@Override
protected void onLayout(boolean changed,int left,int top,int right,
intbottom) {
super.onLayout(changed, left, top, right, bottom);
// initRect();
// setupBitmapShader();
}
private void setupBitmapShader() {
// super(context, attrs, defStyle)调用setImageDrawable时,成员变量还未被正确初始化
if(mBitmapPaint ==null) {
return;
}
if(mBitmap ==null) {
invalidate();
return;
}
mBitmapShader =newBitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapPaint.setShader(mBitmapShader);
// 固定为CENTER_CROP,使图片在ｖｉｅｗ中居中并裁剪
mShaderMatrix.set(null);
// 缩放到高或宽 与view的高或宽 匹配
floatscale = Math.max(getWidth() * 1f / mBitmap.getWidth(), getHeight() * 1f / mBitmap.getHeight());
// 由于BitmapShader默认是从画布的左上角开始绘制，所以把其平移到画布中间，即居中
float dx = (getWidth() - mBitmap.getWidth() * scale) /2;
float dy = (getHeight() - mBitmap.getHeight() * scale) /2;
mShaderMatrix.setScale(scale, scale);
mShaderMatrix.postTranslate(dx, dy);
mBitmapShader.setLocalMatrix(mShaderMatrix);
invalidate();
}
// 设置图片的绘制区域
private void initRect() {
mViewRect.top =0;
mViewRect.left =0;
mViewRect.right = getWidth();// 宽度
mViewRect.bottom = getHeight();// 高度
// 边框的矩形区域不能等于ImageView的矩形区域，否则边框的宽度只显示了一半
mBorderRect.top = mBorderSize /2;
mBorderRect.left = mBorderSize /2;
mBorderRect.right = getWidth() - mBorderSize /2;
mBorderRect.bottom = getHeight() - mBorderSize /2;
}
public int getShape() {
return mShape;
}
public void setShape(intshape) {
mShape = shape;
}
public float getBorderSize() {
return mBorderSize;
}
public void setBorderSize(intmBorderSize) {
this.mBorderSize = mBorderSize;
mBorderPaint.setStrokeWidth(mBorderSize);
initRect();
invalidate();
}
public int getBorderColor() {
return mBorderColor;
}
public void setBorderColor(intmBorderColor) {
this.mBorderColor = mBorderColor;
mBorderPaint.setColor(mBorderColor);
invalidate();
}
public float getRoundRadius() {
return mRoundRadius;
}
public void setRoundRadius(float mRoundRadius) {
this.mRoundRadius = mRoundRadius;
invalidate();
}
}
res/values/attrs.xml
[html]view plaincopy
相关代码我放在了github上：https://github.com/1993hzw/Androids， 接下来的项目代码我都会放在上面，争取做一个类型工具的库。
网友评论