本篇文章給大家分享的是有關(guān)怎么在Android中利用ImageView將圖片進行圓形、圓角處理，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
10多年的武進網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整武進建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“武進網(wǎng)站設(shè)計”,“武進網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
基本思路是，自定義一個ImageView，通過重寫onDraw方法畫出一個圓形的圖片來：
重慶分公司
重慶分公司
public class ImageViewPlus extends ImageView{
private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mRawBitmap;
private BitmapShader mShader;
private Matrix mMatrix = new Matrix();
public ImageViewPlus(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Bitmap rawBitmap = getBitmap(getDrawable());
if (rawBitmap != null){
int viewWidth = getWidth();
int viewHeight = getHeight();
int viewMinSize = Math.min(viewWidth, viewHeight);
float dstWidth = viewMinSize;
float dstHeight = viewMinSize;
if (mShader == null || !rawBitmap.equals(mRawBitmap)){
mRawBitmap = rawBitmap;
mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
}
if (mShader != null){
mMatrix.setScale(dstWidth / rawBitmap.getWidth(), dstHeight / rawBitmap.getHeight());
mShader.setLocalMatrix(mMatrix);
}
mPaintBitmap.setShader(mShader);
float radius = viewMinSize / 2.0f;
canvas.drawCircle(radius, radius, radius, mPaintBitmap);
} else {
super.onDraw(canvas);
}
}
private Bitmap getBitmap(Drawable drawable){
if (drawable instanceof BitmapDrawable){
return ((BitmapDrawable)drawable).getBitmap();
} else if (drawable instanceof ColorDrawable){
Rect rect = drawable.getBounds();
int width = rect.right - rect.left;
int height = rect.bottom - rect.top;
int color = ((ColorDrawable)drawable).getColor();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
return bitmap;
} else {
return null;
}
}
}分析一下代碼：
canvas.drawCircle 決定了畫出來的形狀是圓形，而圓形的內(nèi)容則是通過 mPaintBitmap.setShader 搞定的。
其中，BitmapShader需要設(shè)置Bitmap填充ImageView的方式(CLAMP：拉伸邊緣, MIRROR：鏡像, REPEAT：整圖重復(fù))。
這里其實設(shè)成什么不重要，因為我們實際需要的是將Bitmap按比例縮放成跟ImageView一樣大，而不是預(yù)置的三種效果。
所以，別忘了 mMatrix.setScale 和 mShader.setLocalMatrix 一起用，將圖片縮放一下。
四、支持邊框
public class ImageViewPlus extends ImageView{
private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mRawBitmap;
private BitmapShader mShader;
private Matrix mMatrix = new Matrix();
private float mBorderWidth = dip2px(15);
private int mBorderColor = 0xFF0080FF;
public ImageViewPlus(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Bitmap rawBitmap = getBitmap(getDrawable());
if (rawBitmap != null){
int viewWidth = getWidth();
int viewHeight = getHeight();
int viewMinSize = Math.min(viewWidth, viewHeight);
float dstWidth = viewMinSize;
float dstHeight = viewMinSize;
if (mShader == null || !rawBitmap.equals(mRawBitmap)){
mRawBitmap = rawBitmap;
mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
}
if (mShader != null){
mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
mShader.setLocalMatrix(mMatrix);
}
mPaintBitmap.setShader(mShader);
mPaintBorder.setStyle(Paint.Style.STROKE);
mPaintBorder.setStrokeWidth(mBorderWidth);
mPaintBorder.setColor(mBorderColor);
float radius = viewMinSize / 2.0f;
canvas.drawCircle(radius, radius, radius - mBorderWidth / 2.0f, mPaintBorder);
canvas.translate(mBorderWidth, mBorderWidth);
canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
} else {
super.onDraw(canvas);
}
}
private Bitmap getBitmap(Drawable drawable){
if (drawable instanceof BitmapDrawable){
return ((BitmapDrawable)drawable).getBitmap();
} else if (drawable instanceof ColorDrawable){
Rect rect = drawable.getBounds();
int width = rect.right - rect.left;
int height = rect.bottom - rect.top;
int color = ((ColorDrawable)drawable).getColor();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
return bitmap;
} else {
return null;
}
}
private int dip2px(int dipVal)
{
float scale = getResources().getDisplayMetrics().density;
return (int)(dipVal * scale + 0.5f);
}
}看代碼中，加邊框?qū)嶋H上就是用實心純色的 Paint 畫了一個圓邊，在此基礎(chǔ)上畫上原來的頭像即可。
需要的注意的地方有三個：
1)、圓框的半徑不是 radius ，而應(yīng)該是 radius - mBorderWidth / 2.0f 。想象著拿著筆去畫線，線其實是畫在右圖中白色圈的位置，只不過它很粗。
2)、在ImageView大小不變的基礎(chǔ)上，頭像的實際大小要比沒有邊框的時候小了，所以 mMatrix.setScale 的時候要把邊框的寬度去掉。
3)、畫頭像Bitmap的時候不能直接 canvas.drawCircle(radius, radius, radius - mBorderWidth, mPaintBitmap) ，這樣你會發(fā)現(xiàn)頭像的右側(cè)和下方邊緣被拉伸了（右圖）
為什么呢？因為 Paint 默認(rèn)是以左上角為基準(zhǔn)開始繪制的，此時頭像的實際區(qū)域是右圖中的紅框，而超過紅框的部分（圓形的右側(cè)和下方），自然被 TileMode.CLAMP效果沿邊緣拉伸了。
所以，需要通過挪動坐標(biāo)系的位置和調(diào)整圓心，才能把頭像畫在正確的區(qū)域（右圖綠框）中。
五、更多玩法 —— 支持xml配置
既然有了邊框，那如果想配置邊框的寬度和顏色該如何是好呢？
基本上兩個思路：
1)、給ImageViewPlus加上set接口，設(shè)置完成之后通過 invalidate(); 重繪一下即可；
2)、在xml里就支持配置一些自定義屬性，這樣用起來會方便很多。
這里重點說一下支持xml配置自定義屬性。
自定義控件要支持xml配置自定義屬性的話，首先需要在 \res\values 里去定義屬性：
