gradient里的android gradient软件安卓

转载

云端筑梦者 2023-07-24 07:13:25

文章标签 gradient里的android android ui android studio XML 文章分类 Android 移动开发

现代应用程序的 UI 越来越好。设计师正在尝试与Android应用程序搭配最佳的不同风格和组合。如今，Android使用的关键组件之一称为GradientDrawable。

GradientDrawable可绘制按钮，背景等的颜色渐变。

让我们首先举一个基本的例子，在Android中创建一个具有浅绿色背景的按钮：

gradient里的android gradient软件安卓_XML

这可以通过在XML中设置安卓：背景属性来完成：

<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是水的颜色代码。

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

gradient里的android gradient软件安卓_android studio_02

为此，您需要使用渐变。

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

在 XML 中使用可绘制资源

为此，在可绘制包下，创建一个新文件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>

在这里，我们给出了一个<渐变/>标签，并添加了三个颜色代码 - 开始颜色，中心颜色和结束颜色。我们还将角度指定为 0，表示左右方向。

注意：角度只能是 45 的倍数。此外，最多可以在XML中指定3种颜色 - 开始颜色，中心颜色和结束颜色。所有 3 个将占用相等的空间。

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

android:background="@drawable/tri_color_drawable"

最后，运行应用！

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呢？

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

gradient里的android gradient软件安卓_android studio_03

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

gradient里的android gradient软件安卓_XML_04

如果您在这里注意到，颜色 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色渐变。

gradient里的android gradient软件安卓_android studio_05

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

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

在这里，我们给出了5种颜色，每种颜色将覆盖相等的空间。您可以根据需要提供任意数量的颜色。

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