写在前面的几句话
<p>
在实际的开发中，我们经常会遇到需要圆角ImageView的情况，但是这种ImageView官方是没有提供的，所以需要我们去自己重写ImageView来达到圆角的效果，但是实现这种圆角效果其实有几种不同的实现方式，所以这一篇就对不同的实现方式进行讲解，并简单分析。
一.BitmapShader方式
<p>
首先简单了解下BitmapShader，BitmapShader是Shader的子类，Shader在三维软件中我们称之为着色器，所以通俗的理解，Shader的作用是给图像着色或者上色，BitmapShader允许我们载入一张图片来给图像着色,具体不做过多的解释，结尾贴出关于Shader的具体使用的文章
所以其实根据上面对于BitmapShader的描述，其实就可以对圆角ImageView有一定的思路了吧，画一个圆角矩形，然后把本来画上去的图像着色到圆角矩形上，这样就实现了圆角的ImageView
思路说了就把代码直接贴上来了，代码注释也很清楚的，不做过多的解释了
public class RoundImageView extends ImageView{
//圆角大小，默认为10
private int mBorderRadius = 10;
private Paint mPaint;
// 3x3 矩阵，主要用于缩小放大
private Matrix mMatrix;
//渲染图像，使用图像为绘制图形着色
private BitmapShader mBitmapShader;
public RoundImageView(Context context) {
this(context, null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mMatrix = new Matrix();
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null){
return;
}
Bitmap bitmap = drawableToBitamp(getDrawable());
mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale = 1.0f;
if (!(bitmap.getWidth() == getWidth() && bitmap.getHeight() == getHeight()))
{
// 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(),
getHeight() * 1.0f / bitmap.getHeight());
}
// shader的变换矩阵，我们这里主要用于放大或者缩小
mMatrix.setScale(scale, scale);
// 设置变换矩阵
mBitmapShader.setLocalMatrix(mMatrix);
// 设置shader
mPaint.setShader(mBitmapShader);
canvas.drawRoundRect(new RectF(0,0,getWidth(),getHeight()), mBorderRadius, mBorderRadius,
mPaint);
}
private Bitmap drawableToBitamp(Drawable drawable)
{
if (drawable instanceof BitmapDrawable)
{
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
// 当设置不为图片，为颜色时，获取的drawable宽高会有问题，所有当为颜色时候获取控件的宽高
int w = drawable.getIntrinsicWidth() <= 0 ? getWidth() : drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight() <= 0 ? getHeight() : drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
}
只是基本功能的实现，并没有进行更多的扩展，所以如果需要，自给自足即可
运行截图如下
图1 BitmapShader方式
二. PorterDuffXfermode方式
<p>
首先得了解下什么是PorterDuffXfermode，PorterDuffXfermode是Xfermode的子类，Xfermode又称为图像混合模式，除了PorterDuffXfermode之外还有其他几个子类分别为AvoidXfermode，PixelXorXfermode，
不做详细的介绍，会在文章后面贴上详细学习的文章，我们要知道的是我们需要用到的，我们通过设置PorterDuffXfermode属性PorterDuff.Mode.SRC_IN来实现需要的效果，那么这个PorterDuff.Mode.SRC_IN是什么意思呢？他的意思是源图像与目标图像相交地方绘制源图像，所以只需要我们把源图像设置为圆角矩形，目标图像绘制源图像，那么经过PorterDuffXfermode的效果就可以达到圆角矩形的效果
这个API因为不支持硬件加速在API 16已经过时了，如果想在高于API 16的机子上测试这玩意，必须现在应用或手机设置中关闭硬件加速
接下来贴上实现的源码，不做解释了，注释写的很清晰了
public class RoundImageView extends ImageView{
private Paint mPaint;
private Xfermode mXfermode;
private int mBorderRadius = 10;
public RoundImageView(Context context) {
this(context, null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null){
return;
}
int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
//画源图像，为一个圆角矩形
canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), mBorderRadius, mBorderRadius,
mPaint);
//设置混合模式
mPaint.setXfermode(mXfermode);
//画目标图像
canvas.drawBitmap(drawableToBitamp(exChangeSize(getDrawable())), 0, 0, mPaint);
// 还原混合模式
mPaint.setXfermode(null);
canvas.restoreToCount(sc);
}
/**
* 图片拉升
*
* @param drawable
* @return
*/
private Drawable exChangeSize(Drawable drawable){
float scale = 1.0f;
scale = Math.max(getWidth() * 1.0f / drawable.getIntrinsicWidth(), getHeight()
* 1.0f / drawable.getIntrinsicHeight());
drawable.setBounds(0, 0, (int) (scale * drawable.getIntrinsicWidth()),
(int) (scale * drawable.getIntrinsicHeight()));
return drawable;
}
private Bitmap drawableToBitamp(Drawable drawable)
{
if (drawable instanceof BitmapDrawable)
{
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
// 当设置不为图片，为颜色时，获取的drawable宽高会有问题，所有当为颜色时候获取控件的宽高
int w = drawable.getIntrinsicWidth() <= 0 ? getWidth() : drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight() <= 0 ? getHeight() : drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
}
图2 PorterDuffXfermode方式
三.ClipPath方式
<p>
ClipPath是Canvas提供对画布裁剪的方法之一，除了ClipPath还有clipRect方法，画布裁剪后后面的Canvas操作，都会在对裁剪后的画布进行操作
所以呢，只要绘出一个圆角矩形的路径，然后用ClipPath裁剪，那么得到的画布就是圆角矩形的，那么后面的绘制自然也就是圆角矩形的了，解释很清楚了，直接上代码了，
public class RoundImageView extends ImageView{
float width,height;
public RoundImageView(Context context) {
this(context, null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
if (Build.VERSION.SDK_INT < 18) {
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
width = getWidth();
height = getHeight();
}
@Override
protected void onDraw(Canvas canvas) {
if (width > 12 && height > 12) {
Path path = new Path();
path.moveTo(12, 0);
path.lineTo(width - 12, 0);
path.quadTo(width, 0, width, 12);
path.lineTo(width, height - 12);
path.quadTo(width, height, width - 12, height);
path.lineTo(12, height);
path.quadTo(0, height, 0, height - 12);
path.lineTo(0, 12);
path.quadTo(0, 0, 12, 0);
canvas.clipPath(path);
}
super.onDraw(canvas);
}
}
图3 ClipPath方式
四.选择哪一种？
<p>
实现有三种，那选择哪一种最时候呢？less is more,我们当然选择代码量最少的咯，毕竟程序员，偷懒最重要，哈哈，其实没有啦，主要是第二和第一种方式或多或少的都处理了Bitmap和Drawable，自然没有第三种来的安全。
写在后面的几句话
<p>
其实实现都不难，主要也是了解下一些绘图用到的类和方法，掌握了各种绘图的类和使用，自定义View什么的都不是问题来着的，我的愿望是世界和平！！！
Refrence
1.PorterDuffXfermode相关From AigeStudio
3.ClipPath相关From AigeStudio
网友评论