Android使用layer-list实现左移叠层圆形渐变drawable效果异常问题

现有实现的核心问题 #

• shape标签内定义的size仅为drawable默认测量值，当drawable被应用到尺寸大于该默认值的View时，所有shape都会被拉伸填满整个View，你写死的固定left偏移值完全无法匹配拉伸后的尺寸，这是实际效果和预期不符的核心原因。
• 第一个圆形的高度设置为233dp，和宽度230dp不一致，不是正圆，会导致形状变形。
• 固定dp偏移值没有适配能力，在不同宽度的控件上展示效果差异极大，无法保证所有圆形永远向左偏移50%仅展示右半部分。

修复方案 #

将圆形尺寸定义从shape内部迁移到item标签（API 23+支持），同时给item配置gravity属性控制定位，即可避免拉伸问题，保证效果符合预期。
修复后的完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 线性渐变背景 -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#4833A6"
                android:endColor="#1E479C"
                android:type="linear" />
        </shape>
    </item>

    <!-- 最外层半透明白色圆弧 -->
    <item
        android:width="230dp"
        android:height="230dp"
        android:gravity="center_vertical|left"
        android:left="-115dp">
        <shape android:shape="oval">
            <solid android:color="#1AFFFFFF" />
        </shape>
    </item>

    <!-- 中间层半透明白色圆弧 -->
    <item
        android:width="166dp"
        android:height="166dp"
        android:gravity="center_vertical|left"
        android:left="-83dp">
        <shape android:shape="oval">
            <solid android:color="#1AFFFFFF" />
        </shape>
    </item>

    <!-- 最内层半透明白色圆弧 -->
    <item
        android:width="115dp"
        android:height="115dp"
        android:gravity="center_vertical|left"
        android:left="-57.5dp">
        <shape android:shape="oval">
            <solid android:color="#1AFFFFFF" />
        </shape>
    </item>
</layer-list>

低版本兼容方案 #

如果需要兼容API 23以下的设备，可以用inset标签嵌套shape实现相同效果，示例如下（以最外层圆形为例）：

<item>
    <inset android:insetLeft="-115dp">
        <shape android:shape="oval">
            <size android:width="230dp" android:height="230dp" />
            <solid android:color="#1AFFFFFF" />
        </shape>
    </inset>
</item>

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