Android:如何绘制二维渐变

Question

我想用Android来绘制这样的渐变Canvas:

在水平方向上有两种颜色(红色和蓝色)的渐变.然后在垂直方向上有一个透明度梯度(允许红色和蓝色显示)为空(没有所有颜色？).

我在这里发现了这个链接,这与我想要的很接近.但我无法弄清楚如何使底部透明.

如何在Android中实现这一目标？

Answer 1

那些"自定义"渐变有时会非常烦人.为了使它尽可能无痛,您可以使用专门准备的可绘制资源.

使用drawable可以通过两种主要方式实现这一目标:

1. 使用两个线性渐变
2. 使用两个径向渐变

第一种方法可以像这样实现:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="315"
                android:centerColor="#4DFC0A00"
                android:endColor="#00FC0A00"
                android:startColor="#FC0A00" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="225"
                android:centerColor="#4D5E17FD"
                android:endColor="#005E17FD"
                android:startColor="#5E17FD" />
        </shape>
    </item>
</layer-list>

它看起来像这样(在白色背景上呈现):

你仍然可以抽搐centerX,并centerY为那些梯度值(默认值是0.5)

第二种方法可以像这样实现:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:centerX="0"
                android:centerY="0"
                android:gradientRadius="@dimen/gradient_width"
                android:endColor="#00FC0A00"
                android:centerColor="#80FC0A00"
                android:startColor="#FC0A00"
                android:type="radial" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:centerX="1"
                android:centerY="0"
                android:gradientRadius="@dimen/gradient_width"
                android:endColor="#005E17FD"
                android:centerColor="#805E17FD"
                android:startColor="#5E17FD"
                android:type="radial" />
        </shape>
    </item>
</layer-list>

它看起来像这样(在白色背景上呈现):

第二种方法的一个缺点是你需要知道你的渐变宽度来设置gradientRadius.

您也可以不将其设置gradientRadius为全宽,而是将其设置为75%.它会给它一个很好的重叠,但不会太多.