Android開(kāi)發(fā)中，和布局文件對(duì)應(yīng) View 一樣，Drawable 文件也對(duì)應(yīng)著一個(gè)類(lèi)--Drawable。
如下面兩個(gè)表所示。

假設(shè)在布局文件的根布局使用了 LinearLayout , 里面包含了一個(gè) TextView 和 一個(gè) Button，隨后在 Activity 中使用 setContentView(R.layout.main); 或者使用 LayoutInflater.from(mContext).inflate(R.id.main, null, false); 來(lái)加載 view，Android 會(huì)把布局文件中的每個(gè)節(jié)點(diǎn)都轉(zhuǎn)換對(duì)應(yīng)的類(lèi)，組合成一個(gè)新的 view，用在 Activity 背景上或者得到這個(gè) view做其他的操作。

下面來(lái)看今天的主題---Drawable，以布局文件來(lái)類(lèi)比。

下面看怎樣在xml文件中使用這些 Drawable，當(dāng)然和布局文件中的 view 一樣，我們也可以使用java代碼來(lái)創(chuàng)建這些對(duì)象，但是我們一般不這樣做，就像我們不會(huì)用java代碼創(chuàng)建一個(gè)復(fù)雜的布局一樣。

一、BitmapDrawable

在 drawable 文件夾下創(chuàng)建一個(gè)xml文件，修改 <selector/> 根節(jié)點(diǎn)為 <bitmap/>，并且增加 src 屬性，像下面這樣：

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_launcher">
</bitmap>

這樣，我們就可以在文件文件中設(shè)置 view 的背景 android:background="@drawable/bitmap"，bitmap 就這么簡(jiǎn)單，我們一般也不會(huì)這樣來(lái)用，使用的話也是配合別的 Drawable，用于包裝圖片資源，比如在 StateListDrawable（selector節(jié)點(diǎn)）下，對(duì)應(yīng)每一個(gè)drawable 設(shè)置不同的 BitmapDrawable。

bitmap 節(jié)點(diǎn)下不能再包含節(jié)點(diǎn)。
所有的設(shè)置都通過(guò)屬性來(lái)完成。

下表列出所有的屬性供參考。

二、ColorDrawable

ColorDrawable 對(duì)應(yīng)xml文件中的 <color/> 節(jié)點(diǎn)，同樣在 drawable 文件夾下新建一個(gè)xml文件，內(nèi)容如下：

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

color 節(jié)點(diǎn)只有唯一一個(gè)也是必須的屬性，android:color 使用color資源文件中的color賦值即可。同樣沒(méi)有子節(jié)點(diǎn)，最為簡(jiǎn)單的一個(gè)Drawable，把color 值轉(zhuǎn)化為了Drawable對(duì)象，以便在其他需要Drawable的地方使用。

三、ShapeDrawable

使用 <shape/> 節(jié)點(diǎn)用來(lái)定義形狀，可以定義矩形、橢圓、線、圓環(huán)四種類(lèi)型的形狀。shape 節(jié)點(diǎn)包含一些屬性和子節(jié)點(diǎn)：

屬性：

子節(jié)點(diǎn)：

solid 填充色

表示形狀的填充色，只有color一個(gè)屬性：android:color

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

填充顏色的矩形

填充顏色的矩形.png

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

填充顏色的橢圓

填充顏色的橢圓.png

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:innerRadius="50dp"
       android:shape="ring"
       android:thickness="10dp"
       android:useLevel="false">
    <solid android:color="@color/colorAccent"/>
</shape>

填充顏色的圓環(huán)

填充顏色的圓環(huán).png

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line">
    <stroke
        android:width="4dp"
        android:color="@color/colorAccent"
        android:dashGap="8dp"
        android:dashWidth="4dp"/>
</shape>

線

線.png

corners 圓角

表示圓角的半徑，對(duì)應(yīng)有四個(gè)角的屬性，和一個(gè)總體的屬性

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners
        android:bottomLeftRadius="3dp"
        android:radius="5dp"/>
    <solid android:color="@color/colorAccent"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

圓角

圓角.png

gradient 漸變色

表示漸變色，可以設(shè)置形狀填充的顏色為漸變色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="sweep"
        android:endColor="@color/colorAccent"
        android:startColor="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

漸變色

漸變色.png

stroke 邊框

表示邊框。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"
        android:dashGap="2dp" // 和dashWidth一起設(shè)置，若不設(shè)置則為實(shí)線
        android:dashWidth="3dp"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

虛線邊框

虛線邊框.png

size 大小

設(shè)置背景大小，width和height倆屬性。一般來(lái)說(shuō)這個(gè)值不是shape的最終顯示大小，因?yàn)閟hape作為背景時(shí)會(huì)根據(jù)View的大小而填充其背景，因此Shape的大小很多時(shí)候是View的大小決定的。

padding 內(nèi)邊距

表示內(nèi)容或子標(biāo)簽邊距，4個(gè)屬性top、bottom、left、right，需要注意的是這個(gè)標(biāo)簽的作用是為內(nèi)容設(shè)置與當(dāng)前應(yīng)用此shape的View的邊距，而不是設(shè)置當(dāng)前View與父元素的邊距。

四、StateListDrawable

StateListDrawable 對(duì)應(yīng) drawable 文件夾下的xml文件的 <selector/> 節(jié)點(diǎn)，表示drawable集合。selector 可以包含不止一個(gè) item 節(jié)點(diǎn)，每個(gè) item 節(jié)點(diǎn)對(duì)應(yīng)兩類(lèi)屬性，一類(lèi)只有一個(gè) android:drawable， 另一類(lèi)是類(lèi)似于 android:state_pressed，表示當(dāng)前所在view的狀態(tài)，有按下、選擇、獲得焦點(diǎn)等十幾種狀態(tài)，需要注意不是每一個(gè)view都有這么多狀態(tài)。
最常見(jiàn)的場(chǎng)景是給 Button 設(shè)置點(diǎn)擊和正常狀態(tài)下的drawable。

selector 節(jié)點(diǎn) 屬性：

子節(jié)點(diǎn) item 屬性：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/button_press"
          android:state_pressed="true"/>
    <item android:drawable="@color/button_norm"
          android:state_pressed="false"/>
</selector>

子節(jié)點(diǎn) item 還可以包含許多子節(jié)點(diǎn)，如bitmap、shape、color、動(dòng)畫(huà)相關(guān)的等，下面給出兩個(gè)例子說(shuō)明用法。

在布局文件中給view設(shè)置 android:background="@drawable/button_seleter" 即可，實(shí)現(xiàn)在點(diǎn)擊view時(shí)顯示不同的背景圖，有點(diǎn)擊的效果反饋。

這里需要注意一點(diǎn)：
如果上邊所說(shuō)的view是 Button 的話，直接可以看到效果，但是，實(shí)際開(kāi)發(fā)中，我們可能要給 LinearLayout、TextView 設(shè)置點(diǎn)擊效果，使用上面的方法是沒(méi)有效果的。

解決方法：給這個(gè) view 添加點(diǎn)擊事件的監(jiān)聽(tīng)。

上邊代碼中的 android:drawable 不只可以設(shè)置為color類(lèi)型的drawable，還可以設(shè)置為bitmapDarwable、ShapeDrawable等，下面看一個(gè)圓角點(diǎn)擊效果的例子。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape>
            <corners android:radius="10dp"/>
            <solid android:color="@color/button_norm"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <corners android:radius="10dp"/>
            <solid android:color="@color/button_press"/>
        </shape>
    </item>
</selector>

設(shè)置在view上的效果為有圓角效果，并且按下的時(shí)候，背景后改變。
以上代碼在 selector 節(jié)點(diǎn)下有兩個(gè) item 節(jié)點(diǎn)，item節(jié)點(diǎn)設(shè)置了是否點(diǎn)擊的狀態(tài)，并且包含了一個(gè) shape 節(jié)點(diǎn)，作為對(duì)應(yīng)狀態(tài)下的drawable對(duì)象。

五、LevelListDrawable

LevelListDrawable 對(duì)應(yīng)xml文件中的 <level-list/> 節(jié)點(diǎn)，表示一組由等級(jí)大小標(biāo)志的 drawable，不同的等級(jí)可以為之設(shè)置不同的背景drawable。

此節(jié)點(diǎn)沒(méi)有參數(shù)，只能包含不止一個(gè)的 item 子節(jié)點(diǎn)。

item 節(jié)點(diǎn)的屬性：

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/colorAccent"
        android:maxLevel="10"
        android:minLevel="1"/>
    <item
        android:drawable="@color/colorPrimary"
        android:maxLevel="20"
        android:minLevel="11"/>
</level-list>

簡(jiǎn)單起見(jiàn)，使用 ColorDrawable 來(lái)設(shè)置對(duì)應(yīng)的 android:drawable，有兩種不同的背景，對(duì)應(yīng)都有不同的等級(jí)范圍。
設(shè)置給view 作為背景，像這樣：android:background="@drawable/level"。

在java代碼中，獲取到此view的 background，再設(shè)置其level屬性的值，就會(huì)變?yōu)閷?duì)應(yīng)等級(jí)的背景。

boolean flag;

public void onClick(View v) {
    if (flag) {
        view.getBackground().setLevel(3);
    } else {
        view.getBackground().setLevel(13);
    }
    this.flag = !this.flag;
}

六、LayerDrawable

LayerDrawable 也表示 drawable 集合，對(duì)應(yīng)xml文件中的<layer-list/>節(jié)點(diǎn)，根據(jù)名稱(chēng)我們可以知道其中的每一個(gè) drawable 都代表一個(gè)圖層，新加入的 drawable 位于背景圖片的最高圖層。
item 的 android:drawable 屬性也是可以設(shè)置為復(fù)雜的drawable的，方便起見(jiàn)，這里使用 colorDrawable。

子節(jié)點(diǎn) item 屬性，都是定位的屬性，像height，width，gravity，bottom，top，left，right等。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="10dp"
        android:drawable="@color/colorAccent"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        />
    <item
        android:bottom="50dp"
        android:drawable="@color/colorPrimary"
        android:left="50dp"
        android:right="50dp"
        android:top="50dp"
        />
</layer-list>

效果如下：

LayerDrawable

七、NinePatchDrawable

NinePatchDrawable 是點(diǎn)九圖的封裝，xml文件中對(duì)應(yīng) <nine-patch/> 標(biāo)簽，屬性和BitmapDrawable中屬性的含義相同。

<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"   
    android:src="@drawable/btn_bk"
    android:dither="true"/> 

八、ClipDrawable

ClipDrawable 代表可以裁剪的drawable，對(duì)應(yīng)xml文件中的<clip/>標(biāo)簽，通過(guò)當(dāng)前設(shè)置的比例來(lái)裁剪Drawable，ClipDrawable的setLevel()方法可以控制顯示比例，ClipDrawable的level值范圍在[0,10000]，level的值越大裁剪的內(nèi)容越少，當(dāng)level為10000時(shí)則完全顯示，而0表示完全裁剪，不可見(jiàn)。

<clip/>標(biāo)簽的屬性：

android:gravity 可以設(shè)置下表所示的值：

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
      android:clipOrientation="horizontal"
      android:drawable="@drawable/ic_launcher"
      android:gravity="right">
</clip>

上邊代碼定義了一個(gè) ClipDrawable 對(duì)象，設(shè)置進(jìn)行水平方向裁剪，并且從左邊開(kāi)始裁剪。drawable為app啟動(dòng)圖標(biāo)。

在布局文件的view中使用像 android:background="@drawable/clip" 代碼來(lái)使用上邊定義的 ClipDrawable。

在java代碼中，通過(guò)設(shè)置 ClipDrawble 的 level 屬性的值，來(lái)進(jìn)行圖片背景的裁剪。

linearLayout = (LinearLayout) findViewById(R.id.lll);
linearLayout.getBackground().setLevel(5000); // 裁剪一半，0~10000

效果如下圖：

裁剪

九、InsetDrawable

InsetDrawable 用距離邊框的距離表示drawable大小，比如我們需要讓view的背景不是完全填充這個(gè)view，并且需要一定的距離，就可以使用 InsetDrawable 來(lái)完成。InsetDrawable 對(duì)應(yīng)xml文件中的 <inset/> 標(biāo)簽。

屬性：

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:drawable="@color/colorAccent"
       android:inset="10dp">
</inset>

十、RippleDrawable

RippleDrawable 可以在Android5.0 即 API21 以上實(shí)現(xiàn)波紋點(diǎn)擊效果，對(duì)應(yīng)xml文件中的 <ripple/> 標(biāo)簽。由于此標(biāo)簽必須在API21以上才可以使用，我們也不能設(shè)置 minSdkVersion 為21，畢竟要適配更多的API版本，我們可以在建立一個(gè) drawable-v21 的文件夾，在里面新建一個(gè)xml文件即可。

在Android studio中，就更方便了，選中 Drawable 文件夾--->右鍵--->選擇new--->單擊 Drawable resource file 選項(xiàng)，就來(lái)到了如下對(duì)話框：

新建資源文件

填寫(xiě)文件名，選擇最后一個(gè)Version，單擊中間的表示向右的按鈕，填寫(xiě)21，點(diǎn)擊ok，就會(huì)自動(dòng)生成對(duì)應(yīng)文件和新建文件。

<ripple/> 標(biāo)簽的屬性：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/gray">
    <!--有界-->
    <item
        android:id="@android:id/mask"
        android:drawable="@color/gray"/>
</ripple>

需要注意的是 android:id="@android:id/mask"，沒(méi)有設(shè)置時(shí)，是無(wú)邊界的波紋效果，添加后為有邊界。

波紋點(diǎn)擊效果

參考博文：

領(lǐng)略千變?nèi)f化的Android Drawable （一）

領(lǐng)略千變?nèi)f化的Android Drawable （二）

Android樣式的開(kāi)發(fā):drawable匯總篇

參考視頻教程：

[慕課網(wǎng)]Android的各種Drawable講解