Android: 如何绘制二维渐变

Question

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

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

我在 SO here 上找到了这个 link，它接近我想要的。但是我不知道如何让底部透明。

如何在 Android 中完成？

Answer 1

那种 "custom" 渐变有时会很烦人。为了让它尽可能轻松，您可以使用专门准备的可绘制资源。

使用可绘制对象可以通过两种主要方式实现：

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

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

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

Answer 2

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

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

Android: 如何绘制二维渐变

Android: How to draw a two dimensional gradient

android

linear-gradients

android-canvas