快捷導(dǎo)航

Android?gradient?使用小結(jié)

更新時間：2025年04月17日 17:10:21 作者：stevenzqzq

在Android中使用gradient（漸變）通常是通過drawable文件來設(shè)置背景,下面是可以直接用的幾種用法匯總,包括線性漸變、徑向漸變、掃描漸變（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. 設(shè)置背景到 View

android:background="@drawable/bg_gradient_linear"

? 6. 代碼中創(chuàng)建 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 屬性時，它控制漸變的方向。它的單位是角度，**以“從左到右順時針旋轉(zhuǎn)”**為標(biāo)準(zhǔn)。

? 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 的整數(shù)倍，否則會被忽略或默認處理。
angle 的值是 順時針旋轉(zhuǎn)角度，從 0 度（從左 ? 右）開始。

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

?圖示參考：

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

?? 注意：這個角度是 Android 中 定義漸變方向用的邏輯值，不是數(shù)學(xué)角度的坐標(biāo)方向。

? 示例一：從左到右漸變

<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 的倍數(shù)（如 0、45、90、135…），否則 Android 會忽略。
默認 angle 是 0，也就是 從上到下。
android:type="linear" 時，angle 才生效。
對于 radial 和 sweep 類型，angle 不起作用。

三 radial 和 sweep的區(qū)別

?? radial（放射狀漸變）

? 特點：

從中心向外發(fā)散。
漸變是圓形擴散的效果。
類似水波或聚光燈、光暈。

? 用法示例：

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

? 參數(shù)說明：

centerX / centerY：中心點位置（0~1，表示百分比）。
gradientRadius：漸變的半徑（必須設(shè)置）。
angle 無效！

? 視覺示意：

  漸變像個圓圈擴散出去：
     R G B
     ↓↓↓
   ●●●●●●●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●●●●●●●

?? sweep（掃描/掃描狀漸變）

? 特點：

從中心點繞一圈旋轉(zhuǎn)（360°）改變顏色。
類似時鐘的指針旋轉(zhuǎn)、雷達掃描。

? 用法示例：

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

? 參數(shù)說明：

centerX / centerY：設(shè)置漸變中心。
不支持 angle，方向是固定的：從 0° 順時針到 360°。

? 視覺示意：

   色彩從中間繞一圈：
      紅 → 橙 → 黃
      ↑       ↓
     紫 ← 藍 ← 綠

?? 總結(jié)對比表：

類型	視覺效果	可設(shè)置角度	中心點	常用場景
`linear`	直線方向漸變	? 支持	?	按鈕、背景、邊框線
`radial`	中心向外擴散	? 不支持	?	光暈、聚光燈、圓形按鈕
`sweep`	中心旋轉(zhuǎn)漸變	? 不支持	?	表盤、雷達、加載動畫