『自定义View实战』—— 图片实现圆角效果

在工作中难免遇到自定义 View 的相关需求，本身这方面比较薄弱，因此做个记录，也是自己学习和成长的积累。自定义View实战

上周接到个小需求，就是让一张图片的右下角为圆角，然后百度了一下，发现 Glide 直接支持对图片进行操作，只要继承 BitmapTransformation,或者实现 Transformation的接口，就可以获得原图的 Bitmap对象，通过 Canvas对图片重新绘制，最后 Glide.with(this).load(R.drawable.test).asBitmap().transform(transformation).into(mImageView);传入新建的transformation对象即可。

这里推荐GitHub上的一个开源库，完全满足日常需求:glide-transformations,里面有各种各样的对图片的处理，很是强大。

不过实际使用的过程中，我倒是发现一个小问题...假如只有右下角是圆角的情况下，当服务器返回的是一张半透明的图片时，结果就成了这样:

原图其实是一张半透明矩形图，这就很尴尬，其实从图中不难发现作者的绘制思路，首先看一下作者的源码部分：

canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,mRadius, paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint);

并附上本人的草图：

• 第一步，绘制一个圆1
• 第二步绘制剩下的两个矩形2和3.

这样给人的感觉，右下角就有了圆角效果，举一反三，其他的四个角也是这样绘制。不过这样有个缺点，作者这样虽然可以实现，但是会有重叠的部分，假如跟我一样是半透明的图片，那么出来的效果就很差强人意。

于是，我换个方法，有点大同小异，只是稍微做了点优化，如下图:

一目了然，其实我就是将作者的圆换成了弧，这样，半透明的图片就可以完美的拥有了圆角。既然这样，那么就重新写一个实现圆角的lib吧，其实很简单，这是运行过后的效果：

很可爱吧！

附上 GitHub的项目地址：使用Glide实现圆角效果

使用起来就很简单了：

1. 在你的项目根 build.gradle 文件下添加 maven地址

     allprojects {
      repositories {
        ...
        maven { url 'https://jitpack.io' }
      }
    }
   

2. 在module对应的build.gradle下添加依赖

    dependencies {
        compile 'com.github.xiaweizi:RoundCornersView:v1.0'
    }
   

3. 在代码中使用(需要结合Glide搭配使用)

        RoundCornersTransformation transformation =
                new RoundCornersTransformation(MainActivity.this,
                                               dip2px(25),
                                               mList.get(position).type);
        Glide.with(MainActivity.this)
             .load(mList.get(position).resId)
             .bitmapTransform(transformation)
             .into(holder.mImageView);
   

创建transformation对象需传入圆角半径和指定圆角的位置,有以下几种可供选择，当然如果你有别的需要，相信您同样可以举一反三实现的。

public enum CornerType {
    /** 所有角 */
    ALL,
    /** 左上 */
    LEFT_TOP,
    /** 左下 */
    LEFT_BOTTOM,
    /** 右上 */
    RIGHT_TOP,
    /** 右下 */
    RIGHT_BOTTOM,
    /** 左侧 */
    LEFT,
    /** 右侧 */
    RIGHT,
    /** 下侧 */
    BOTTOM,
    /** 上侧 */
    TOP,
}

我的博客