Android如何编写Shape Drawable实现目标不规则圆角效果

目标效果 #

需要实现的drawable样式如下：

当前问题 #

初始实现代码运行后左上角出现了不需要的圆角，不符合预期，实际效果如下：

初始代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="10dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="20dp" />
            <solid android:color="@color/red_home" />

        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <corners android:topLeftRadius="100dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp" />
            <solid android:color="@color/green2" />
        </shape>
    </item>
</layer-list>

问题原因 #

现有代码存在两个逻辑错误：

1. 底层红色矩形本身设置了10dp的左上角圆角，直接导致整个图形外轮廓左上角是圆角，和预期的直角效果冲突。
2. 上层绿色矩形默认铺满整个画布，给它设置左上角圆角的效果是把绿色矩形自身的左上角裁掉一块圆弧，既会让左上角透明露出底层红色，还会让绿色圆弧向内凹陷，和目标效果里凸向红色区域的绿色圆弧完全相反。

修正后代码 #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层红色背景 -->
    <item>
        <shape android:shape="rectangle">
            <corners
                android:topLeftRadius="0dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="20dp" />
            <solid android:color="@color/red_home" />
        </shape>
    </item>
    <!-- 左上角绿色圆弧 -->
    <item
        android:left="-100dp"
        android:top="-100dp"
        android:right="0dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <corners android:bottomRightRadius="100dp" />
            <solid android:color="@color/green2" />
        </shape>
    </item>
</layer-list>

调整说明 #

• 将底层红色矩形的topLeftRadius改为0dp，保证整个图形外轮廓左上角为直角。
• 上层绿色块通过负偏移向左、向上各偏移100dp（和圆弧半径一致），仅保留右下角100dp的圆角，刚好在画布左上角露出凸向右下的四分之一绿色圆弧，完全匹配目标效果。
• 如果需要调整绿色圆弧的大小，同步修改偏移值和bottomRightRadius的数值即可。

内容的提问来源于stack exchange，提问作者Navid Abutorab