在 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"/><gradientandroid: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 | 從左上 ? 右下 | 斜向下漸變 |
? 舉例說明:
<gradientandroid: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 中 定義漸變方向用的邏輯值,不是數學角度的坐標方向。
? 示例一:從左到右漸變
<gradientandroid:type="linear"android:startColor="#FF0000"android:endColor="#0000FF"android:angle="90"/>
🔸 顏色從左(紅) → 右(藍) 漸變。
? 示例二:從上到下漸變
<gradientandroid: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
(放射狀漸變)
? 特點:
- 從中心向外發散。
- 漸變是圓形擴散的效果。
- 類似水波或聚光燈、光暈。
? 用法示例:
<gradientandroid: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
(掃描/掃描狀漸變)
? 特點:
- 從中心點繞一圈旋轉(360°)改變顏色。
- 類似時鐘的指針旋轉、雷達掃描。
? 用法示例:
<gradientandroid:type="sweep"android:startColor="#FF0000"android:endColor="#0000FF"android:centerX="0.5"android:centerY="0.5"/>
? 參數說明:
centerX
/centerY
:設置漸變中心。- 不支持
angle
,方向是固定的:從 0° 順時針到 360°。
? 視覺示意:
色彩從中間繞一圈:紅 → 橙 → 黃↑ ↓紫 ← 藍 ← 綠
🔄 總結對比表:
類型 | 視覺效果 | 可設置角度 | 中心點 | 常用場景 |
---|---|---|---|---|
linear | 直線方向漸變 | ? 支持 | ? | 按鈕、背景、邊框線 |
radial | 中心向外擴散 | ? 不支持 | ? | 光暈、聚光燈、圓形按鈕 |
sweep | 中心旋轉漸變 | ? 不支持 | ? | 表盤、雷達、加載動畫 |