微信号:AndroidChinaNet

介绍:这里有资讯,干货,技术,源码,精彩内容不容错过!

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

2019-01-27 18:03 Android开发中文站

前言


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



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


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


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


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



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


正文


如何将 layout 剪裁为圆角?


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


Draw traversal performs several drawing steps which must be executedin 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 高性能日志写入方案 Android程序员的Java后台学习建议 Android 8.0 应用保活实践 二本毕业,我是如何成为BAT安卓高级开发工程师?
猜您喜欢 从汉字输入到香农理论 如何快速提升自己的测试能力? Nginx通过CORS实现跨域 【存储入门必读】SAN网络性能问题排错指南 大数据时代,快来看看你是爆款名么?