在实际的开发中，我们经常会遇到需要圆角ImageView的情况，但是这种ImageView官方是没有提供的，所以需要我们去自己重写ImageView来达到圆角的效果，但是实现这种圆角效果其实有几种不同的实现方式，所以这一篇就对不同的实现方式进行讲解，并简单分析。
一.BitmapShader方式
首先简单了解下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;
}
}只是基本功能的实现，并没有进行更多的扩展，所以如果需要，自给自足即可
二. PorterDuffXfermode方式
首先得了解下什么是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;
}
}三.ClipPath方式
ClipPath是Canvas提供对画布裁剪的方法之一，除了ClipPath还有clipRect方法，画布裁剪后后面的Canvas操作，都会在对裁剪后的画布进行操作
所以呢，只要绘出一个圆角矩形的路径，然后用ClipPath裁剪，那么得到的画布就是圆角矩形的，那么后面的绘制自然也就是圆角矩形的了，解释很清楚了，直接上代码了，
public class RoundImageView extends ImageView{
float width,height;
private int leftTopRadius;
private int rightTopRadius;
private int leftBottomRadius;
private int rightBottomRadius;
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();
}
private void init(Context context,AttributeSet attrs){
//读取自定义属性
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Round_Angle_Image_View);
radius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_radius,defaultRadius);
leftTopRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_left_top_radius,defaultRadius);
rightTopRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_right_top_radius,defaultRadius);
leftBottomRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_left_bottom_radius,defaultRadius);
rightBottomRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_right_bottom_radius,defaultRadius);
//如果四个角的值没有设置，就用通用的radius
if(leftTopRadius == defaultRadius){
leftTopRadius = radius;
}
if(rightTopRadius == defaultRadius){
rightTopRadius = radius;
}
if(leftBottomRadius == defaultRadius){
leftBottomRadius = radius;
}
if(rightBottomRadius == defaultRadius){
rightBottomRadius = radius;
}
typedArray.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
if (width > 12 && height > 12) {
Path path = new Path();
/*向路径中添加圆角矩形。radii数组定义圆角矩形的四个圆角的x,y半径。radii长度必须为8*/
float rids[] = {leftTopRadius,leftTopRadius,rightTopRadius,rightTopRadius,leftBottomRadius,leftBottomRadius,rightBottomRadius,rightBottomRadius};
path.addRoundRect(new RectF(0,0,width,height),rids,Path.Direction.CW);
canvas.clipPath(path);
}
super.onDraw(canvas);
}
}在attrs文件中添加属性
<!-- 自定义四角矩形ImageView 的四个圆角属性 -->
<declare-styleable name="Round_Angle_Image_View">
<attr name="left_top_radius" format="dimension"/>
<attr name="right_top_radius" format="dimension"/>
<attr name="left_bottom_radius" format="dimension"/>
<attr name="right_bottom_radius" format="dimension"/>
<attr name="radius" format="dimension"/>
</declare-styleable>使用方式
<!-- 四个大小一致的圆角 -->
<com.xxx.xxx.RoundImageView
android:id="@+id/iv_head"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginTop="13dp"
android:scaleType="centerCrop"
roundiv:radius="6dp"
android:src="@mipmap/default_group"
/>
<!-- 其中 roundiv可随意命名， 需要声明命名空间 xmlns:roundiv="http://schemas.android.com/apk/res-auto"-->
<!-- 或只单独某个角为圆角 -->
<com.xxx.xxx.RoundImageView
android:id="@+id/iv_head"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_marginTop="13dp"
android:scaleType="centerCrop"
roundiv:left_top_radius="5dp"
roundiv:right_top_radius="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="@mipmap/default_group"
/>
四.选择哪一种？
实现有三种，那选择哪一种最时候呢？其中前两种抗锯齿效果比较好，但代码稍微复杂一点，第三种抗锯齿效果比较差，但可以自定义四个角的圆角半径。需要的圆角ImageView的四个角大小一致的话，采用第一种即可；想要对四个角进行不同的操作，建议采用第三种。
参考：(177条消息) 关于Android圆角ImageView的几种实现方式_birthmarkqiqi的专栏-CSDN博客_android 圆角imageview
7402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
