說(shuō)起shape，大家應(yīng)該或多或少都知道并用過(guò)，有什么用，我們平常在開(kāi)發(fā)當(dāng)中，通常會(huì)遇到這樣的情況，就是會(huì)給控件增加一個(gè)背景，比如button，textview等
可以說(shuō)shape就是一個(gè)形狀定義工具。是xml繪圖當(dāng)中非常重要的一個(gè)工具

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

<?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>

這樣我們就得到了一個(gè)shape的xml文件了，我們之前說(shuō)過(guò)了，shape是用來(lái)定義形狀的，那么它可以定義哪些形狀呢？分別有如下幾種形狀

image

1·rectangle--矩形，總覺(jué)得這個(gè)用的比較多
2·line---線，這個(gè)只能是水平的，不能定義豎直的。
3·oval---橢圓，我們一般是定義一個(gè)正圓。
4·ring---圓環(huán)，可以定義加載控件。

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

image

以上就是shape的六種特性了，可以說(shuō)，學(xué)習(xí)shape就是學(xué)習(xí)以上六種特性。下面我將一步一步的講解以上六種特性的使用以及實(shí)現(xiàn)效果，我開(kāi)篇也說(shuō)了，這篇文章不僅教大家如何使用shape，更會(huì)告訴初學(xué)者如何學(xué)習(xí)shape，那學(xué)習(xí)shape的關(guān)鍵在哪呢？那就是你一定要?jiǎng)邮謱?shí)踐，自己寫代碼看看效果。

首先，我們以最常用的rectangle為例來(lái)講解以上特性的使用，這個(gè)時(shí)候你就需要在shape的根元素指定你要繪制的shape類型，如下：

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

</shape>

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

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

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

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

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

image

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

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

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

image

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

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

以上代碼用到了gradient的三個(gè)屬性值：startColor，centerColor，endColor。這三個(gè)屬性很好理解，分別是漸變開(kāi)始，中間和結(jié)束的顏色，我們來(lái)看效果。

image

為了讓你更加清楚startColor，centerColor，endColor這三個(gè)屬性的作用，我們采取開(kāi)始顏色為黑色，中間顏色為紅色以及結(jié)束顏色為藍(lán)色的漸變。

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

image

如此一來(lái)你對(duì)這個(gè)漸變?nèi)N夜色的過(guò)度應(yīng)該很清楚了吧！接下來(lái)我們看看如何引用我們繪制好的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="一個(gè)自學(xué)的程序員"
android:textColor="#efebeb"
/>

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

image

shape六種特性的詳解

現(xiàn)在我們來(lái)稍微小結(jié)一下，在實(shí)現(xiàn)上述效果的過(guò)程中，我們使用到了shape的size，solid，corners以及gradient特性，我們?cè)谥耙舱f(shuō)過(guò)，shape一共有六個(gè)特性需要我們學(xué)習(xí)，這里只使用到了其中的四個(gè)，為了方便大家學(xué)習(xí)，我將六種特性的含義解釋分類如下：

size—-定義形狀的寬高

image

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

image

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

image

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

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

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

image

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

線性漸變

image

放射性漸變

image

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

image

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

image

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

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

無(wú)論是畫哪一種形狀，都是要使用到我們上訴說(shuō)的六種特性，分別是size，solid，corners，gradient，stroke，padding。只不過(guò)畫某一種形狀可能只用到六種特性中的部分特性，只要我們掌握了這六種特性，無(wú)論畫哪一種形狀應(yīng)該都是毫無(wú)壓力的。

橢圓

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

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

android:shape="oval"

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

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

我們看下效果

image

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

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

我們首先看下效果。

image

代碼如下

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

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

我們?cè)賮?lái)看下傾斜角度為90的線性漸變

image

你們要與傾斜角度為0的進(jìn)行對(duì)比以屬性angle屬性的使用，下面我們?cè)賮?lái)看下另外一種漸變類型，那就是放射性漸變。

image

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

<!--漸變-->
<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的話就會(huì)出現(xiàn)這樣的效果。

image

這是為什么呢？其實(shí)我這里為了說(shuō)明一個(gè)問(wèn)題給大家挖了一個(gè)坑，我們?cè)谥霸O(shè)置圓形的size的時(shí)候還記得是怎么設(shè)置的嗎？我當(dāng)時(shí)說(shuō)只要寬高比例為1：1就會(huì)得到一個(gè)正圓，于是我是這樣寫的代碼。

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

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

我們子啊之前介紹畫矩形的時(shí)候說(shuō)到過(guò)，漸變的類型是有三種的，除了以上說(shuō)的還有一種掃描型漸變，為什么在畫矩形的時(shí)候沒(méi)有介紹呢？因?yàn)槲矣X(jué)得在畫圓形的時(shí)候看掃描型漸變才會(huì)更加直觀，我們來(lái)做個(gè)測(cè)試，在矩形中的掃描型漸變是這個(gè)樣子的。

image

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

image

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

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

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

line–線

我們說(shuō)了shape可以繪制四種形狀，我們以上講了矩形和橢圓，接下來(lái)講解下一個(gè)line–線型。

畫線的時(shí)候主要用到了size和stroke，也就是靠這兩個(gè)特性才會(huì)顯示線，而且要注意使用size的時(shí)候只能畫高，不要畫寬。

我們看下代碼。

<!--大小-->
<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)

畫線的時(shí)候沒(méi)有像畫矩形或者圓的時(shí)候那么麻煩，用到的屬性也沒(méi)那么多，相對(duì)而言還是比較簡(jiǎn)單的，下面讓我們繼續(xù)，繼續(xù)學(xué)習(xí)最后一個(gè)形狀ring–環(huán)型。

為什么要最后一個(gè)來(lái)將ring呢？因?yàn)樗€是有點(diǎn)特殊的，我們?cè)谥皩懘a的時(shí)候?qū)τ趕hape的根元素我們只寫了這么一個(gè)屬性。

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

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

* android:innerRadius 設(shè)置內(nèi)環(huán)的半徑
* android:innerRadiusRatio 以環(huán)的寬度比率來(lái)表示內(nèi)環(huán)的半徑，這個(gè)值默認(rèn)為3，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3，但是這個(gè)值會(huì)被android:innerRadius給覆蓋
* android:thickness 環(huán)的厚度
* android:thicknessRatio 以環(huán)的寬度比率來(lái)表示環(huán)的厚度，這個(gè)值默認(rèn)為9，表示環(huán)的厚度為環(huán)的寬度除以9，同樣這個(gè)值會(huì)被android:thickness覆蓋
* android:useLevel 一般為false，否則可能環(huán)形無(wú)法顯示，只有作為L(zhǎng)evelListDrawable使用時(shí)才設(shè)為true

我們先來(lái)看下效果圖吧。

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"
>

<!--一共有六個(gè)屬性-->

<!--大小-->
<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)的時(shí)候可能對(duì)那幾個(gè)特有的元素不是太清楚，這里重點(diǎn)說(shuō)下這幾個(gè)屬性。

* android:innerRadius 設(shè)置內(nèi)環(huán)的半徑
* android:innerRadiusRatio 以環(huán)的寬度比率來(lái)表示內(nèi)環(huán)的半徑，這個(gè)值默認(rèn)為3，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3，但是這個(gè)值會(huì)被android:innerRadius給覆蓋
* android:thickness 環(huán)的厚度
* android:thicknessRatio 以環(huán)的寬度比率來(lái)表示環(huán)的厚度，這個(gè)值默認(rèn)為9，表示環(huán)的厚度為環(huán)的寬度除以9，同樣這個(gè)值會(huì)被android:thickness覆蓋
* android:useLevel 一般為false，否則可能環(huán)形無(wú)法顯示，只有作為L(zhǎng)evelListDrawable使用時(shí)才設(shè)為true

image

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

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

image

文章很短，路還漫長(zhǎng)，大家好，我是i小灰，一個(gè)帥氣與才華并存的男人，我們下期再見(jiàn)