Android gradient 使用小结

郴1234

在 Android 中使用 gradient（渐变） 通常是通过

1. drawable

复制代码

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

✅ 1. Linear Gradient（线性渐变）

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

复制代码

🔹

1. angle

复制代码

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

✅ 2. Radial Gradient（径向渐变）

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

复制代码

🔹

1. centerX/Y

复制代码

: 百分比（0.5 表示中心）
🔹

1. gradientRadius

复制代码

: 渐变半径，单位为 px

✅ 3. Sweep Gradient（扫描渐变）

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

复制代码

✅ 4. 多色渐变

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

复制代码

✅ 5. 设置背景到 View

1. android:background="@drawable/bg_gradient_linear"

复制代码

✅ 6. 代码中创建 GradientDrawable

1. val gradient = GradientDrawable(
   
2.     GradientDrawable.Orientation.LEFT_RIGHT,
   
3.     intArrayOf(Color.RED, Color.BLUE)
   
4. )
   
5. gradient.cornerRadius = 20f
   
6. yourView.background = gradient

复制代码

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

1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
   
2.     android:shape="rectangle">
   
3.     <corners android:radius="16dp"/>
   
4.     <gradient
   
5.         android:type="linear"
   
6.         android:startColor="#FF512F"
   
7.         android:endColor="#DD2476"
   
8.         android:angle="90"/>
   
9. </shape>

复制代码

android:angle 方向图解

在 Android 的

1. gradient

复制代码

中使用

1. android:angle

复制代码

属性时，它控制渐变的方向。它的单位是角度，**以“从左到右顺时针旋转”**为标准。
✅

1. android:angle

复制代码

方向图解（基于

1. type="linear"

复制代码

）
angle渐变方向说明（

1. startColor

复制代码

➜

1. endColor

复制代码

）0从左 ➜ 右左边是

1. startColor

复制代码

，右边是

1. endColor

复制代码

45从左下 ➜ 右上斜向上渐变90从下 ➜ 上下边是

1. startColor

复制代码

，上边是

1. endColor

复制代码

135从右下 ➜ 左上斜向上渐变180从右 ➜ 左右边是

1. startColor

复制代码

，左边是

1. endColor

复制代码

225从右上 ➜ 左下斜向下渐变270从上 ➜ 下上边是

1. startColor

复制代码

，下边是

1. endColor

复制代码

315从左上 ➜ 右下斜向下渐变
✅ 举例说明：

1. <gradient
   
2.     android:startColor="#FF0000"
   
3.     android:endColor="#0000FF"
   
4.     android:angle="90"/>

复制代码

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

• 1. angle

  复制代码
  必须是 45 的整数倍，否则会被忽略或默认处理。
  
• 1. angle

  复制代码
  的值是 顺时针旋转角度，从 0 度（从左 ➜ 右）开始。
  

0：从左到右
45：从左下到右上
90：从下到上
135：从右下到左上
180：从右到左
225：从右上到左下
270：从上到下
315：从左上到右下
✅图示参考：

1.           ↑
   
2.     270°  ↑  90°
   
3. ← 180° ←     → 0° →
   
4.          ↓

复制代码

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

复制代码

✅ 示例一：从左到右渐变

1. <gradient
   
2.     android:type="linear"
   
3.     android:startColor="#FF0000"
   
4.     android:endColor="#0000FF"
   
5.     android:angle="90"/>

复制代码

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

✅ 示例二：从上到下渐变

1. <gradient
   
2.     android:type="linear"
   
3.     android:startColor="#00FF00"
   
4.     android:endColor="#000000"
   
5.     android:angle="0"/>

复制代码

🔸 颜色从上（绿） → 下（黑） 渐变。
⚠️ 注意事项：

• 1. angle

  复制代码
  只能是 45 的倍数（如 0、45、90、135…），否则 Android 会忽略。
  
• 默认
  1. angle

  复制代码
  是
  1. 0

  复制代码
  ，也就是 从上到下。
  
• 1. android:type="linear"

  复制代码
  时，
  1. angle

  复制代码
  才生效。
  
• 对于
  1. radial

  复制代码
  和
  1. sweep

  复制代码
  类型，
  1. angle

  复制代码
  不起作用。
  

三

1. radial

复制代码

和

1. sweep

复制代码

的区别
🔵

1. radial

复制代码

（放射状渐变）
✅ 特点：

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

✅ 用法示例：

1. <gradient
   
2.     android:type="radial"
   
3.     android:startColor="#FF0000"
   
4.     android:endColor="#0000FF"
   
5.     android:centerX="0.5"
   
6.     android:centerY="0.5"
   
7.     android:gradientRadius="200"/>

复制代码

✅ 参数说明：

• 1. centerX

  复制代码
  /
  1. centerY

  复制代码
  ：中心点位置（0~1，表示百分比）。
  
• 1. gradientRadius

  复制代码
  ：渐变的半径（必须设置）。
  
• 1. angle

  复制代码
  无效！
  

✅ 视觉示意：

1.   渐变像个圆圈扩散出去：
   
2.      R G B
   
3.      ↓↓↓
   
4.    ●●●●●●●●
   
5.    ●●◎◎◎●●
   
6.    ●●◎◎◎●●
   
7.    ●●◎◎◎●●
   
8.    ●●●●●●●●

复制代码

🟣

1. sweep

复制代码

（扫描/扫描状渐变）
✅ 特点：

• 从中心点绕一圈旋转（360°）改变颜色。
  
• 类似时钟的指针旋转、雷达扫描。
  

✅ 用法示例：

1. <gradient
   
2.     android:type="sweep"
   
3.     android:startColor="#FF0000"
   
4.     android:endColor="#0000FF"
   
5.     android:centerX="0.5"
   
6.     android:centerY="0.5"/>

复制代码

✅ 参数说明：

• 1. centerX

  复制代码
  /
  1. centerY

  复制代码
  ：设置渐变中心。
  
• 不支持
  1. angle

  复制代码
  ，方向是固定的：从 0° 顺时针到 360°。
  

✅ 视觉示意：

1.    色彩从中间绕一圈：
   
2.       红 → 橙 → 黄
   
3.       ↑       ↓
   
4.      紫 ← 蓝 ← 绿

复制代码

🔄 总结对比表：
类型视觉效果可设置角度中心点常用场景

1. linear

复制代码

直线方向渐变✅ 支持❌按钮、背景、边框线

1. radial

复制代码

中心向外扩散❌ 不支持✅光晕、聚光灯、圆形按钮

1. sweep

复制代码

中心旋转渐变❌ 不支持✅表盘、雷达、加载动画到此这篇关于Android gradient 使用的文章就介绍到这了,更多相关Android gradient 使用内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

寻伊伊寄

感谢楼主分享。