使用裁剪来圆化 ViewGroup 的角

Question

我有一个RelativeLayout，它需要有圆角的左上角和右上角。我可以使用在 XML 中定义的带有角 topLeftRadius 和 topRightRadius 的可绘制背景来做到这一点。但是... 这个RelativeLayout 还需要有一个背景，它是一个带有平铺位图和形状组合的图层列表，并且平铺位图在可绘制 XML 中没有角参数。所以我的想法是使用以下代码制作RelativeLayout：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    path.reset();
    rect.set(0, 0, w, h);
    path.addRoundRect(rect, radius, radius, Path.Direction.CW);
    path.close();
}

@Override
protected void dispatchDraw(Canvas canvas) {
    int save = canvas.save();
    canvas.clipPath(path);
    super.dispatchDraw(canvas);
    canvas.restoreToCount(save);
}

遗憾的是没有发生剪辑，我希望它会剪辑我的 RelativeLayout 的所有四个角，但什么也没发生。 “onSizeChanged”和“dispatchDraw”方法都被调用了，我测试过。我也试过关闭硬件加速，但什么也没做。

我的RelativeLayout 是更大布局的一部分，该布局在FrameLayout 的子类中膨胀，然后在RecyclerView 中连续使用该子类，如果这有任何改变的话。

Answer 1

已定义此布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent">

    <com.playground.RoundedRelativeLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@color/colorPrimary" />

</FrameLayout>

RoundedRelativeLayout 的实现如下：

public class RoundedRelativeLayout extends RelativeLayout { private RectF rectF; private Path path = new Path(); private float cornerRadius = 15; public RoundedRelativeLayout(Context context) { super(context); } public RoundedRelativeLayout(Context context, AttributeSet attrs) { super(context, attrs); } public RoundedRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); rectF = new RectF(0, 0, w, h); resetPath(); } @Override public void draw(Canvas canvas) { int save = canvas.save(); canvas.clipPath(path); super.draw(canvas); canvas.restoreToCount(save); } @Override protected void dispatchDraw(Canvas canvas) { int save = canvas.save(); canvas.clipPath(path); super.dispatchDraw(canvas); canvas.restoreToCount(save); } private void resetPath() { path.reset(); path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW); path.close(); } }

你会得到以下输出：

^{无耻地从RoundKornerLayouts项目中窃取了实现。}

Answer 2

这是 azizbekian 答案的 Kotlin 版本：

class RoundedRelativeLayout(context: Context, attrs: AttributeSet) : RelativeLayout(context, attrs) {

    private lateinit var rectF: RectF
    private val path = Path()
    private var cornerRadius = 15f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        rectF = RectF(0f, 0f, w.toFloat(), h.toFloat())
        resetPath()
    }

    override fun draw(canvas: Canvas) {
        val save = canvas.save()
        canvas.clipPath(path)
        super.draw(canvas)
        canvas.restoreToCount(save)
    }

    override fun dispatchDraw(canvas: Canvas) {
        val save = canvas.save()
        canvas.clipPath(path)
        super.dispatchDraw(canvas)
        canvas.restoreToCount(save)
    }

    private fun resetPath() {
        path.reset()
        path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW)
        path.close()
    }
}

编辑

作为奖励，这里是如何将cornerRadius添加为您可以设置的额外xml属性，只需将其添加到res/values/styleable.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundedRelativeLayout">
        <attr name="cornerRadius" format="float"/>
    </declare-styleable>
</resources>

然后将此init方法添加到RoundedRelativeLayout类中：

init {
    val ta = getContext().obtainStyledAttributes(attrs, R.styleable.RoundedRelativeLayout)
    cornerRadius = ta.getFloat(R.styleable.RoundedRelativeLayout_cornerRadius, 15f)
    ta.recycle()
}

现在，当您使用布局时，您可以像这样在 xml 中设置cornerRadius：

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" <-- Make sure you include this line
        android:layout_width="80dp"
        android:layout_height="80dp">

    .
    .
    .

    <your.package.name.RoundedRelativeLayout
            android:id="@+id/roundedRect"
            app:cornerRadius="24"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    .
    .
    .