說起shape舱殿，大家應(yīng)該或多或少都知道并用過形用，有什么用筐带，我們平常在開發(fā)當(dāng)中蝉绷，通常會遇到這樣的情況艇抠，就是會給控件增加一個背景樟氢，比如button，textview等
可以說shape就是一個形狀定義工具镇饺。是xml繪圖當(dāng)中非常重要的一個工具

代碼也是很簡單的乎莉，這里使用到了shape的三個特性。好了到這里我已經(jīng)簡單介紹shape的作用以及用法，但是shape能做的可遠(yuǎn)遠(yuǎn)不止這些惋啃，下面就讓我們正式開始學(xué)習(xí)吧哼鬓！
首先你需要明白：使用shape一般是用來定義形狀的，可以在xml上繪圖边灭，意思就是shape的表現(xiàn)形式就是一個xml文件异希，這個xml文件一般是放在drawable文件目錄下，然后可以直接引用作為控件的背景绒瘦。那么如何定義這樣的一個xml文件呢称簿？
在你項(xiàng)目的drawable目錄上右擊新建Drawable resource file，這代表新建一個可繪制圖形資源惰帽，你會得到如下代碼文件憨降。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android";>

</selector>

切換成shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";>

</shape>

這樣我們就得到了一個shape的xml文件了，我們之前說過了该酗，shape是用來定義形狀的券册，那么它可以定義哪些形狀呢？分別有如下幾種形狀

image

1·rectangle--矩形垂涯，總覺得這個用的比較多
2·line---線，這個只能是水平的航邢，不能定義豎直的耕赘。
3·oval---橢圓，我們一般是定義一個正圓膳殷。
4·ring---圓環(huán)操骡，可以定義加載控件。

這是shape可以定義的幾種形狀赚窃，而且他們都離不開如下幾種特性（我用導(dǎo)圖整理了一下册招，方便查看）

image

以上就是shape的六種特性了，可以說勒极，學(xué)習(xí)shape就是學(xué)習(xí)以上六種特性是掰。下面我將一步一步的講解以上六種特性的使用以及實(shí)現(xiàn)效果，我開篇也說了辱匿，這篇文章不僅教大家如何使用shape键痛，更會告訴初學(xué)者如何學(xué)習(xí)shape，那學(xué)習(xí)shape的關(guān)鍵在哪呢匾七？那就是你一定要動手實(shí)踐絮短，自己寫代碼看看效果。

首先昨忆，我們以最常用的rectangle為例來講解以上特性的使用丁频，這個時候你就需要在shape的根元素指定你要繪制的shape類型，如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="rectangle"
>

</shape>

我們這里就以開篇提到的那個button按鈕的效果來實(shí)例操作一下，首先你要明確我們是利用shape來給button按鈕繪制一個背景席里，所以我們先要定義這個背景的寬和高叔磷，這用到shape的哪個特性呢？（如果忘記都有哪些特性胁勺，可以瀏覽之前給的那張導(dǎo)圖世澜，建議下載下來，對照查看）署穗，我們可以看到在shape的特性當(dāng)中有一個size寥裂，對這就是用來定義我們所要繪制圖形的大小了，那我們來實(shí)際操作一下吧案疲！

<!--大小-->
<size android:width="600dp" android:height="100dp"></size>

這行代碼意思是定義一個寬高比例為6：1的矩形（寬高比例視需求而定）封恰，這個時候你可能看不到任何效果，因?yàn)楸尘吧菦]有的褐啡，這個時候就需要使用另外一個特性了—solid诺舔，我們使用這個特性來為我們繪制的圖形填充顏色，代碼如下:

<!--填充-->
<solid android:color="@color/colorPrimary"></solid>

如此一來我們就實(shí)現(xiàn)了這樣的效果：

image

我們看最終效果發(fā)現(xiàn)矩形的四個角都是圓形的备畦，這就要使用shape的coeners了低飒，我們設(shè)置代碼如下：

<!--圓角-->
<corners android:radius="50dp"></corners>

以上代碼是給我們要繪制的圖形的四個角設(shè)置一個統(tǒng)一的圓角半徑，我們看效果

image

好了懂盐，這里我們要實(shí)現(xiàn)的最終效果越來越近了褥赊，現(xiàn)在就是顏色的問題，我們使用solid只能給圖形填充純色背景莉恼，要想達(dá)到最終效果的漸變拌喉，我們需要使用到shape的gradient特性了，這個特性可以設(shè)定的屬性值較多俐银，我們先從簡單的設(shè)置漸變色來開始學(xué)習(xí)尿背。

<!--漸變-->
<gradient android:startColor="#6fd99d" android:centerColor="#63cfc3" android:endColor="#57c5e9"></gradient>

以上代碼用到了gradient的三個屬性值：startColor，centerColor捶惜，endColor田藐。這三個屬性很好理解，分別是漸變開始吱七，中間和結(jié)束的顏色坞淮，我們來看效果。

image

為了讓你更加清楚startColor陪捷，centerColor回窘，endColor這三個屬性的作用，我們采取開始顏色為黑色市袖，中間顏色為紅色以及結(jié)束顏色為藍(lán)色的漸變啡直。

<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10909" android:endColor="#067fe2"></gradient>

image

如此一來你對這個漸變?nèi)N夜色的過度應(yīng)該很清楚了吧烁涌！接下來我們看看如何引用我們繪制好的shape吧！

<Button android:layout_width="match_parent" android:layout_height="50dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="@drawable/tv_bg"
android:text="一個自學(xué)的程序員"
android:textColor="#efebeb"
/>

此處的tv_bg就是我們繪制的shape文件的名稱酒觅。效果如下

image

shape六種特性的詳解

現(xiàn)在我們來稍微小結(jié)一下撮执，在實(shí)現(xiàn)上述效果的過程中，我們使用到了shape的size舷丹，solid抒钱，corners以及gradient特性，我們在之前也說過颜凯，shape一共有六個特性需要我們學(xué)習(xí)谋币，這里只使用到了其中的四個，為了方便大家學(xué)習(xí)症概，我將六種特性的含義解釋分類如下：

size—-定義形狀的寬高

image

solid—-定義形狀的背景填充色

image

corners—-設(shè)置形狀四個角的圓角大小

image

注意：如果使用radius屬性會統(tǒng)一設(shè)置四個角的圓角大小蕾额，單獨(dú)設(shè)置會覆蓋radius的效果。

gradient—-設(shè)置形狀背景色的漸變（一共有九個屬性）

在學(xué)習(xí)這個特性之前彼城，我們要清楚這個漸變包含三種類型诅蝶，一種是linear表示線性漸變，一種是放射性漸變還一種是掃描性漸變募壕，由于這塊比較復(fù)雜调炬，我將gradient特性的各個漸變類型對應(yīng)的屬性值用導(dǎo)圖整理了一下。

image

下面看各個漸變類型的效果圖（我們畫的依然是矩形）

線性漸變

image

放射性漸變

image

stroke—-給形狀設(shè)置描邊

image

padding—-設(shè)置以此形狀為背景的內(nèi)容距形狀四周的內(nèi)邊距舱馅。

image

以上以畫矩形為例借助圖例的形式詳細(xì)的將shape的六種特性的使用演示了一遍筐眷，現(xiàn)在我們來做個總結(jié)：

首先shape可以畫三種類型的圖形，分別是rectangle–矩形习柠，oval–橢圓（一般用來畫圓）,ring–環(huán)形.

無論是畫哪一種形狀，都是要使用到我們上訴說的六種特性照棋，分別是size资溃，solid，corners烈炭，gradient溶锭，stroke，padding符隙。只不過畫某一種形狀可能只用到六種特性中的部分特性趴捅，只要我們掌握了這六種特性，無論畫哪一種形狀應(yīng)該都是毫無壓力的霹疫。

橢圓

以上我們都是以畫矩形為例詳細(xì)介紹了六種特性的使用方式拱绑，對于橢圓和環(huán)形都是大同小異，非要說不同的話丽蝎，環(huán)形有一些特殊的屬性值需要我們學(xué)習(xí)猎拨，接下來，我們以畫橢圓為例，介紹如何使用shape红省。

首先更改shape的根元素將shape的值改為oval额各。

android:shape="oval"

我們之前也說了，使用shape畫oval我們一般就是用來畫正圓比較多吧恃，所以我們可以將size特性的屬性值寬高比例設(shè)為1：1即可虾啦。

<!--大小-->
<size android:width="1dp" android:height="1dp"></size>

我們看下效果

image

在繪制圓形的時候漸變用到的是比較多的，這里我們就主要介紹下在畫圓中關(guān)于漸變的使用痕寓。

首先我們看第一種漸變類型–線性漸變且傾斜角度為0

我們首先看下效果傲醉。

image

代碼如下

<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:angle="0" android:type="linear"
></gradient>

這里如果你不指定漸變的類型，則其默認(rèn)的漸變方式就是線性漸變且傾斜角度為0.

我們再來看下傾斜角度為90的線性漸變

image

你們要與傾斜角度為0的進(jìn)行對比以屬性angle屬性的使用厂抽，下面我們再來看下另外一種漸變類型需频，那就是放射性漸變。

image

這里需要注意一點(diǎn)筷凤，有的人可能得不到這樣的效果昭殉，為什么呢？我們先來看下我的代碼

<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:angle="0" android:type="radial" android:gradientRadius="0.5dp" android:centerX="0.5"
android:centerY="0.5"
></gradient>

知道你們注意到?jīng)]我這里的gradientRadius設(shè)置的是0.5dp藐守，你們一不小心設(shè)置成大于1的話就會出現(xiàn)這樣的效果挪丢。

image

這是為什么呢？其實(shí)我這里為了說明一個問題給大家挖了一個坑卢厂，我們在之前設(shè)置圓形的size的時候還記得是怎么設(shè)置的嗎乾蓬？我當(dāng)時說只要寬高比例為1：1就會得到一個正圓，于是我是這樣寫的代碼慎恒。

<!--大小-->
<size android:width="1dp" android:height="1dp"></size>

看到?jīng)]任内，我將寬和高都設(shè)置成了1dp，這樣導(dǎo)致什么結(jié)果呢融柬？我們要知道gradientRadius是用來設(shè)置放射的半徑的死嗦，如果我們設(shè)置的參數(shù)大于1dp（要注意我們的正圓寬高才1dp）就會超過我們的正圓大小，這樣就得不到我們想要的放射性漸變的效果了粒氧，所以這點(diǎn)要注意gradientRadius的屬性值要根據(jù)設(shè)置的size的大小來設(shè)定越除。

我們子啊之前介紹畫矩形的時候說到過，漸變的類型是有三種的外盯，除了以上說的還有一種掃描型漸變摘盆，為什么在畫矩形的時候沒有介紹呢？因?yàn)槲矣X得在畫圓形的時候看掃描型漸變才會更加直觀饱苟，我們來做個測試孩擂，在矩形中的掃描型漸變是這個樣子的。

image

第一次看可能你對什么是掃描型漸變可能還不太理解箱熬，下面我們看在圓形中的掃描型漸變肋殴。

image

怎么樣囤锉，是不是有點(diǎn)明白了，其實(shí)掃描型漸變就是以圖形中心為點(diǎn)從右側(cè)水平線開始逆時針旋轉(zhuǎn)依次歷經(jīng)開始的顏色护锤，中間的顏色和結(jié)束的顏色官地。代碼如下。

<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:type="sweep" android:centerX="0.5"
android:centerY="0.5"
></gradient>

好了烙懦，以上介紹了畫橢圓的一些使用方法驱入，這里你可能會發(fā)現(xiàn)，我并沒有想之前介紹畫矩形的時候那么詳細(xì)把每一個特性的屬性值什么意思怎么用都說了一遍氯析，因?yàn)闊o論畫什么這些屬性表達(dá)的都是一個意思亏较，關(guān)鍵在于適不適合在當(dāng)前你繪制的圖形中使用。

line–線

我們說了shape可以繪制四種形狀掩缓，我們以上講了矩形和橢圓雪情，接下來講解下一個line–線型。

畫線的時候主要用到了size和stroke你辣，也就是靠這兩個特性才會顯示線巡通，而且要注意使用size的時候只能畫高，不要畫寬舍哄。

我們看下代碼宴凉。

<!--大小-->
<size android:height="20dp"></size>

<!--描邊-->
<stroke android:color="#ef0b0b" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp"

></stroke>

以上代碼實(shí)現(xiàn)的效果如下。

image

ring–環(huán)

畫線的時候沒有像畫矩形或者圓的時候那么麻煩表悬，用到的屬性也沒那么多弥锄，相對而言還是比較簡單的，下面讓我們繼續(xù)蟆沫，繼續(xù)學(xué)習(xí)最后一個形狀ring–環(huán)型籽暇。

為什么要最后一個來將ring呢？因?yàn)樗€是有點(diǎn)特殊的饭庞，我們在之前寫代碼的時候?qū)τ趕hape的根元素我們只寫了這么一個屬性戒悠。

<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="ring"
>

就是指定我們要畫的圖形的類型的，但是對于shape的根元素還是可以設(shè)置一些特殊元素的但绕，而這些元素只適用于ring，下面一起來看下吧惶看！

* android:innerRadius 設(shè)置內(nèi)環(huán)的半徑
* android:innerRadiusRatio 以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑捏顺，這個值默認(rèn)為3，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3纬黎，但是這個值會被android:innerRadius給覆蓋
* android:thickness 環(huán)的厚度
* android:thicknessRatio 以環(huán)的寬度比率來表示環(huán)的厚度幅骄，這個值默認(rèn)為9，表示環(huán)的厚度為環(huán)的寬度除以9本今，同樣這個值會被android:thickness覆蓋
* android:useLevel 一般為false拆座，否則可能環(huán)形無法顯示主巍，只有作為LevelListDrawable使用時才設(shè)為true

我們先來看下效果圖吧。

image

代碼如下挪凑。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="ring"
android:innerRadiusRatio="3"
android:thicknessRatio="9"
android:useLevel="false"
>

<!--一共有六個屬性-->

<!--大小-->
<size android:height="10dp"></size>

<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:type="sweep" android:centerX="0.5"
android:centerY="0.5"
></gradient>

<!--描邊-->
<stroke android:color="#151515" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp"

></stroke>

</shape>

大家在使用ring畫圓環(huán)的時候可能對那幾個特有的元素不是太清楚孕索，這里重點(diǎn)說下這幾個屬性。

* android:innerRadius 設(shè)置內(nèi)環(huán)的半徑
* android:innerRadiusRatio 以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑躏碳，這個值默認(rèn)為3搞旭，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3，但是這個值會被android:innerRadius給覆蓋
* android:thickness 環(huán)的厚度
* android:thicknessRatio 以環(huán)的寬度比率來表示環(huán)的厚度菇绵，這個值默認(rèn)為9肄渗，表示環(huán)的厚度為環(huán)的寬度除以9，同樣這個值會被android:thickness覆蓋
* android:useLevel 一般為false咬最，否則可能環(huán)形無法顯示翎嫡，只有作為LevelListDrawable使用時才設(shè)為true

image

大家在使用ring的這些特殊屬性的時候參照我給的這個圖（雖然有點(diǎn)丑）可能有助于你理解，尤其是innerRadiusRatio和thicknessRatio這兩個屬性永乌。

到此我們已經(jīng)將Android中關(guān)于shape的使用全部講解完成了惑申，現(xiàn)在來個大總結(jié)吧！首先shape是用來進(jìn)行xml繪制圖形的铆遭，可以給一些控件設(shè)置背景來達(dá)到我們想要的效果硝桩，shape其實(shí)就是一個xml文件，一般放在我們項(xiàng)目中的drawable文件目錄下枚荣，使用shape可以畫四種圖形分別是矩形（常用）,橢圓（一般用來畫正圓）,直線和環(huán)形碗脊。無論是畫哪一種圖形都離不開shape的六種特性，只要掌握這六種特性的使用方法就可以掌握各種圖形的繪制橄妆，區(qū)別就在于不同的特性適不適合當(dāng)前所繪制的圖形（這句話是重點(diǎn)衙伶，圈起來要考）,關(guān)于ring-畫環(huán)形這塊它有一些特殊的屬性，結(jié)合文中我給出的圖掌握起來難度也不大害碾，好了矢劲，再放出這非常重要的六種特性吧！

image

文章很短慌随，路還漫長芬沉，大家好，我是i小灰阁猜，一個帥氣與才華并存的男人丸逸，我們下期再見