圖文詳解Andorid中用Shape定義GradientDrawable

孫群發表於2016-01-01

原文網址 : https://blog.csdn.net/iispring/article/details/50437731

Android中提供了各種型別的Drawable，也可以用XML定義各種Drawable。本文重點講述如何用XML中的shape節點定義GradientDrawable。

用XML定義的drawable檔案放在res/drawable目錄下。

用XML檔案定義GradientDrawable的語法如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

該檔案以<shape>為根結點，其shape屬性可取四種值：rectangle、oval、line或ring。以上語法格式中雖然列出了很多屬性，但是並不是對於所有型別的shape都支援這些屬性。下面分別對這四種shape進行講解。

rectangle

在res/drawable下面用XML檔案定義了一個名為rectangle的GradientDrawable，其對應的shape值為rectangle，表明我們定義的drawable的形狀是矩形。在layout檔案中定義了一個TextView，其使用了上述drawable，如下所示：

<TextView android:text="@string/hello_world"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:background="@drawable/rectangle" />

solid

rectangle.xml定義如下所示：
```
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <solid android:color="#00ff00" />
</shape>
```
在上面的XML檔案中，我們將shape屬性設定為rectangle，我們將<solid>節點的color屬性設定為綠色，<solid>屬性是用來設定面的填充色的，效果如下所示：
corners
<corners>節點用於設定drawable四個拐角的半徑，對應的XML檔案如下所示：
```
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <solid android:color="#00ff00" />
    <corners android:radius="20dp" />
</shape>
```
效果如下所示：

只有當shape屬性值為rectangle時，<corners>節點才會有用。<corners>節點的radius屬性同時定義了四個角的半徑，如果想讓這四個角的半徑不一樣，可以分別設定topLeftRadius、topRightRadius、bottomLeftRadius和bottomRightRadius屬性，不過在設定這四個屬性之前應先設定radius屬性作為預設值，且預設值要大於1，無法正常使用其他四個屬性。

padding
<padding>節點用於設定drawable的padding，可以分別設定left、right、top、bottom四個屬性，其作用與直接對TextView設定的四個paddingLeft、paddingRight、paddingTop、paddingBottom屬性等價。

XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <solid android:color="#00ff00" />
    <corners android:radius="20dp" />
    <padding android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        android:bottom="10dp" />
</shape>

效果如下所示：
這裡寫圖片描述

size
可以用<size>節點的width和height屬性設定drawable的尺寸。預設情況下，用<shape>定義的drawable會自動縮放到包含drawable的View尺寸範圍。比如我們有如下的ImageView的src設定了<shape>定義的drawable，當我們設定了其scaleType值為center時，<shape>中定義的size尺寸就會限制drawable縮放。

定義的ImageView如下所示：

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/rectangle"
    android:scaleType="center"
    />

對應的drawable定義如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <solid android:color="#00ff00" />
    <corners android:radius="20dp" />
    <size android:width="100dp"
        android:height="100dp" />
</shape>

效果如下所示：
這裡寫圖片描述

stroke
可以用<stroke>節點設定drawable的輪廓線，通過width屬性設定輪廓線的寬度，通過color屬性設定輪廓線的顏色。預設情況下，<stroke>定義的是實線，除此之外，還可以設定dashWidth和dashGap屬性，如果設定了這兩個屬性，那麼就是虛線。其中，dashWidth定義了每個虛線段的長度，dashGap定義了兩個虛線段之間的距離。

對應的XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <solid android:color="#00ff00" />
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <stroke android:width="1dp"
        android:color="#0000ff"
        android:dashWidth="8dp"
        android:dashGap="2dp" />
</shape>

效果如下所示：
這裡寫圖片描述

gradient
上面我們說到，通過<solid>可以設定drawable的顏色，但是隻是一種純色，如果想讓drawable產生漸變效果，可以使用<gradient>節點建立漸變色效果。<gradient>節點具有以下屬性：type、startColor、centerColor、endColor、angle、centerX、centerY、gradientRadius。其中type有三種取值：linear、radial和sweep，預設值是linear。當type取不同的值時，<gradient>並不是支援全部屬性，下面詳細說明。

linear
當<gradient>的type值為linear時，表示顏色是線性漸變的，此時支援startColor、centerColor、endColor、angle這四個屬性，其他屬性不支援。我們可以通過設定startColor和endColor指定漸變的起始顏色以及終止顏色，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="linear"
        android:startColor="#ff0000"
        android:endColor="#0000ff" />
</shape>

我們將startColor設定為紅色，endColor設定為藍色，效果如下所示：
這裡寫圖片描述

我們還可以設定centerColor屬性，指定中間色，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="linear"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff" />
</shape>

我們將中間色設定為綠色，效果如下所示：
這裡寫圖片描述

預設情況下，漸變是從左向右進行的，如果想調整漸變的方向可以設定angle屬性，angle的預設值為0，對應著自左向右漸變,angle的單位是角度，angle的值必須是45的倍數，否則不會有漸變效果。我們可以更改angle值，XML如下所示:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="linear"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="90" />
</shape>

我們將angle設定為90度，那麼漸變方向就變成了從下上，效果如下所示：
這裡寫圖片描述

radial
當<gradient>的type值為radial時，表示顏色從某點向周圍輻射漸變，此時支援除angle之外的其他所有屬性。我們必須通過設定gradientRadius屬性以指定漸變的輻射半徑，通過startColor指定起始顏色，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="radial"
        android:gradientRadius="50dp"
        android:startColor="#ff0000" />
</shape>

我們將startColor設定為紅色，效果如下所示：
這裡寫圖片描述

由上圖我們可以發現，startColor（紅色）從中心沿著圓的半徑逐漸變淡。

在設定了startColor的基礎上，我們還可以設定centerColor，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="radial"
        android:gradientRadius="50dp"
        android:startColor="#ff0000"
        android:centerColor="#00ff00" />
</shape>

效果如下圖所示：
這裡寫圖片描述

由上圖可以看出，startColor（紅色）從中心沿著圓的半徑逐漸漸變到centerColor（綠色）。

除了設定startColor、centerColor，還可以設定endColor，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="radial"
        android:gradientRadius="50dp"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff" />
</shape>

我們將centerColor設定為綠色，效果如下所示：
這裡寫圖片描述
由上圖可以看出，startColor（紅色）從中心沿著圓的半徑逐漸漸變到centerColor（綠色），在指定的半徑之外顏色用endColor（藍色）填充。

其實，startColor、centerColor、endColor這三個屬性可以任意組合，大家可以自己嘗試一下各種組合的效果。

預設圓心的位置處於drawable的中心，我們可以通過centerX和centerY屬性改變漸變圓心的位置，centerX和centerY的取值範圍都是0到1，這兩個屬性的預設值都是0.5，drawable的左上角的centerX和centerY的值都是0，右下角的centerX和centerY的值都是1。我們改變centerX和centerY的值，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="radial"
        android:gradientRadius="50dp"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:centerX="0"
        android:centerY="0.5" />
</shape>

效果如下所示：
這裡寫圖片描述

sweep
當<gradient>的type值為sweep時，表示顏色是圍繞中心點360度順時針旋轉的，起點就是3點鐘位置。
我們可以只設定startColor，XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="sweep"
        android:startColor="#ff0000" />
</shape>

我們將startColor設定為紅色，效果如下所示：
這裡寫圖片描述

我們也可以只設定endColor，XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="sweep"
        android:endColor="#0000ff" />
</shape>

將endColor設定為藍色，效果如下所示：
這裡寫圖片描述

我們也可以只設定centerColor的值，XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="sweep"
        android:centerColor="#00ff00" />
</shape>

將centerColor設定為綠色，效果如下所示：
這裡寫圖片描述

我們也可以同時設定startColor、centerColor、endColor的值，XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff" />
</shape>

將startColor、centerColor、endColor分別設定為紅、綠、藍，效果如下所示：
這裡寫圖片描述

centerX和centerY的預設值都是0.5，表示中心點的預設位置就是drawable的中心，我們也可以更改centerX和centerY的值，從而更新中心點的位置，XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="20dp" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <gradient android:type="sweep"
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:centerX="0.25"
        android:centerY="0.5" />
</shape>

我們將centerX的值設定為0.25,效果如下所示：
這裡寫圖片描述

oval

在res/drawable下面用XML檔案定義了一個名為oval的GradientDrawable，其對應的shape值為oval，表示drawable的形狀是橢圓，並將該drawable作為TextView的background。oval和rectangle的主要區別就是drawable的形狀不同，大部分的節點屬性的作用是相同的。

solid
如同rectangle，我們可以通過solid指定drawable的顏色，XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#00ff00" />
</shape>

效果如下所示：
這裡寫圖片描述

corners
當shape為oval時，不支援<corners>節點。
padding
oval同樣支援<padding>節點，將四個padding值設定為20dp，效果如下所示：
size
oval不支援<size>節點。
stroke
同rectangle一樣，我們也可以為oval設定<stroke>，效果如下所示：
gradient
oval同樣支援<gradient>節點實現漸變效果，type屬性也是支援linear、radial、sweep三個屬性。<gradient>節點實現的漸變效果桶rectangle的漸變效果基本一樣。
- linear
  當type為linear時，實現線性漸變效果，我們將startColor、centerColor、endColor分別設定為紅、綠、藍，並設定angle為45度，效果如下所示：
- radial
  當type為radial時，實現放射漸變效果，我們將startColor、centerColor、endColor分別設定為紅、綠、藍，效果如下所示：
- sweep
  當type為sweep時，表示顏色是圍繞中心點360度順時針旋轉的，起點就是3點鐘位置。我們將startColor、centerColor、endColor分別設定為紅、綠、藍，效果如下所示：
  
  <gradient>節點中的多個引數組合的效果可以參見上述rectangle中的說明。

line

在res/drawable下面用XML檔案定義了一個名為line的GradientDrawable，其對應的shape值為line，並將該drawable作為TextView的background。當shape為line時，表示drawable的形狀是線，該線會分割drawable。line只支援<stroke>和<padding>兩個節點，不支援其他的節點。

XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:color="#0000ff"
        android:width="1dp"
        android:dashWidth="8dp"
        android:dashGap="2dp" />
    <padding android:left="20dp"
        android:right="20dp"
        android:top="20dp"
        android:bottom="20dp" />
</shape>

效果如下所示：
這裡寫圖片描述

ring

在res/drawable下面用XML檔案定義了一個名為ring的GradientDrawable，其對應的shape值為ring，表示drawable的形狀是圓環，並將該drawable作為TextView的background。所謂圓環就是大圓套小圓。當shape為ring時，shape有額外的四個屬性可用：innerRadius、thickness、innerRadiusRatio、thicknessRatio。

需要特別注意的是，在API<=19的真機上使用shape為ring的drawable時，Android有個bug，會不顯示drawable，解決辦法是將shape設定useLevel屬性為true。

我們通過innerRadius指定小圓的半徑，通過thickness指定大圓和小圓之間的寬度。XML如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="20dp"
    android:useLevel="false">
    <solid android:color="#00ff00" />
    <padding android:left="20dp"
        android:right="20dp"
        android:top="20dp"
        android:bottom="20dp" />
</shape>

效果如下所示：
這裡寫圖片描述

我們還可以通過innerRadiusRatio指定小圓的半徑，innerRadiusRatio的值是float型別，如果其值是9，表示小圓的半徑等於TextView寬度的1/9。同樣，也可以通過thicknessRatio指定大圓和小圓之間的寬度，其值型別也是float，如果值為8，則表示大小圓之間的寬度等於TextView的1/8。XML檔案如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="9"
    android:thicknessRatio="8"
    android:useLevel="false">
    <solid android:color="#00ff00" />
    <padding android:left="20dp"
        android:right="20dp"
        android:top="20dp"
        android:bottom="20dp" />
</shape>

效果如下所示：
這裡寫圖片描述

如果給ring設定了<stroke>，那麼大小圓都會使用該設定的輪廓線，效果如下所示：
這裡寫圖片描述

ring同樣支援<gradient>實現漸變效果，預設type為linear，只將startColor設定為紅色，效果如下所示：
這裡寫圖片描述

type為linear時，只將centerColor設定為綠色，效果如下所示：
這裡寫圖片描述

type為linear時，只將endColor設定為藍色，效果如下所示：
這裡寫圖片描述

type為linear時，<gradient>也支援angle引數。大家可以自己嘗試多種顏色的組合效果。

當<gradient>的type值設定為gradial時，需要指定gradientRadius屬性，否則會報錯。gradial並不能像上面那樣實現輻射漸變效果，gradial的ring只是用startColor填充圓環的顏色，實現的效果與指定<solid>節點中的color屬性相同，此處就不貼圖了。

當type為sweep時，表示顏色是圍繞中心點360度順時針旋轉的，起點就是3點鐘位置。我們將startColor、centerColor、endColor分別設定為紅、綠、藍，效果如下所示：
這裡寫圖片描述

希望本文對大家用Shape定義GradientDrawable有所幫助！

相關閱讀：
我的Android博文整理彙總

java中printf中用法詳解
2020-10-17
Java
Java泛型詳解，史上最全圖文詳解！
2022-02-14
Java泛型
JVM 堆的定義與詳解
2020-10-17
JVM
PopClip使用教程圖文詳解
2022-12-12
微服務定義及.Net Core中用的技術
2018-06-03
微服務
分頁機制圖文詳解
2018-03-11
一文詳解！什麼是裝置管理？裝置管理概念、功能、定義解讀！
2024-11-11
WPF 2D圖形 Shape入門（一）--Shape
2021-05-28
CentOS 7安裝教程（圖文詳解）
2024-06-14
CentOS
圖文詳解23種設計模式
2021-12-29
設計模式
圖文並茂詳解 NAT 協議！
2022-02-23
協議
Jenkins安裝部署使用圖文詳解（非常詳細）
2021-12-23
Jenkins
EventBus 3.0+ 原始碼詳解（史上最詳細圖文講解）
2018-07-30
原始碼
Spring 定時任務Scheduled 開發詳細圖文
2018-10-09
Spring
android開發中，button設定shape後，shape的顏色不生效的問題解決方案
2024-11-22
Android
事務隔離級別(圖文詳解)
2019-04-10
ZooKeeper最全詳解(萬字圖文總結)
2024-02-20
微服務最全詳解(圖文全面總結)
2024-02-07
微服務
常用負載均衡詳解（圖文總結）
2024-03-14
負載
Wgpu圖文詳解（03）緩衝區Buffer
2024-11-18
GPU
LL圖文詳解mysql中with...as用法hux
2022-03-01
MySqlUX
cookie與session的區別（圖文詳解）
2020-12-23
CookieSession
Spring系列第四講 xml中bean定義詳解
2020-10-28
SpringXMLBean
負載均衡最全詳解(圖文全面總結)
2024-02-08
負載
mysql資料庫的安裝（圖文詳解）
2024-03-17
MySql資料庫
圖文詳解 HDFS 的工作機制及其原理
2022-05-19
Java單連結串列反轉圖文詳解
2021-04-02
Java
圖文詳解Java物件記憶體佈局
2021-04-03
Java物件記憶體
卡卡西：一文詳解explain各欄位含義
2021-09-18
AI
vue內建元件——transition簡單原理圖文詳解
2018-07-11
Vue元件
分散式儲存最全詳解(圖文全面總結)
2024-02-21
分散式
Pandas 資料分析——Merge 資料拼接圖文詳解
2020-01-15
sqli-labs-less-4圖文詳解，適合小白
2020-10-23
SQL
Wgpu圖文詳解（02）渲染管線與著色器
2024-11-07
GPU
微服務 Zipkin 鏈路追蹤原理(圖文詳解)
2022-10-25
微服務
Kafka 架構和原理機制 (圖文全面詳解)
2022-11-01
Kafka架構
iOS AppStore上架流程圖文詳解2021版 (上)
2023-02-10
iOSAPP流程圖
Kali 2021.2 最新安裝教程圖文詳解（保姆式）
2021-06-17
一文詳解特徵縮放、標準化、歸一化的定義、區別、特點和作用
2020-10-25
特徵

圖文詳解Andorid中用Shape定義GradientDrawable

rectangle

oval

line

ring

相關文章