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

chay發表於2019-03-03
Android
Android 實現一個通用的圓角佈局

前言

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

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

一般的實現方法是上面的圖片左上和右上設定圓角，下面的文字部分左下和右下設定圓角，而 Glide 預設是不支援指定位置設定圓角的，需要通過自定義 Transformation 實現，而 GIF 動圖也是不支援圓角的。

有些同學說了，加個遮罩不就行了嗎？

先不說會不會被視覺小姐姐噴：一個圓角都做不了，還要我給你做遮罩圖！

我自己本身也是無法接受這種實現方式的…

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

那麼，實現一個通用的圓角佈局，不就可以以不變應萬變了嗎？

正文

如何將 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) 實現圓角，會有鋸齒效果。

看下實現效果

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

原始碼

程式碼不多，直接貼上原始碼

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 上你有更好的實現方法，還請告知，感謝！

相關文章