『自定义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);

并附上本人的草图:

作者的.png

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

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

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

本人的.png

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

result.png

很可爱吧!

附上 GitHub的项目地址:

使用起来就很简单了:

  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,
}

我的博客

#rewardButton { background-color: #ea6f5a; } .btn-pay { margin-bottom: 20px; padding: 8px 25px; font-size: 16px; color: #fff; background-color: #ea6f5a; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #QR img{ height: 200px; height: 200px; margin: 20px; }
文章目录
  1. 1. 使用起来就很简单了:
您是第 位小伙伴 | 本站总访问量 | 已经写了 120.4k 字啦

载入天数...载入时分秒...