Android XML shape 標籤使用詳解
一個android開發者肯定懂得使用 xml 定義一個 Drawable，比如定義一個 rect 或者 circle 作爲一個 View 的背景。但是，也肯定也有人在能使用 Drawable 的地方選擇使用一張 png 圖（或者是一張 .9 圖）作爲 View 的背景，因爲後者把問題交給 UI 設計人員去了，省事。當然，使用圖片這種在項目中也很常見，如果不考慮 apk 大小，內存佔用問題的話，是沒有任何問題的。如果要給 apk 瘦身，減少內存佔用，那麼本文 Drawable 的價值就提現出來了。首先提出幾個問題？
備註：本文所說的 Drawable 都特指 shape 標籤定義的 Drawable
- shape 標籤定義的 Drawable 是哪種類型的 Drawable?
- 使用 Drawable 有什麼好處？
- 什麼情況下選擇使用 Drawable，而不是使用一張圖，反之呢？
- shape 標籤能定義多少種類型的 Drawable？（這是本文的重點，方便我這種懶惰的程序員直接拷貝代碼修改）
本文需要先了解shape標籤的基本用法，關於Android shape標籤的各個屬性詳解請移步：
Android GradientDrawable(shape標籤定義) 靜態使用和動態使用(圓角，漸變實現)
首先給出GitHub地址，後續有新的內容會持續加入
https://github.com/PopFisher/AndroidDrawClassic
下面依次回答上面幾個問題
shape標籤定義的Drawable是哪種類型的Drawable?
shape 標籤定義的 Drawable 類型對應 GradientDrawable
這裏可能會認爲是 ShapeDrawale ，我一開始也是這樣認爲的，因爲我看到官方文檔上說 ShapeDrawable 也是使用 shape 標籤定義的，可是去看 GradientDrawable 的時候也是同樣的解釋，簡直懵逼了，後面經過代碼實際檢驗，shape 標籤定義的 Drawable 能直接強制轉換爲 GradientDrawable，而不能轉換爲 ShapeDrawable，這個時候只能認爲是 ShapeDrawable 的文檔解釋有點問題了，可能文檔錯了吧。
ShapeDrawable 與 GradientDrawale 確實有很多相似之處，具體情況後續單獨寫文章來說明，本文不涉及 ShapeDrawable 的其他內容。
使用Drawable有什麼好處？
- 很方便得到一個矩形，圓，橢圓，圓環，很容易維護和修改
- 很方便實現圓角，漸變（線性漸變，徑向漸變，掃描漸變）
- 代替圖片作爲 View 的背景，減少 apk 的體積（減少 apk 體積最明顯最有效的步驟就是去掉圖片）
- 大圖片耗內存，使用 Drawable 節省內存，Android 本身對 Drawable 做了很好的優化（內存優化需要考慮）
什麼情況下選擇使用Drawable，而不是使用一張圖，反之呢？
- 理論上能用 Drawable 的地方就用 Drawable
- 如果能夠通過 shape 標籤就能定義的幾何圖形就能滿足需求，就不用圖片來表示
- 漸變類型的背景也儘量使用 shape 來實現
- 不規則的，複雜的圖形還是隻能使用圖片，比如要一個表示手機的圖標，一個人的頭像
- 有些特殊拉昇效果需要使用 .9.png 圖片（儘可能的小吧，越小越省內存）
shape標籤能定義多少種類型的Drawable？
shape 可以定義四種類型的幾何圖形，由 android:shape 屬性指定
line --> 線
rectangle --> 矩形（圓角矩形）
oval --> 橢圓，圓
ring --> 圓環
shape 可以定義邊框屬性
有邊框，無邊框，虛線邊框，實線邊框
shape 可以實現矩形圓角效果
可以指定其中一個角或者多個角設置圓角效果
指定圓角半徑設置圓角的大小
shape 可以實現三種漸變，由子標籤 gradient 實現
linear --> 線性漸變（水平，垂直，對角線三個漸變）
sweep --> 掃描漸變（只支持順時針方向，其實顏色反過來就跟逆時針一樣的了）
radial --> 徑向漸變（由指定的中心點開始向外漸變，指定半徑）
xml 實現只支持三個顏色，startColor，CenterColor，endColor
更多更詳細關於 shape 的介紹請移步 Android GradientDrawable(shape標籤定義) 靜態使用和動態使用(圓角，漸變實現)
由上面的組合可以定義很多 Drawable，下面依次進行介紹：
線（實線+虛線）
實線：line_solid.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 實線 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>虛線：line_dashed.xml
<?xml version="1.0" encoding="utf-8"?>
<!--虛線
設置類型會line
需要關閉硬件加速虛線才能繪製出來，佈局文件中使用的時候需要設置android:layerType="software"
android:width 線寬，佈局文件中的View的高度需要比這個值大纔可以繪製出來
android:dashWidth 每段破折線的長度
android:dashGap="5dp"每段破折線之間的間隔-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
android:useLevel="true">
<stroke
android:width="2dp"
android:dashGap="5dp"
android:dashWidth="10dp"
android:color="#ffff0000" />
</shape>矩形（邊框+填充）
矩形實線邊框內部無填充：rect_solid_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 實線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>矩形虛線邊框內部無填充：rect_dashed_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000"
android:dashGap="5dp"
android:dashWidth="10dp" />
</shape>矩形實線邊框-內部填充：rect_solid_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 實線邊框+內部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#ff00ffff" />
span class="hljs-tag"></shape>矩形虛線邊框-內部填充：rect_dashed_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框+內部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000"
android:dashGap="5dp"
android:dashWidth="10dp" />
<solid android:color="#ff00ffff" />
</shape>圓角矩形
圓角矩形-只有邊框：rect_rounded_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="100dp"
android:width="100dp"/>
<stroke
android:width="2dp"
android:color="#ffff0000" />
<corners android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>圓角矩形-只有內部填充：rect_rounded_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓角矩形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="100dp"
android:width="100dp"/>
<solid android:color="#8000ff00" />
<corners android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>圓角矩形-有邊框有填充:rect_rounded_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框+填充 圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="100dp"
android:width="100dp"/>
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#8000ff00" />
<corners android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>圓角矩形-左邊圓角爲一個半圓弧：rect_rounded_left_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊爲一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="10dp" />
<solid android:color="#8000ff00" />
<!-- 圓角半徑是高度的一般就是一個圓弧了 -->
<corners
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp" />
</shape>圓角矩形-左右兩邊都是半圓弧:rect_rounded_left_right_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊爲一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="10dp" />
<solid android:color="#8000ff00" />
<!-- 圓角半徑是高度的一般就是一個圓弧了 -->
<corners android:radius="20dp" />
</shape>圓角矩形-左右兩邊都是半圓弧-帶邊框：rect_rounded_left_right_arc_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊爲一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="10dp" />
&t;stroke android:color="#ffff0000"
android:width="2dp"/>
</shape>
漸變效果（以矩形爲例）
垂直線性漸變：rect_gradient_linear_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-線性垂直漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 調整angle實現水平漸變，垂直漸變或者對角漸變 -->
<gradient
android:angle="-45"
android:centerX="0.5"
android:centerY="0.4"
android:centerColor="#8000ff00"
android:endColor="#1000ff00"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>水平線性漸變:rect_gradient_linear_horizon.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-線性水平漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 調整angle實現水平漸變，垂直漸變或者對角漸變 -->
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#8000ff00"
android:endColor="#ff00ff00"
android:startColor="#1000ff00"
android:type="linear" />
</shape>對角線線性漸變：rect_gradient_linear_diagonal.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-線性對角線漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 調整angle實現水平漸變，垂直漸變或者對角漸變 -->
<gradient
android:angle="45"
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#8000ff00"
android:endColor="#1000ff00"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>徑向漸變：rect_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-徑向漸變,一般不用在rect上，用到圓或者橢圓上 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 徑向漸變angle無效 -->
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#0000ff00"
android:endColor="#ff00ff00"
android:gradientRadius="40dp"
android:type="radial" />
</shape>掃描漸變：rect_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<!--如果佈局中沒有設置View的大小，會size設置的大小爲默認值-->
<size
android:width="20dp"
android:height="20dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!--調整angle不能實現角度變化
centerX,centerY是中心點的位置，這裏用的是百分比值（0-1）
在rect中gradientRadius無效-->
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#ff00ff00"
android:gradientRadius="20dp"
android:type="sweep" />
</shape>圓（邊框+填充+漸變）
圓-邊框：circle_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>圓-填充：circle_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 + 填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="80dp"
android:height="80dp" />
<solid android:color="#800000ff" />
</shape>圓-邊框填充：circle_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 + 填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#800000ff" />
</shape>線性漸變：circle_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內部填充-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<!-- angle調整漸變角度，只能是45的倍數，centerX, centerY是百分百（0-1） -->
<gradient
android:angle="-90"
android:centerX="0.5"
android:centerY="0.8"
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="linear" />
</shape>徑向漸變：circle_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內部填充-徑向漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="40dp"
android:height="40dp" />
<!-- centerX, centerY是百分百（0-1） -->
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#ffff0000"
android:centerColor="#80ff0000"
android:endColor="#10ff0000"
android:gradientRadius="30dp"
android:type="radial" />
</shape>掃描漸變：circle_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<!-- sweep類型angle,gradientRadius無效，centerX, centerY是百分百（0-1） -->
<gradient
android:centerX="0.5"
android:centerY="0.6"
android:startColor="#ffff0000"
android:centerColor="#80ff0000"
android:endColor="#20ff0000"
android:gradientRadius="20dp"
android:type="sweep" />
</shape>橢圓（邊框+填充+漸變）
邊框：oval_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>填充：oval_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓填充-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<solid android:color="#800000ff" />
</shape>邊框+填充：oval_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓邊框 + 填充-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#800000ff" />
</shape>線性漸變：oval_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓內部填充-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true" >
<size
android:width="80dp"
android:height="60dp" />
<gradient
android:angle="45"
android:centerX="0.5"
android:centerY="0.7"
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="linear" />
</shape>徑向漸變：oval_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓內部填充-徑向漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true" >
<size
android:width="80dp"
android:height="60dp" />
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#80ff0000"
android:endColor="#00ff0000"
android:startColor="#ffff0000"
android:gradientRadius="40dp"
android:type="radial" />
</shape>掃描漸變：oval_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓內部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true" >
<size
android:width="80dp"
android:height="60dp" />
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="sweep" />
</shape>圓環（邊框+填充+漸變）
環內填充：ring_fill.xml
<?xml version="1.0" encoding="utf-8"?><!-- 圓環 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="4"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<solid android:color="#80ff0000" />
</shape>圓環邊框:ring_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環-僅有邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:shape="ring"
android:thickness="16dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="2dp"
android:color="#ffff00ff" />
</shape>邊框+填充：ring_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:shape="ring"
android:thickness="16dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<solid android:color="#80ff0000" />
<stroke
android:width="2dp"
android:color="#ffff00ff" />
</shape>線性漸變：ring_gradient_linear.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="30dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<gradient
android:angle="45"
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="linear" />
</shape>徑向漸變：ring_gradient_radial.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="30dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<!--設置徑向漸變半徑，漸變從圓心開始-->
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#80ff0000"
android:endColor="#00ff0000"
android:startColor="#ffff0000"
android:gradientRadius="40dp"
android:type="radial" />
</shape>掃描漸變:ring_gradient_sweep.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="30dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<!--掃描漸變shape不能設置角度-->
<gradient
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="sweep" />
</shape>總結
熟練掌握好 shape 標籤的使用，能夠構建出多種多樣的 Drawable，這些 Drawable 可以直接作爲背景設置給 View，代碼通過 R.drawable 方式使用，xml 文件通過 @drawable/name 使用。跟圖片的使用一模一樣，關鍵是使用系統 Drawable 可以減少 apk 的體積，減少內存佔用等好處，所以，不要覺得簡單就不繫統學習，越簡單的東西越要熟練掌握。後面還會陸續出一些 Drawable 的文章，比如除了shape標籤定義的 Drawable，其他還有哪些 xml 標籤能定義 Drawable？ Drawable怎麼通過代碼的方式創建並使用？
轉載自：https://www.cnblogs.com/popfisher/p/6238119.html歡迎start，歡迎評論，歡迎指正