Android?gradient?使用小結(jié)
在 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
屬性時(shí),它控制漸變的方向。它的單位是角度,**以“從左到右順時(shí)針旋轉(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"/>
上面是 從下往上 漸變(即底部是紅色,頂部是藍(lán)色),不是從左到右!這也是 Android 和 CSS 的一個(gè)差異點(diǎn),容易混淆。
?注意:
angle
必須是 45 的整數(shù)倍,否則會(huì)被忽略或默認(rèn)處理。angle
的值是 順時(shí)針旋轉(zhuǎn)角度,從 0 度(從左 ? 右)開始。
0:從左到右
45:從左下到右上
90:從下到上
135:從右下到左上
180:從右到左
225:從右上到左下
270:從上到下
315:從左上到右下
?圖示參考:
↑ 270° ↑ 90° ← 180° ← → 0° → ↓
?? 注意:這個(gè)角度是 Android 中 定義漸變方向用的邏輯值,不是數(shù)學(xué)角度的坐標(biāo)方向。
? 示例一:從左到右漸變
<gradient android:type="linear" android:startColor="#FF0000" android:endColor="#0000FF" android:angle="90"/>
?? 顏色從左(紅) → 右(藍(lán)) 漸變。
? 示例二:從上到下漸變
<gradient android:type="linear" android:startColor="#00FF00" android:endColor="#000000" android:angle="0"/>
?? 顏色從上(綠) → 下(黑) 漸變。
?? 注意事項(xiàng):
angle
只能是 45 的倍數(shù)(如 0、45、90、135…),否則 Android 會(huì)忽略。- 默認(rèn)
angle
是0
,也就是 從上到下。 android:type="linear"
時(shí),angle
才生效。- 對(duì)于
radial
和sweep
類型,angle
不起作用。
三 radial
和 sweep
的區(qū)別
?? radial
(放射狀漸變)
? 特點(diǎn):
- 從中心向外發(fā)散。
- 漸變是圓形擴(kuò)散的效果。
- 類似水波或聚光燈、光暈。
? 用法示例:
<gradient android:type="radial" android:startColor="#FF0000" android:endColor="#0000FF" android:centerX="0.5" android:centerY="0.5" android:gradientRadius="200"/>
? 參數(shù)說明:
centerX
/centerY
:中心點(diǎn)位置(0~1,表示百分比)。gradientRadius
:漸變的半徑(必須設(shè)置)。angle
無效!
? 視覺示意:
漸變像個(gè)圓圈擴(kuò)散出去: R G B ↓↓↓ ●●●●●●●● ●●◎◎◎●● ●●◎◎◎●● ●●◎◎◎●● ●●●●●●●●
?? sweep
(掃描/掃描狀漸變)
? 特點(diǎn):
- 從中心點(diǎn)繞一圈旋轉(zhuǎn)(360°)改變顏色。
- 類似時(shí)鐘的指針旋轉(zhuǎn)、雷達(dá)掃描。
? 用法示例:
<gradient android:type="sweep" android:startColor="#FF0000" android:endColor="#0000FF" android:centerX="0.5" android:centerY="0.5"/>
? 參數(shù)說明:
centerX
/centerY
:設(shè)置漸變中心。- 不支持
angle
,方向是固定的:從 0° 順時(shí)針到 360°。
? 視覺示意:
色彩從中間繞一圈: 紅 → 橙 → 黃 ↑ ↓ 紫 ← 藍(lán) ← 綠
?? 總結(jié)對(duì)比表:
類型 | 視覺效果 | 可設(shè)置角度 | 中心點(diǎn) | 常用場(chǎng)景 |
---|---|---|---|---|
linear | 直線方向漸變 | ? 支持 | ? | 按鈕、背景、邊框線 |
radial | 中心向外擴(kuò)散 | ? 不支持 | ? | 光暈、聚光燈、圓形按鈕 |
sweep | 中心旋轉(zhuǎn)漸變 | ? 不支持 | ? | 表盤、雷達(dá)、加載動(dòng)畫 |
到此這篇關(guān)于Android gradient 使用的文章就介紹到這了,更多相關(guān)Android gradient 使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android自定義View實(shí)現(xiàn)箭頭沿圓轉(zhuǎn)動(dòng)實(shí)例代碼
這篇文章主要介紹了Android自定義View實(shí)現(xiàn)箭頭沿圓轉(zhuǎn)動(dòng)實(shí)例代碼,需要的朋友可以參考下2017-09-09Android開發(fā)之手勢(shì)檢測(cè)及通過手勢(shì)實(shí)現(xiàn)翻頁功能的方法
這篇文章主要介紹了Android開發(fā)之手勢(shì)檢測(cè)及通過手勢(shì)實(shí)現(xiàn)翻頁功能的方法,結(jié)合實(shí)例形式分析了Android GestureDetector類實(shí)現(xiàn)手勢(shì)檢測(cè)功能的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09在android開發(fā)中盡量不要使用中文路徑的問題詳解
本篇文章對(duì)在android開發(fā)中盡量不要使用中文路徑的問題進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05android實(shí)現(xiàn)主動(dòng)連接和被動(dòng)連接的藍(lán)牙聊天功能
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)主動(dòng)連接和被動(dòng)連接的藍(lán)牙聊天功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Android自定義View中attrs.xml的實(shí)例詳解
這篇文章主要介紹了Android自定義View中attrs.xml的實(shí)例詳解的相關(guān)資料,在自定義View首先對(duì)attrs.xml進(jìn)行布局的實(shí)現(xiàn)及屬性的應(yīng)用,需要的朋友可以參考下2017-07-07android藍(lán)牙簡(jiǎn)單開發(fā)示例教程
大家好,本篇文章主要講的是android藍(lán)牙簡(jiǎn)單開發(fā)示例教程,感興趣的同學(xué)趕快來看一看吧,對(duì)你有幫助的話記得收藏一下2021-12-12Android序列化之Parcelable和Serializable的使用詳解
本篇文章主要介紹了Android序列化之Parcelable和Serializable的使用詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01