Android 完美實現圖片圓角和圓形（對實現進行分析）

時間 2019-11-08

標籤 android 完美實現圖片圓角圓形進行分析欄目 Android 简体版

原文原文鏈接

原本想在網上找個圓角的例子看一看，不盡人意啊，基本都是官方的Demo的那張原理圖，稍後會貼出。因而本身自定義了個View，實現圖片的圓角以及圓形效果。效果圖：html

第一個是原圖，第二個是圓形效果，第三第四設置了不一樣的圓角大小。java

準備改變一個博客的風格，首先給你們講一下原理，讓你們明白了，而後再貼代碼，否則能夠直接看那麼長的代碼也比較痛苦，核心代碼其實就那麼幾行：canvas

核心代碼分析：app

[java] view plain copy ide

/** this
* 根據原圖和變長繪製圓形圖片 spa
* .net
* @param source rest
* @param min code
* @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中效果圖，我們的只是其一：

源碼我們只關心誰先誰後繪製的：

[java] view plain copy

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。

一、自定義屬性：

[html] view plain copy

<?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>

二、構造中獲取自定義的屬性：

[java] view plain copy

/**
* 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();
}