image

前言

我们在平时的开发中，经常会遇到圆角需求，比如下图

image

一般的实现方法是上面的图片左上和右上设置圆角，下面的文字部分左下和右下设置圆角，而 Glide 默认是不支持指定位置设置圆角的，需要通过自定义 Transformation 实现，而 GIF 动图也是不支持圆角的。

有些同学说了，加个遮罩不就行了吗？

先不说会不会被视觉小姐姐喷：一个圆角都做不了，还要我给你做遮罩图！

我自己本身也是无法接受这种实现方式的…

image

那么，实现一个通用的圆角布局，不就可以以不变应万变了吗？

正文

如何将 layout 剪裁为圆角？

我们知道 view 绘制时会调用 draw 方法，draw 方法中有大量逻辑，直接复写该方法是不现实的，看下 draw 方法中的一段注释

Draw traversal performs several drawing steps which must be executed
in the appropriate order:

     1. Draw the background // drawBackground
     2. If necessary, save the canvas' layers to prepare for fading
     3. Draw view's content // onDraw
     4. Draw children // dispatchDraw
     5. If necessary, draw the fading edges and restore layers
     6. Draw decorations (scrollbars for instance) // onDrawForeground

完整的描述了绘制流程，后面的注释是我补充的对应的方法，因此我们只需要从 onDraw 和 dispatchDraw 下手即可。

• 如果需要剪裁背景，那么需要复写 onDraw 和 dispatchDraw
• 如果不需要剪裁背景，那么只需要复写 dispatchDraw

剪裁圆角只需要利用画布 save restore 机制即可

对自定义 view 比较熟悉的同学应该知道，使用 canvas.clipPath(path) 会有锯齿效果，为了实现抗锯齿效果，我们使用 canvas.drawPath(path, paint)，为 paint 添加抗锯齿标记，并设置 XFermodes。

有些同学可能会发现，在 Android P 上无法使用 canvas.drawPath(path, paint) 剪裁布局，原因是 Android P 上 XFermodes 行为变更导致的，详细可参考：https://issuetracker.google.com/issues/111819103

为了兼容所有版本，我们只能暂且在 P 上使用 canvas.clipPath(path) 实现圆角，会有锯齿效果。

看下实现效果

image

源码

代码不多，直接贴上源码

public class RoundRelativeLayout extends RelativeLayout {
    private Path mPath;
    private Paint mPaint;
    private RectF mRectF;
    private float mRadius;
    private boolean isClipBackground;

    public RoundRelativeLayout(@NonNull Context context) {
        this(context, null);
    }
    public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundRelativeLayout);
        mRadius = ta.getDimension(R.styleable.RoundRelativeLayout_rlRadius, 0);
        isClipBackground = ta.getBoolean(R.styleable.RoundRelativeLayout_rlClipBackground, true);
        ta.recycle();

        mPath = new Path();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRectF = new RectF();

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    }
    public void setRadius(float radius) {
        mRadius = radius;
        postInvalidate();
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mRectF.set(0, 0, w, h);
    }
    @SuppressLint("MissingSuperCall")
    @Override
    public void draw(Canvas canvas) {
        if (Build.VERSION.SDK_INT >= 28) {
            draw28(canvas);
        } else {
            draw27(canvas);
        }
    }
    @Override
    protected void dispatchDraw(Canvas canvas) {
        if (Build.VERSION.SDK_INT >= 28) {
            dispatchDraw28(canvas);
        } else {
            dispatchDraw27(canvas);
        }
    }
    private void draw27(Canvas canvas) {
        if (isClipBackground) {
            canvas.saveLayer(mRectF, null, Canvas.ALL_SAVE_FLAG);
            super.draw(canvas);
            canvas.drawPath(genPath(), mPaint);
            canvas.restore();
        } else {
            super.draw(canvas);
        }
    }
    private void draw28(Canvas canvas) {
        if (isClipBackground) {
            canvas.save();
            canvas.clipPath(genPath());
            super.draw(canvas);
            canvas.restore();
        } else {
            super.draw(canvas);
        }
    }
    private void dispatchDraw27(Canvas canvas) {
        canvas.saveLayer(mRectF, null, Canvas.ALL_SAVE_FLAG);
        super.dispatchDraw(canvas);
        canvas.drawPath(genPath(), mPaint);
        canvas.restore();
    }
    private void dispatchDraw28(Canvas canvas) {
        canvas.save();
        canvas.clipPath(genPath());
        super.dispatchDraw(canvas);
        canvas.restore();
    }
    private Path genPath() {
        mPath.reset();
        mPath.addRoundRect(mRectF, mRadius, mRadius, Path.Direction.CW);
        return mPath;
    }
}

attrs

<declare-styleable name="RoundRelativeLayout">
    <attr name="rlRadius" format="dimension" />
    <attr name="rlClipBackground" format="boolean" />
</declare-styleable>

后记

如果在 Android P 上你有更好的实现方法，还请告知，感谢！