前言
我们在平时的开发中, 经常会遇到圆角需求, 比如下图
一般的实现方法是上面的图片左上和右上设置圆角, 下面的文字部分左下和右下设置圆角, 而 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 行为变更导致的, 详细可参考: https://issuetracker.google.com/issues/111819103
为了兼容所有版本, 我们只能暂且在 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 上你有更好的实现方法, 还请告知, 感谢!
来源: https://juejin.im/post/5c484f456fb9a04a03798f70