Android 實現一個通用的圓角佈局

前言

咱們在平時的開發中，常常會遇到圓角需求，好比下圖

通常的實現方法是上面的圖片左上和右上設置圓角，下面的文字部分左下和右下設置圓角，而 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 上你有更好的實現方法，還請告知，感謝！