Android：如何绘制二维渐变答案

【问题标题】：Android: How to draw a two dimensional gradientAndroid：如何绘制二维渐变
【发布时间】：2015-09-02 23:17:14
【问题描述】：

我希望使用 Android 的 Canvas 绘制这样的渐变：

在水平方向有两种颜色（红色和蓝色）的渐变。然后在垂直方向上有一个渐变的透明度（允许红色和蓝色显示）到什么都没有（没有所有颜色？）。

我在 SO here 上找到了这个链接，这与我想要的很接近。但我不知道如何使底部透明。

这在 Android 中如何实现？

【问题讨论】：

您有什么不接受答案的原因吗？

标签： android android-canvas linear-gradients

【解决方案1】：

这种“自定义”渐变有时会很烦人。为了尽可能轻松，您可以使用专门准备的可绘制资源。

您可以通过两种主要方式使用可绘制对象来实现这一点：

使用两个线性渐变
使用两个径向渐变

第一种方法可以这样实现：

<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%。它会给它一个很好的重叠，但不会太多。

【讨论】：

谢谢blpinsk！这看起来很结实。您是否知道在运行时在 Java 中以编程方式执行此操作的方法？我需要生成的颜色数量可以改变，颜色本身也可以改变。我认为预定义的资源文件不适用于这个问题。你怎么看？

【解决方案2】：

Here's 如何在 Skia 中使用 C++ 绘制它。 Android 上的 Java 中的等价物应该非常相似。

SkColor colors[] = { SK_ColorRED, SK_ColorBLUE };
SkPoint horz[] = { { 0, 0 }, { 256, 0 } };
SkPaint paint;
paint.setShader(SkGradientShader::MakeLinear(horz, colors, nullptr, 2,
        SkShader::kClamp_TileMode));
canvas->drawPaint(paint);
paint.setBlendMode(SkBlendMode::kDstIn);
SkColor alphas[] = { SK_ColorBLACK, SK_ColorTRANSPARENT };
SkPoint vert[] = { { 0, 0 }, { 0, 256 } };
paint.setShader(SkGradientShader::MakeLinear(vert, alphas, nullptr, 2,
        SkShader::kClamp_TileMode));
canvas->drawPaint(paint);

gradient with fade

【讨论】：