（如果對自定義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， 接下來的項目代碼我都會放在上面，爭取做一個類型工具的庫。
