在 Android 中使用 gradient(渐变) 通常是通过 drawable
文件来设置背景。下面是可以直接用的几种用法汇总,包括线性渐变、径向渐变、扫描渐变(sweep)等:
<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 为从左往右)。
<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
<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" />
<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" />
android:background="@drawable/bg_gradient_linear"
val gradient = GradientDrawable(
GradientDrawable.Orientation.LEFT_RIGHT,
intArrayOf(Color.RED, Color.BLUE)
)
gradient.cornerRadius = 20f
yourView.background = gradient
<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 的 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
(扫描/扫描状渐变)<gradient
android:type="sweep"
android:startColor="#FF0000"
android:endColor="#0000FF"
android:centerX="0.5"
android:centerY="0.5"/>
centerX
/ centerY
:设置渐变中心。angle
,方向是固定的:从 0° 顺时针到 360°。 色彩从中间绕一圈:
红 → 橙 → 黄
↑ ↓
紫 ← 蓝 ← 绿
类型 | 视觉效果 | 可设置角度 | 中心点 | 常用场景 |
---|---|---|---|---|
linear |
直线方向渐变 | ✅ 支持 | ❌ | 按钮、背景、边框线 |
radial |
中心向外扩散 | ❌ 不支持 | ✅ | 光晕、聚光灯、圆形按钮 |
sweep |
中心旋转渐变 | ❌ 不支持 | ✅ | 表盘、雷达、加载动画 |