关于Android圆角ImageView的几种实现方式

最新推荐文章于 2024-06-14 18:09:12 发布

小哥xiaog

最新推荐文章于 2024-06-14 18:09:12 发布

阅读量3w

点赞数 7

分类专栏： android

android 专栏收录该内容

164 篇文章 1 订阅

订阅专栏

from: http://www.jianshu.com/p/626dbd93207d

在实际的开发中，我们经常会遇到需要圆角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;
    }
}

只是基本功能的实现，并没有进行更多的扩展，所以如果需要，自给自足即可

运行截图如下

图1 BitmapShader方式

二. 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;
    }
}

图2 PorterDuffXfermode方式

三.ClipPath方式

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方式

四.选择哪一种？

实现有三种，那选择哪一种最时候呢？less is more,我们当然选择代码量最少的咯，毕竟程序员，偷懒最重要，哈哈，其实没有啦，主要是第二和第一种方式或多或少的都处理了Bitmap和Drawable，自然没有第三种来的安全。

写在后面的几句话

其实实现都不难，主要也是了解下一些绘图用到的类和方法，掌握了各种绘图的类和使用，自定义View什么的都不是问题来着的，我的愿望是世界和平！！！

Refrence

1.Shader相关From AigeStudio

1.PorterDuffXfermode相关From AigeStudio

3.ClipPath相关From AigeStudio

作者：前世小书童
链接：http://www.jianshu.com/p/626dbd93207d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

小哥xiaog

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
关于Android圆角ImageView的几种实现方式

from: http://www.jianshu.com/p/626dbd93207d在实际的开发中，我们经常会遇到需要圆角ImageView的情况，但是这种ImageView官方是没有提供的，所以需要我们去自己重写ImageView来达到圆角的效果，但是实现这种圆角效果其实有几种不同的实现方式，所以这一篇就对不同的实现方式进行讲解，并简单分析。一.BitmapShader方式
复制链接

扫一扫

专栏目录