GradientDrawable：何时以及如何在 Android 中使用它

最新推荐文章于 2025-04-16 14:22:00 发布

原创最新推荐文章于 2025-04-16 14:22:00 发布 · 709 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #ui #android studio

Android 同时被 3 个专栏收录

80 篇文章

订阅专栏

android studio

7 篇文章

订阅专栏

4 篇文章

订阅专栏

现代应用程序的 UI 越来越好。设计师正在尝试最适合 Android 应用程序的不同样式和组合。目前使用的 Android 的关键组件之一称为GradientDrawable。

GradientDrawable是可绘制的，具有用于按钮、背景等的颜色渐变。

让我们从在Android中创建一个具有水色背景的按钮的基本示例开始：

这可以简单地通过在 XML 中设置android:background属性来完成：

<Button
    android:layout_width="0dp"
    android:layout_height="48dp"
    android:layout_marginStart="24dp"
    android:layout_marginEnd="24dp"
    android:text="Continue"
    android:background="#00FFFF"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

这里#00FFFF是 Aqua 颜色的颜色代码。

现在，如果你想要这样的东西怎么办：

为此，您需要使用渐变。

有两种方法可以做到这一点：

1. 在 XML 中使用可绘制资源

为此，在drawable包下，创建一个新文件tri_color_drawable.xml并输入以下代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#D98880"
        android:centerColor="#F4D03F"
        android:endColor="#48C9B0"/>
</shape>

在这里，我们给出了一个标签并添加了三个颜色代码 - startColor、centerColor和endColor。我们还将角度指定为 0，表示左-右方向。

注意：角度只能是 45 的倍数。此外，在 XML 中最多可以指定 3 种颜色 - startColor、centerColor 和endColor。所有 3 将占据相同的空间。

然后在标记中进行更改以使其使用此背景可绘制对象：

android:background="@drawable/tri_color_drawable"

最后，运行应用程序！

2. GradientDrawable

我们也可以通过使用 GradientDrawable 以编程方式获得相同的功能。

在您的活动中，创建 GradientDrawable。

val gradientDrawable = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
    intArrayOf(
        0XFFD98880.toInt(),
        0XFFF4D03F.toInt(),
        0XFF48C9B0.toInt()
    ))

在这里，我们将方向指定为 LEFT_RIGHT（对应于我们之前在 XML 中添加的 0）。我们还给出了我们之前使用的相同的三种颜色。
接下来，将此 gradientDrawable 设置为按钮的背景。

val continueBtn: Button = findViewById(R.id.continue_btn)
continueBtn.background = gradientDrawable

现在运行应用程序！

那么，如果可以使用 XML 完成工作，为什么我们需要 GradientDrawable 呢？

让我们回顾一下前面的例子。

在这里，每种颜色都占据相等的空间。我们可以说颜色 1 从 0% 开始，颜色 2 在 ~33% 开始，颜色 3 在 ~66% 开始。如果您不希望所有颜色占据相同的空间怎么办？相反，你想要这样的东西：

如果您注意到这里，颜色 1 占据了整个空间的一半（50%），而其他两种颜色同样覆盖了剩余空间。（各占 25%）。

这不能通过 XML 实现。这就是GradientDrawable真正发挥作用的地方。

为了达到上述结果，我们可以这样做：

val gradientDrawable = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
    intArrayOf(
        0XFFD98880.toInt(),
        0XFFD98880.toInt(),
        0XFFF4D03F.toInt(),
        0XFF48C9B0.toInt()
    ))

这里颜色 1 使用了两次，因此它将占用总空间的 50%。剩余的两种颜色将同样占据剩余 50% 的空间。

再举一个例子，假设你想要一个 5 色渐变。

这也无法通过 XML 实现，但可以使用 GradientDrawable 轻松完成，如下所示：

val gradientDrawable = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
    intArrayOf(
        0XFFD98880.toInt(),
        0XFFF4D03F.toInt(),
        0XFF48C9B0.toInt(),
        0XFF2C3E50.toInt(),
        0XFFAF7AC5.toInt()
    ))

在这里，我们给出了 5 种颜色，每种颜色将覆盖相同的空间。您可以根据需要提供尽可能多的颜色。

最后，让我们仔细看看 GradientDrawable 的主要组件：

1. 方向

它可以是枚举GradientDrawable.Orientation中定义的方向之一。在我们的示例中，我们使用了LEFT_RIGHT。其他可能的方向是TOP_BOTTOM、TR_BL、RIGHT_LEFT等。它们是不言自明的。

2. 颜色数组

这里我们需要提供一个十六进制颜色值的数组。

对于 0XFFD98880，