android ImageView圓形的圖片自定義教程
android ImageView圓形的圖片自定義教程
ImageView 是android提供的一個(gè)圖片展示控件,常見的形狀是都是矩形的,我們?cè)趹?yīng)用中往往看到都是圓形的圖片,那么如何實(shí)現(xiàn)呢?下面學(xué)習(xí)啦小編告訴你!
android ImageView圓形的圖片自定義教程
首先,新建一個(gè)android項(xiàng)目,名稱為CircleImageView,其余參數(shù)可以自己設(shè)置,點(diǎn)擊完成生成項(xiàng)目信息。這個(gè)例子中,CircleImageViewShow不用做任何改變
定義一個(gè)CircleImageEx 繼承ImageView,主要功能是改寫onDraw函數(shù)完成,圖片信息的改寫。onDraw函數(shù)的實(shí)現(xiàn):
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
//獲取圖片,轉(zhuǎn)化為Bitmap
Bitmap b = ((BitmapDrawable)drawable).getBitmap();
if(null == b)
{
return;
}
//將圖片轉(zhuǎn)為32位ARGB位圖,保證圖片質(zhì)量
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
// //獲取圖片的寬 高
int w = getWidth(), h = getHeight();
//通過(guò)getCroppedBitmap函數(shù),返回一個(gè)圓形圖片
Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
//在自定義的CircleImageEx上展現(xiàn)
canvas.drawBitmap(roundBitmap, 0,0, null);
}
針對(duì)getCroppedBitmap函數(shù),如何畫出圓形的圖片呢?
public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
Bitmap p;
//判斷圖片的大小與傳入radius是否相等,如果不相等,那么
//將圖片設(shè)置成長(zhǎng) 寬都是radius的圖片
if(bmp.getWidth() != radius || bmp.getHeight() != radius)
p = Bitmap.createScaledBitmap(bmp, radius, radius, false);
else
p = bmp;
//最后輸出的圖片信息
Bitmap output = Bitmap.createBitmap(p.getWidth(),
p.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xffa19774;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, p.getWidth(), p.getHeight());
//畫筆加上 抗鋸齒標(biāo)志,圖像更加平滑
paint.setAntiAlias(true);
//如果該項(xiàng)設(shè)置為true,則圖像在動(dòng)畫進(jìn)行中會(huì)濾掉對(duì)Bitmap圖像的優(yōu)化操作,加快顯示
paint.setFilterBitmap(true);
//防抖動(dòng)
paint.setDither(true);
// 透明色
canvas.drawARGB(0, 0, 0, 0);
//畫筆的顏色
paint.setColor(Color.parseColor("#BAB399"));
//畫出一個(gè)圓形
canvas.drawCircle(p.getWidth() / 2+0.7f, p.getHeight() / 2+0.7f,
p.getWidth() / 2+0.1f, paint);
//設(shè)置兩張圖片相交時(shí)的模式 ,就是在畫布上遮上圓形的圖片信息
paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(p, rect, rect, paint);
return output;
}
其中 paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));
設(shè)置兩張圖片相交時(shí)的模式 我們知道 在正常的情況下,在已有的圖像上繪圖將會(huì)在其上面添加一層新的形狀。 如果新的Paint是完全不透明的,那么它將完全遮擋住下面的Paint; 而setXfermode就可以來(lái)解決這個(gè)問(wèn)題 ,具體的遮擋的效果可以參見下圖
在main.xml中調(diào)用自定義的控件CircleImageEx,
<.cn.CircleImageEx
android:id="@+id/imageView"
android:layout_width="200dip" //定義圖片的寬度
android:layout_height="200dip" //這個(gè)就是定義圖片的高度
android:scaleType="centerInside"
android:src="@drawable/seven" /> //圖片來(lái)源
我們運(yùn)行程序,觀察下結(jié)果,我們先看下原圖片
END
看了“android ImageView圓形的圖片自定義教程”的人還看了
1.android基礎(chǔ)教程視頻:ImageView實(shí)現(xiàn)圖片旋轉(zhuǎn)和縮放