Android自定義View——可設(shè)置形狀(圓形、圓角矩形、橢圓)的ImageView,抗鋸齒

(如果對自定義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è)類型工具的庫。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,837評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,196評論 3 414
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,688評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,654評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,456評論 6 406
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,955評論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,044評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,195評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,725評論 1 333
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,608評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,802評論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,318評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,048評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,424評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,762評論 2 372

推薦閱讀更多精彩內(nèi)容