前言

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

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

有些同学说了,加个遮罩不就行了吗?

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

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

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

正文

如何将 layout 剪裁为圆角?

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

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

  
  
  1. Draw the background // drawBackground
    1. If necessary, save the canvas’ layers to prepare for fading
    2. Draw view’s content // onDraw
    3. Draw children // dispatchDraw
    4. If necessary, draw the fading edges and restore layers
    5. 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 行为变更导致的,详细可参考:issuetracker.google.com/issues/1118…

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

看下实现效果

源码

代码不多,直接贴上源码

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, <span class="hljs-literal">true</span>);
    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 <span class="hljs-built_in">set</span>Radius(<span class="hljs-built_in">float</span> 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(<span class="hljs-string">"MissingSuperCall"</span>)
@Override
public void draw(Canvas canvas) {
    <span class="hljs-keyword">if</span> (Build.VERSION.SDK_INT &gt;= 28) {
        draw28(canvas);
    } <span class="hljs-keyword">else</span> {
        draw27(canvas);
    }
}
@Override
protected void dispatchDraw(Canvas canvas) {
    <span class="hljs-keyword">if</span> (Build.VERSION.SDK_INT &gt;= 28) {
        dispatchDraw28(canvas);
    } <span class="hljs-keyword">else</span> {
        dispatchDraw27(canvas);
    }
}
private void draw27(Canvas canvas) {
    <span class="hljs-keyword">if</span> (isClipBackground) {
        canvas.saveLayer(mRectF, null, Canvas.ALL_SAVE_FLAG);
        super.draw(canvas);
        canvas.drawPath(genPath(), mPaint);
        canvas.restore();
    } <span class="hljs-keyword">else</span> {
        super.draw(canvas);
    }
}
private void draw28(Canvas canvas) {
    <span class="hljs-keyword">if</span> (isClipBackground) {
        canvas.save();
        canvas.clipPath(genPath());
        super.draw(canvas);
        canvas.restore();
    } <span class="hljs-keyword">else</span> {
        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 <span class="hljs-function"><span class="hljs-title">genPath</span></span>() {
    mPath.reset();
    mPath.addRoundRect(mRectF, mRadius, mRadius, Path.Direction.CW);
    <span class="hljs-built_in">return</span> mPath;
}

}

复制代码

attrs

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

后记

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

  • Android

    开放手机联盟(一个由 30 多家科技公司和手机公司组成的团体)已开发出 Android,Android 是第一个完整、开放、免费的手机平台。

    293 引用
感谢    赞同    分享    收藏    关注    反对    举报    ...