在 实现图片圆角显示的几种方式 我分享了一个不到 100 行代码实现的圆角 ImageView，后面根据需求增加了，边框和自定义 Path。这篇文章就是来分享具体是怎样实现的。

边框

先放一张动图，应该就能明白其中的原理了。

以圆形为例：

  1. 首先绘制一张全尺寸矩形，颜色为边框的颜色；
  2. 再画一个小一点的圆形，把第一步的图层掏空，这个圆形小多少就是边框的宽度；
  3. 最后画一个正常大小的圆形，把多余的都扣掉。

扣图都是使用的 Xfermodes 具体到

  • 步骤 2，PorterDuff.Mode.DST_OUT：去交集，显示下层
  • 步骤 3，PorterDuff.Mode.DST_IN：取交集，显示下层。

核心代码：

1
2
3
4
5
6
7
mStrokePaint.setXfermode(null);
canvas.drawBitmap(mStrokeBitmap, 0, 0, mStrokePaint);
canvas.translate(mStrokeWidth, mStrokeWidth);
mStrokePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mStrokeShape.draw(canvas, mStrokePaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mShape.draw(canvas, mPaint);

自定义 Path

这个功能是源于公司项目需要，基于这个可以实现很多意想不到的效果，如下图

  1. 掏空的专辑封面
  2. 电影券，优惠券

原理还是 Xfermodes 的扣图功能，区别就是把接口暴露出来，就可以自定义啦。

使用

广告时间到啦，这么好的库要怎么使用呢？

ShapedImageView

1
compile 'cn.gavinliu.android.lib:ShapedImageView:0.8.2'

Circle

1
2
3
4
5
6
<cn.gavinliu.android.lib.shapedimageview.ShapedImageView
    ...
    app:shape_mode="circle"

    app:stroke_color="#009688"
    app:stroke_width="3dp" />

Round Rect

1
2
3
4
5
6
7
<cn.gavinliu.android.lib.shapedimageview.ShapedImageView
    ...
    app:shape_mode="round_rect"
    app:round_radius="20dp"

    app:stroke_color="#009688"
    app:stroke_width="3dp" />

PathExtension

1
2
3
4
5
6
7
8
9
10
11

image1.setExtension(new CDPathExtension());

class CDPathExtension implements ShapedImageView.PathExtension {

    @Override
    public void onLayout(Path path, int width, int height) {
        path.reset();
        path.addCircle(width / 2, height / 2, width / 8, Path.Direction.CW);
    }
}