android 圆角图片的实现和封装

最近被人问起圆角图片的实现,花了一点时间鼓捣了下,下面简单分享下。

完整例子: RoundImage

先上效果图

下面为主要源码,实现了 Picasso 中的 Transformation 接口。

public class RoundCornersTransformation implements Transformation {

    private float mRadius;

    private DrawCornerImage mDrawCornerImage;

    private Paint mPaint;


    public RoundCornersTransformation(float radius, DrawCornerImage drawCornerImage) {
        mRadius = radius;
        mDrawCornerImage = drawCornerImage;
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    @Override
    public Bitmap transform(Bitmap source) {//这里为主要逻辑,原理可以套用在其他地方,比如 Glide
        int width = source.getWidth();
        int height = source.getHeight();
        Bitmap newSource = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(newSource);
        mPaint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        source.recycle();
        //画圆角的逻辑代码,交给 DrawCornerImage 接口的具体实现类
        mDrawCornerImage.drawCornerImage(canvas, mPaint, mRadius, width, height);
        return newSource;
    }

    @Override
    public String key() {
        return RoundCornersTransformation.class.toString();
    }
}

定义 DrawCornerImage 接口将变化的部分抽离出来

public interface DrawCornerImage {
    void drawCornerImage(Canvas canvas, Paint paint,float radius, int right, int bottom);
}

DrawTopCornerImage 为 DrawCornerImage 的一个实现类,负责具体的圆角逻辑:只有顶部为圆角

public class DrawTopCornerImage implements DrawCornerImage {

    @Override
    public void drawCornerImage(Canvas canvas, Paint paint, float radius, int right, int bottom) {
        //绘制一个全部圆角的矩形区域长宽分别为 right 和 bottom
        canvas.drawRoundRect(new RectF(0, 0, right, bottom), radius, radius, paint);
        //绘制一个矩形长宽分别为 right 和  bottom-radius,相当于底部和上面对齐而高度差个 radius, 和上面所绘制的并集,即为图片的可见区域。并集即为上部为圆角而底部是直角的一个区域
        canvas.drawRect(new RectF(0, radius, right, bottom), paint);

    }
}

原理简单来讲,就是所绘制区域的并集为可见区域,注意是并集不是交集。

使用起来还是比较方便的:

Picasso.with(this)
                .load(R.drawable.ic_girl)
                .transform(new RoundCornersTransformation(corner, new DrawTopLeftCornerImage()))// here change draw strategy:DrawAllCornerImage ,DrawBottomCornerImage etc.
                .into(iv);

其他的圆角逻辑可以自行发挥,上面的原理不局限于 Picasso 完全也可以用在 Glide 或则其他地方,结合图片库的封装可以对上面继续进行一次封装。

有一点提一下如果你的 ImageView 有用 android:scaleType=”centerCrop” 属性,可能上面方法就有点不合适了,centerCrop 属性会截取图片的中心区域展示很可能圆角就不在展示范围了。但是大多场景 UI 给出的设计尺寸和图片比例应该是一致的,上面的适用范围还是很大的。

如果你想达到 centerCrop 属性的效果,也不是不可以,只是不适合封装在 Picasso 的内部逻辑中了。因为我们需要知道 ImageView 的宽高,这其实更合适封装成一个自定义 View。

下面还是直接以上面的代码,写个示例,并不合适使用在实际项目中,仅为了说明原理。

    @Override
    public Bitmap transform(Bitmap source) {
        float ivWidth = 600;//600 为布局中,在我测试机中 ImageView 的像素大小
        float ivHeight = 600;//600 为布局中, 在我测试机中 ImageView 的像素大小
        int width = source.getWidth();
        int height = source.getHeight();
        //按照 ImageView 的大小创建一个 Bitmap
        Bitmap newSource = Bitmap.createBitmap(ivWidth , ivHeight , Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(newSource);
        BitmapShader bitmapShader = new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale;
       // ImageView 和原图片的宽高比,取其大值为了放大后能够完全覆盖 ImageView 的大小
        scale = Math.max(ivWidth / width, ivHeight / height);
       //利用 Matrix 矩阵进行缩放和居中操作
        mShaderMatrix.reset();
        mShaderMatrix.setScale(scale, scale);
       //将放大后的图片向上移动,达到中心位置(实际情况根据图片的各种大小,有可能也会在 x 轴方向进行移动,这里仅作示例演示)
        mShaderMatrix.postTranslate(0, -(height * scale - ivHeight) / 2.0f);
        bitmapShader.setLocalMatrix(mShaderMatrix);
        mPaint.setShader(bitmapShader);
        source.recycle();
        mDrawCornerImage.drawCornerImage(canvas, mPaint, mRadius, ivWidth, ivHeight);
        return newSource;
    }

下图为和开源控件 RoundedImageView 的效果对比

大家阅读它的源码会发现原理是一样的,大家有什么其他需要可以直接使用 RoundedImageView

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货园

Android 自定义上面圆角下面直角的ImageView

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

92740
来自专栏学海无涯

Android开发之ListView使用经验分享

在Android开发中,ListView是使用最广泛的组件之一,虽然谷歌推出了RecycleView,但是很多项目中依旧在使用ListView,本文将总结一下使...

33160
来自专栏学海无涯

Android开发之Activity转场动画

引子 相信开发过iOS的程序员都知道iOS ViewController之间的跳转动画非常多,很酷对不对?这让开发Android的羡慕不已,曾几何时,Andro...

47760
来自专栏李蔚蓬的专栏

Material Design 实战 之第二弹——滑动菜单详解&实战

本模块共有六篇文章,参考郭神的《第一行代码》,对Material Design的学习做一个详细的笔记,大家可以一起交流一下:

13330
来自专栏Felix的技术分享

Android滑动删除控件

31520
来自专栏郭霖

Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效

记得在很早之前,我写了一篇关于Android滑动菜单的文章,其中有一个朋友在评论中留言,希望我可以帮他将这个滑动菜单改成双向滑动的方式。当时也没想花太多时间,简...

41960
来自专栏向治洪

CoordinatorLayout

CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能:  1、作为顶层布局  2、调度协调子布局 ...

175100
来自专栏郭霖

Android实现图片滚动控件,含页签功能

首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机。 如果你...

353100
来自专栏Felix的技术分享

Android快速索引条控件QuickIndexBar

28570
来自专栏郭霖

Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效

之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得。如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章 Android滑动菜单特...

35260

扫码关注云+社区

领取腾讯云代金券