(如果對自定義View不太熟悉,可以查看上篇文章《Android自定義View——基礎(chǔ)知識篇》)
有時(shí)顯示的圖片(如用戶頭像)是圓形或者圓角矩形的,如果我們把每一種形狀的圖片都裁剪成一個(gè)圖片文件,這樣既麻煩也浪費(fèi)空間,所以最好的辦法是通過代碼來設(shè)置圖片的顯示形狀。顯示圖片用到的是ImageView,最簡單的設(shè)置圖片形狀的方法就是在draw()里面通過canvas.clipPath()把畫布裁剪成相應(yīng)形狀,但這種方法有個(gè)很大的缺點(diǎn),就是邊緣鋸齒明顯。
這里我通過BitmapShader來繪制圖片,可以很好地解決鋸齒的問題,將畫筆的渲染器設(shè)置成BitmapShader,則通過畫筆繪制的圖案則以圖片為背景。關(guān)鍵步驟為:
[java]view plaincopy
//?獲取圖片
Bitmap?bitmap?=?Util.getBitmapFromDrawable(getDrawable());
//?設(shè)置圖片渲染器
mBitmapShader?=new BitmapShader(bitmap,?Shader.TileMode.CLAMP,?Shader.TileMode.CLAMP);
//?把渲染器放入畫筆中
mBitmapPaint.setShader(mBitmapShader);
// 在畫布上畫圓,即可繪制出圓形圖片
canvas.drawCircle(cx,?cy,?radius,?mBitmapPaint);
效果如下:
關(guān)鍵代碼:
[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;//?邊框大小,默認(rèn)為0,即無邊框
private int mBorderColor?=?Color.WHITE;//?邊框顏色,默認(rèn)為白色
private int mShape?=?SHAPE_REC;//?形狀,默認(rèn)為直接矩形
private float mRoundRadius?=0;//?矩形的圓角半徑,默認(rèn)為0,即直角矩形
private Paint?mBorderPaint?=newPaint(Paint.ANTI_ALIAS_FLAG);
private RectF?mViewRect?=newRectF();//?imageview的矩形區(qū)域
private RectF?mBorderRect?=newRectF();//?邊框的矩形區(qū)域
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);//?雖然此處會(huì)調(diào)用setImageDrawable,但此時(shí)成員變量還未被正確初始化
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,在執(zhí)行到onDraw()時(shí),背景圖已繪制完成
*?
*?對于ViewGroup,當(dāng)它沒有背景時(shí)直接調(diào)用的是dispatchDraw()方法,?而繞過了draw()方法,
*?當(dāng)它有背景的時(shí)候就調(diào)用draw()方法,而draw()方法里包含了dispatchDraw()方法的調(diào)用,
*/
@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()調(diào)用invalidate(),否則導(dǎo)致繪制異常。(setupBitmapShader()中調(diào)用了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)調(diào)用setImageDrawable時(shí),成員變量還未被正確初始化
if(mBitmapPaint?==null)?{
return;
}
if(mBitmap?==null)?{
invalidate();
return;
}
mBitmapShader?=newBitmapShader(mBitmap,?Shader.TileMode.CLAMP,?Shader.TileMode.CLAMP);
mBitmapPaint.setShader(mBitmapShader);
//?固定為CENTER_CROP,使圖片在view中居中并裁剪
mShaderMatrix.set(null);
//?縮放到高或?qū)挕∨cview的高或?qū)挕∑ヅ?/p>
floatscale?=?Math.max(getWidth()?*?1f?/?mBitmap.getWidth(),?getHeight()?*?1f?/?mBitmap.getHeight());
//?由于BitmapShader默認(rèn)是從畫布的左上角開始繪制,所以把其平移到畫布中間,即居中
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();
}
// 設(shè)置圖片的繪制區(qū)域
private void initRect()?{
mViewRect.top?=0;
mViewRect.left?=0;
mViewRect.right?=?getWidth();//?寬度
mViewRect.bottom?=?getHeight();//?高度
//?邊框的矩形區(qū)域不能等于ImageView的矩形區(qū)域,否則邊框的寬度只顯示了一半
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
相關(guān)代碼我放在了github上:https://github.com/1993hzw/Androids, 接下來的項(xiàng)目代碼我都會(huì)放在上面,爭取做一個(gè)類型工具的庫。