多梯度形状

Question

多梯度形状我想创建一个类似下图的形状：注意从颜色1到颜色2的上半部分渐变，但是从颜色3到颜色4渐变的下半部分。我知道如何使用单个渐变制作形状，但我不确定如何将形状分割成两半，并制作1个形状，2个不同的渐变。有任何想法吗？

Answer 1

您可以使用图层列表在xml中对渐变形状进行叠加。想象一下具有默认状态的按钮，如下所示，其中第二个项目是半透明的。它增加了一种渐晕。（请原谅自定义颜色。）

<!-- Normal state. --><item>
    <layer-list>
        <item>  
            <shape>
                <gradient 
                    android:startColor="@color/grey_light"
                    android:endColor="@color/grey_dark"
                    android:type="linear"
                    android:angle="270"
                    android:centerColor="@color/grey_mediumtodark" />
                <stroke
                    android:width="1dp"
                    android:color="@color/grey_dark" />
                <corners
                    android:radius="5dp" />
            </shape>
        </item>
        <item>  
            <shape>
                <gradient 
                    android:startColor="#00666666"
                    android:endColor="#77666666"
                    android:type="radial"
                    android:gradientRadius="200"
                    android:centerColor="#00666666"
                    android:centerX="0.5"
                    android:centerY="0" />
                <stroke
                    android:width="1dp"
                    android:color="@color/grey_dark" />
                <corners
                    android:radius="5dp" />
            </shape>
        </item>
    </layer-list></item>

Answer 2

你只能使用xml形状来做 - 只需使用图层列表和负填充，如下所示：

    <layer-list>

        <item>
            <shape>
                <solid android:color="#ffffff" />

                <padding android:top="20dp" />
            </shape>
        </item>

        <item>
            <shape>
                <gradient android:endColor="#ffffff" android:startColor="#efefef" android:type="linear" android:angle="90" />

                <padding android:top="-20dp" />
            </shape>
        </item>

    </layer-list>