自定义圆角图片控件（Xfermode方式）

苹果都放弃自己的棱角了。。。

看惯了方方正正的图片，乍一看到圆角图片觉得挺漂亮的。可当满世界都是圆角图片的时候，我又开始怀念那些棱角了~之前仓促的写过一个，今天拿过来又修改了一下，现在贴在这里，以方便以后ctrl+c、ctrl+v~~~~~

一、目标

自定义一个图片控件，有圆形和圆角两种选择。控件的行为和ImageView一致！

二、思路

扩展ImageView控件，重写其onDraw方法。一开始还想重写onMeasure方法，如果显示圆形图片强制宽高相等，没能行得通（代码中会说明）。圆角图片以Xfermode方式实现，关于这个知识点大家可以参考这篇文章《setXfermode属性》。

三、实现

控件类RoundImageView：

/**
* 圆角或者圆形图片控件扩展自ImageView<br/>
* 说明：<br/>
* 1.仅重写了绘制流程，即onDraw()方法<br/>
* 2.如果使用圆形图片需要设置固定的尺寸
* 3.支持普通、圆形、圆角三种样式
* 4.可设置圆角半径  默认是10dp
* 5.无法为背景添加圆角
* Created by 95 on 2016/1/11.
*/
public class RoundImageView extends ImageView
{
private static final String TAG = RoundImageView.class.getSimpleName();
private Paint mPaint;
private WeakReference<Bitmap> mWeakBitmap;

/**
* 图片的类型，圆形or圆角
*/
private int type;
public static final int TYPE_NORMAL = 0;
public static final int TYPE_CIRCLE = 1;
public static final int TYPE_ROUND = 2;

/**
* 圆角大小的默认值
*/
private static final int DEFAULT_RADIUS = 10;
/**
* 圆角的大小
*/
private int mRadius;

public RoundImageView(Context context)
{
this(context, null);
}

public RoundImageView(Context context, AttributeSet attrs)
{
super(context, attrs);

mPaint = new Paint();
mPaint.setAntiAlias(true);

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);

mRadius = a.getDimensionPixelSize(R.styleable.RoundImageView_radius, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_RADIUS, getResources().getDisplayMetrics()));// 默认为10dp
type = a.getInt(R.styleable.RoundImageView_type, TYPE_NORMAL);// 默认为normal
a.recycle();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

/**
* 如果类型是圆形，则强制改变view的宽高一致，以小值为准
* 这种写法是有问题的
* 我们本来是想在正常测量的基础上取最短边
* 可下面的操作插入到了正常执行的流程当中   致使最终的结果出了问题
*/
//        if (type == TYPE_CIRCLE)
//        {
//            int min = Math.min(getMeasuredWidth(), getMeasuredHeight());
//            setMeasuredDimension(min, min);
//        }
}

@Override
protected void onDraw(Canvas canvas)
{
//普通模式  调用原生的绘制方法
if (type == TYPE_NORMAL)
{
super.onDraw(canvas);
return;
}
//如果当前未设置图片  直接返回
if (getDrawable() == null) return;
//在缓存中取出bitmap
Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();
//如果bitmap已经被回收，就重新创建
if (bitmap == null || bitmap.isRecycled())
{
bitmap = createDesiredBitmap(drawableToBitmap(getDrawable()), type, getMeasuredWidth(), getMeasuredHeight(), mRadius);
mWeakBitmap = new WeakReference<Bitmap>(bitmap);
}
//以为我们所有的绘制使用了同一个Paint  所以每次使用之前都要考虑这个状态
mPaint.setXfermode(null);
//把最终结果绘制到画布上
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
}

/**
* 生成圆角图片 使用Xfermode方式
*
* @param src           原图
* @param type          round or circle
* @param desiredWidth  控件的宽
* @param desiredHeight 控件的高
* @param radius        圆角半径
* @return
*/
private Bitmap createDesiredBitmap(Bitmap src, int type, int desiredWidth, int desiredHeight, int radius)
{
Bitmap target = Bitmap.createBitmap(desiredWidth, desiredHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
mPaint.setXfermode(null);
if (TYPE_CIRCLE == type)
{
canvas.drawCircle(desiredWidth * 1.0f / 2, desiredWidth * 1.0f / 2, desiredWidth * 1.0f / 2, mPaint);
} else
{
RectF rectF = new RectF(0.0f, 0.0f, desiredWidth, desiredHeight);
canvas.drawRoundRect(rectF, radius * 1.0f, radius * 1.0f, mPaint);
}
//缩放比例  保证图片的宽和高大于控件的宽和高
float ratio = Math.max(desiredWidth * 1.0f / src.getWidth(), desiredHeight * 1.0f / src.getHeight());
Bitmap tem = getScaledBitmap(src, ratio);
//设置Xfermode
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//保证控件展示的位置即为图片正中间的内容
canvas.drawBitmap(tem, (desiredWidth - tem.getWidth()) * 1.0f / 2, (desiredHeight - tem.getHeight()) * 1.0f / 2, mPaint);
//释放内存
tem.recycle();
return target;
}

/**
* 缩放图片
*
* @param src   原图
* @param ratio 缩放比例
* @return
*/
private Bitmap getScaledBitmap(Bitmap src, float ratio)
{
Matrix matrix = new Matrix();
matrix.setScale(ratio, ratio, 0.0f, 0.0f);
Bitmap target = Bitmap.createBitmap((int) (src.getWidth() * ratio), (int) (src.getHeight() * ratio), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
canvas.drawBitmap(src, matrix, mPaint);
return target;
}

/**
* drawable 转 bitmap
*
* @param drawable
* @return
*/
private Bitmap drawableToBitmap(Drawable drawable)
{
if (drawable instanceof BitmapDrawable)
{
return ((BitmapDrawable) drawable).getBitmap();
}
Bitmap target = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
drawable.draw(canvas);
return target;
}
}

自定义属性：

<declare-styleable name="RoundImageView">
<attr name="type" format="enum">
<enum name="normal" value="0"/>
<enum name="circle" value="1"/>
<enum name="round" value="2"/>
</attr>

<attr name="radius" format="dimension"/>
</declare-styleable>

四、使用

直接在布局文件当中使用：

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">

<!--原图-->
<com.hsji.testptr.widget.RoundImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/lena"/>

<!--圆角效果，圆角半径是15dp-->
<com.hsji.testptr.widget.RoundImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:src="@drawable/lena"
app:radius="15dp"
app:type="round"/>

<!--非正方形圆角效果，圆角半径60dp-->
<com.hsji.testptr.widget.RoundImageView
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:src="@drawable/lena"
app:radius="60dp"
app:type="round"/>

<!--圆形效果-->
<com.hsji.testptr.widget.RoundImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="10dp"
android:src="@drawable/lena"
app:type="circle"/>
</LinearLayout>

下面是效果图：