轉載請标明出處：http://blog.csdn.net/lmj623565791/article/details/24555655
本來想在網上找個圓角的例子看一看，不盡人意啊，基本都是官方的Demo的那張原理圖，稍後會貼出。于是自己自定義了個View，實作圖檔的圓角以及圓形效果。效果圖：
第一個是原圖，第二個是圓形效果，第三第四設定了不同的圓角大小。
準備改變一個部落格的風格，首先給大家講一下原理，讓大家明白了，然後再貼代碼，不然可以直接看那麼長的代碼也比較痛苦，核心代碼其實就那麼幾行：
核心代碼分析：
/**
* 根據原圖和變長繪制圓形圖檔
*
* @param source
* @param min
* @return
*/
private Bitmap createCircleImage(Bitmap source, int min)
{
final Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
/**
* 産生一個同樣大小的畫布
*/
Canvas canvas = new Canvas(target);
/**
* 首先繪制圓形
*/
canvas.drawCircle(min / 2, min / 2, min / 2, paint);
/**
* 使用SRC_IN
*/
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
/**
* 繪制圖檔
*/
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
其實主要靠：paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));這行代碼，為什麼呢，我給大家解釋下，SRC_IN這種模式，兩個繪制的效果疊加後取交集展現後圖，怎麼說呢，咱們第一個繪制的是個圓形，第二個繪制的是個Bitmap，于是交集為圓形，展現的是BItmap，就實作了圓形圖檔效果。圓角，其實就是先繪制圓角矩形，是不是很簡單，以後别人再說實作圓角，你就把這一行代碼給他就行了。
從Android的示例中，給大家證明一下：
下面有一張PorterDuff.Mode的16中效果圖，咱們的隻是其一：
源碼咱們隻關心誰先誰後繪制的：
canvas.translate(x, y);
canvas.drawBitmap(mDstB, 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(mSrcB, 0, 0, paint);
paint.setXfermode(null);
canvas.restoreToCount(sc);
可以看出先繪制的Dst,再繪制的Src，最後的展示是SrcIn那個圖：顯示的區域是二者交集，展示的是Src(後者)。和咱們前面結論一緻。效果16種，大家可以自由組合展示不同的效果。
好了，原理和核心代碼解釋完成。下面開始寫自定義View。
1、自定義屬性：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="borderRadius" format="dimension" />
<attr name="type">
<enum name="circle" value="0" />
<enum name="round" value="1" />
</attr>
<attr name="src" format="reference"></attr>
<declare-styleable name="CustomImageView">
<attr name="borderRadius" />
<attr name="type" />
<attr name="src" />
</declare-styleable>
</resources>
2、構造中擷取自定義的屬性：
/**
* TYPE_CIRCLE / TYPE_ROUND
*/
private int type;
private static final int TYPE_CIRCLE = 0;
private static final int TYPE_ROUND = 1;
/**
* 圖檔
*/
private Bitmap mSrc;
/**
* 圓角的大小
*/
private int mRadius;
/**
* 控件的寬度
*/
private int mWidth;
/**
* 控件的高度
*/
private int mHeight;
public CustomImageView(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}
public CustomImageView(Context context)
{
this(context, null);
}
/**
* 初始化一些自定義的參數
*
* @param context
* @param attrs
* @param defStyle
*/
public CustomImageView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomImageView_src:
mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
break;
case R.styleable.CustomImageView_type:
type = a.getInt(attr, 0);// 預設為Circle
break;
case R.styleable.CustomImageView_borderRadius:
mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
getResources().getDisplayMetrics()));// 預設為10DP
break;
}
}
a.recycle();
}
3、onMeasure中擷取控件寬高：
/**
* 計算控件的高度和寬度
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/**
* 設定寬度
*/
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);
if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
{
mWidth = specSize;
} else
{
// 由圖檔決定的寬
int desireByImg = getPaddingLeft() + getPaddingRight()
+ mSrc.getWidth();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
mWidth = Math.min(desireByImg, specSize);
} else
mWidth = desireByImg;
}
/***
* 設定高度
*/
specMode = MeasureSpec.getMode(heightMeasureSpec);
specSize = MeasureSpec.getSize(heightMeasureSpec);
if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
{
mHeight = specSize;
} else
{
int desire = getPaddingTop() + getPaddingBottom()
+ mSrc.getHeight();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
mHeight = Math.min(desire, specSize);
} else
mHeight = desire;
}
setMeasuredDimension(mWidth, mHeight);
}
4、根據Type繪制：
/**
* 繪制
*/
@Override
protected void onDraw(Canvas canvas)
{
switch (type)
{
// 如果是TYPE_CIRCLE繪制圓形
case TYPE_CIRCLE:
int min = Math.min(mWidth, mHeight);
/**
* 長度如果不一緻，按小的值進行壓縮
*/
mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
break;
case TYPE_ROUND:
canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
break;
}
}
/**
* 根據原圖和變長繪制圓形圖檔
*
* @param source
* @param min
* @return
*/
private Bitmap createCircleImage(Bitmap source, int min)
{
final Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
/**
* 産生一個同樣大小的畫布
*/
Canvas canvas = new Canvas(target);
/**
* 首先繪制圓形
*/
canvas.drawCircle(min / 2, min / 2, min / 2, paint);
/**
* 使用SRC_IN，參考上面的說明
*/
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
/**
* 繪制圖檔
*/
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
/**
* 根據原圖添加圓角
*
* @param source
* @return
*/
private Bitmap createRoundConerImage(Bitmap source)
{
final Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
Canvas canvas = new Canvas(target);
RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
canvas.drawRoundRect(rect, mRadius, mRadius, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
好了，我就不解析代碼了，自定義View這是第五篇了，，，，寫得好惡心，，，，
各位贊一個或者留個言，算是對我的支援~
源碼點選下載下傳
=========================================簡單修複了一下，在ScrollView以及AdapterView中的headview的顯示異常的bug============
修複後代碼下載下傳：
源碼點選下載下傳
相關博文，同時也推薦使用：
Android Xfermode 實戰 實作圓形、圓角圖檔
Android BitmapShader 實戰 實作圓形、圓角圖檔