首页 > 软件编程 > Android > Android gradient 使用

Android gradient 使用小结

2025-04-17 17:05:20 作者：stevenzqzq

在Android中使用gradient（渐变）通常是通过drawable文件来设置背景,下面是可以直接用的几种用法汇总,包括线性渐变、径向渐变、扫描渐变（sweep）等,感兴趣的朋友一起看看吧

在 Android 中使用 gradient（渐变） 通常是通过 drawable 文件来设置背景。下面是可以直接用的几种用法汇总，包括线性渐变、径向渐变、扫描渐变（sweep）等：

✅ 1. Linear Gradient（线性渐变）

<!-- res/drawable/bg_gradient_linear.xml -->
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="linear"
    android:startColor="#FF512F"
    android:endColor="#DD2476"
    android:angle="45" />

🔹 angle 取值范围：0~360，表示渐变方向（0 为从上往下，90 为从左往右）。

✅ 2. Radial Gradient（径向渐变）

<!-- res/drawable/bg_gradient_radial.xml -->
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="radial"
    android:centerX="0.5"
    android:centerY="0.5"
    android:gradientRadius="200"
    android:startColor="#FF512F"
    android:endColor="#DD2476" />

🔹 centerX/Y: 百分比（0.5 表示中心）
🔹 gradientRadius: 渐变半径，单位为 px

✅ 3. Sweep Gradient（扫描渐变）

<!-- res/drawable/bg_gradient_sweep.xml -->
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="sweep"
    android:centerX="0.5"
    android:centerY="0.5"
    android:startColor="#FF512F"
    android:endColor="#DD2476" />

✅ 4. 多色渐变

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:type="linear"
    android:startColor="#FF512F"
    android:centerColor="#F09819"
    android:endColor="#DD2476"
    android:angle="90" />

✅ 5. 设置背景到 View

android:background="@drawable/bg_gradient_linear"

✅ 6. 代码中创建 GradientDrawable

val gradient = GradientDrawable(
    GradientDrawable.Orientation.LEFT_RIGHT,
    intArrayOf(Color.RED, Color.BLUE)
)
gradient.cornerRadius = 20f
yourView.background = gradient

✅ 7. 圆角 + 渐变（常用）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="16dp"/>
    <gradient
        android:type="linear"
        android:startColor="#FF512F"
        android:endColor="#DD2476"
        android:angle="90"/>
</shape>

android:angle 方向图解

在 Android 的 gradient 中使用 android:angle 属性时，它控制渐变的方向。它的单位是角度，**以“从左到右顺时针旋转”**为标准。

✅ android:angle 方向图解（基于 type="linear"）

angle	渐变方向	说明（`startColor` ➜ `endColor`）
0	从左 ➜ 右	左边是 `startColor`，右边是 `endColor`
45	从左下 ➜ 右上	斜向上渐变
90	从下 ➜ 上	下边是 `startColor`，上边是 `endColor`
135	从右下 ➜ 左上	斜向上渐变
180	从右 ➜ 左	右边是 `startColor`，左边是 `endColor`
225	从右上 ➜ 左下	斜向下渐变
270	从上 ➜ 下	上边是 `startColor`，下边是 `endColor`
315	从左上 ➜ 右下	斜向下渐变

✅ 举例说明：

<gradient
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:angle="90"/>

上面是 从下往上 渐变（即底部是红色，顶部是蓝色），不是从左到右！这也是 Android 和 CSS 的一个差异点，容易混淆。

❗注意：

angle 必须是 45 的整数倍，否则会被忽略或默认处理。
angle 的值是 顺时针旋转角度，从 0 度（从左 ➜ 右）开始。

0：从左到右
45：从左下到右上
90：从下到上
135：从右下到左上
180：从右到左
225：从右上到左下
270：从上到下
315：从左上到右下

✅图示参考：

          ↑
    270°  ↑  90°
← 180° ←     → 0° →
         ↓

🌟 注意：这个角度是 Android 中 定义渐变方向用的逻辑值，不是数学角度的坐标方向。

✅ 示例一：从左到右渐变

<gradient
    android:type="linear"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:angle="90"/>

🔸 颜色从左（红） → 右（蓝）渐变。

✅ 示例二：从上到下渐变

<gradient
    android:type="linear"
    android:startColor="#00FF00"
    android:endColor="#000000"
    android:angle="0"/>

🔸 颜色从上（绿） → 下（黑）渐变。

⚠️ 注意事项：

angle 只能是 45 的倍数（如 0、45、90、135…），否则 Android 会忽略。
默认 angle 是 0，也就是 从上到下。
android:type="linear" 时，angle 才生效。
对于 radial 和 sweep 类型，angle 不起作用。

三 radial 和 sweep的区别

🔵 radial（放射状渐变）

✅ 特点：

从中心向外发散。
渐变是圆形扩散的效果。
类似水波或聚光灯、光晕。

✅ 用法示例：

<gradient
    android:type="radial"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:centerX="0.5"
    android:centerY="0.5"
    android:gradientRadius="200"/>

✅ 参数说明：

centerX / centerY：中心点位置（0~1，表示百分比）。
gradientRadius：渐变的半径（必须设置）。
angle 无效！

✅ 视觉示意：

  渐变像个圆圈扩散出去：
     R G B
     ↓↓↓
   ●●●●●●●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●●●●●●●

🟣 sweep（扫描/扫描状渐变）