前言
我們?cè)谄綍r(shí)的開發(fā)中，經(jīng)常會(huì)遇到圓角需求稠歉，比如下圖
一般的實(shí)現(xiàn)方法是上面的圖片左上和右上設(shè)置圓角，下面的文字部分左下和右下設(shè)置圓角，而 Glide 默認(rèn)是不支持指定位置設(shè)置圓角的钮追，需要通過自定義 Transformation 實(shí)現(xiàn)，而 GIF 動(dòng)圖也是不支持圓角的阿迈。
有些同學(xué)說(shuō)了元媚，加個(gè)遮罩不就行了嗎？
先不說(shuō)會(huì)不會(huì)被視覺小姐姐噴：一個(gè)圓角都做不了苗沧，還要我給你做遮罩圖刊棕！
我自己本身也是無(wú)法接受這種實(shí)現(xiàn)方式的…
那么，實(shí)現(xiàn)一個(gè)通用的圓角布局待逞，不就可以以不變應(yīng)萬(wàn)變了嗎甥角？
正文
如何將 layout 剪裁為圓角？
我們知道 view 繪制時(shí)會(huì)調(diào)用 draw 方法识樱，draw 方法中有大量邏輯嗤无，直接復(fù)寫該方法是不現(xiàn)實(shí)的，看下 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
完整的描述了繪制流程怜庸，后面的注釋是我補(bǔ)充的對(duì)應(yīng)的方法当犯，因此我們只需要從 onDraw 和 dispatchDraw 下手即可。
- 如果需要剪裁背景割疾，那么需要復(fù)寫 onDraw 和 dispatchDraw
- 如果不需要剪裁背景嚎卫，那么只需要復(fù)寫 dispatchDraw
剪裁圓角只需要利用畫布 save restore 機(jī)制即可
對(duì)自定義 view 比較熟悉的同學(xué)應(yīng)該知道，使用 canvas.clipPath(path) 會(huì)有鋸齒效果杈曲，為了實(shí)現(xiàn)抗鋸齒效果驰凛，我們使用 canvas.drawPath(path, paint)，為 paint 添加抗鋸齒標(biāo)記担扑，并設(shè)置 XFermodes恰响。
有些同學(xué)可能會(huì)發(fā)現(xiàn)，在 Android P 上無(wú)法使用 canvas.drawPath(path, paint) 剪裁布局涌献，原因是 Android P 上 XFermodes 行為變更導(dǎo)致的胚宦，詳細(xì)可參考：https://issuetracker.google.com/issues/111819103
為了兼容所有版本，我們只能暫且在 P 上使用 canvas.clipPath(path) 實(shí)現(xiàn)圓角燕垃，會(huì)有鋸齒效果枢劝。
看下實(shí)現(xiàn)效果
源碼
代碼不多，直接貼上源碼
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 上你有更好的實(shí)現(xiàn)方法卜壕，還請(qǐng)告知您旁，感謝！
