最新消息:欢迎访问Android开发中文站!商务联系QQ:1304524325

Android 实现一个通用的圆角布局

开发进阶 loading 159浏览 0评论

前言

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

一般的实现方法是上面的图片左上和右上设置圆角,下面的文字部分左下和右下设置圆角,而 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
     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 行为变更导致的,详细可参考: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, 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 上你有更好的实现方法,还请告知,感谢!

作者:chay
链接:https://juejin.im/post/5c484f456fb9a04a03798f70

转载请注明:Android开发中文站 » Android 实现一个通用的圆角布局

您必须 登录 才能发表评论!