一、前言

在 Android 的開發過程中，Drawable 經常會被用到，一般會用 Drawable 為 View 設置一個顯示的效果。而在 Android 下，也提供了很多 Drawable 的默認實現，它們涉及到的內容非常的多，從屬性到方法，但是日常生活中，會用到的只有那麽些方式。

本文就在工作中，Drawable 的常用方式，整理出一篇文章，會攜帶一些場景，如有缺漏的，可以在文末留言，本文采用精益編寫，如有必要，會一直長期更新。

二、什麽是 Drawabe

Drawable 實際上是一個抽象類，主要用於將一個可繪制的資源，按要求繪制成圖形，顯示在屏幕之上。

Android 為了讓開發者更方便的使用 Drawable ，提供了很多 Drawable 的實現類，並提供對應的 xml 的屬性配置。

例如：

同時它也可以使用代碼的方式實現，它們的效果是一樣的。

實際上，不管是使用 xml 資源的方式，還是直接在邏輯中硬編碼的方式，它們最終顯示的效果都是一樣的，如下圖，一個藍色的方塊：

Android 中，為我們提供了非常多默認的 Drawable，正常來說，一般是足夠我們使用的，它們的關系如下圖：

基本上，從 XxxDrawable 這種類名，就可以看出來它對應的 Xml 資源的命名，唯一需要註意的是

三、Drawable 的常用實現

3.1 圓角的按鈕

有些 App 中，按鈕的圓角，如果背景只是一個純色或者是簡單的規則漸變，是可以使用

如果想要為其增加一個圓角，可以在

實現的效果如下：

3.2 帶邊框的圓角按鈕

想在圓角的

stroke 用於設置邊框，可以指定顏色和邊框的寬度。

可以看到這裏指定了一個黃色的邊框，效果如下圖：

3.3 單邊邊框

在

這個時候，就可以使用

這樣的一個 Drawable，如果作為背景的話，顯示效果就是在白色背景下，有一條 1px 的灰線。當然其他方向可以參考這個方案，截圖發現 1px 的線不太明顯，這裏就不放圖了。

3.4 漸變的背景色

例如一些視頻 App 的 UI 設計，會將視頻名稱直接布局在視頻海報上，就可以使用線性漸變的

例如一般的視頻App ：

看到其實海報下面的文字，底部是有一個漸變的背景色的。

這種漸變的效果，可以使用 gradient

gradient 支持的屬性，基本上看名稱就可以知道意思，唯一需要註意的是 android:angle 這個屬性，用於設定漸變的角度，但是它不是任何值都支持的，只支持 45 的倍數。

效果如下圖：

3.5 海報的默認圖

通常在圖片加載的過程中，會為其定義一個默認圖片。一般的設計都是會將這個默認圖做的非常的簡潔，例如中間一個 App 主題的 Icon，然後其它地方純色鋪平。

類似下面這種效果：

這種默認的圖片，當然你可以使用一張等大的圖，但是這樣不利於適配，不同的 UI 設計尺寸，你需要提供不同的圖片。當然你也可以使用 9patch 的圖片，但是你會發現有些 density 為 2.75 這種奇葩的手機下，圖標會微微偏移，不在正中間。所以這裏可以使用一個

所以這樣的場景下，我們就需要一個純色的背景加一張小圖，即可實現默認圖的效果。

下面是 xml 的實現代碼：

下面是運行後的效果圖：

3.6 帶按下效果的按鈕

對一個按鈕，設計一個按下的效果。可以使用

這些不同的狀態，在 xml 裏，都是以 android:state_Xxx 開頭來定義的，將其設置為 true 即可生效。

Android 為我們提供了非常多的狀態，比較常用的有：

• state_pressed：按下的效果。
• state_checkable:是否可設置 checked 狀態的效果。
• state_selected：支持 selected 並且當前處於 selected 的效果。
• state_checked：支持 checkeable 並且當前處於 checked 的效果。

接下來讓我們看一個實際的按鈕例子，這裏只為其設置按下的效果，xml 代碼如下：

實現效果如下：

3.7 一個帶按下效果的圓角按鈕

這個沒啥好說的，結合上面的效果就可以做到。你可以選擇將它們寫在不同的 Drawable 中，也可以在一個 xml 文件中，使用不同 item 來完成。Item 標簽是可以支持內部再嵌套一個 Drawable 的。

3.8 帶按下動畫

按下效果除了使用

具體細節可以看看我之前的一篇文章：《利用 StateListAnimator 為你的點擊加個動畫吧！》

StateListAnimtor 使用起來非常的簡單：

1. 在 res 中創建一個 animator 目錄。
2. 在其中創建一個 xml 資源文件，就是一個
3. 在 xml 資源中使用
4. 最終將定義好的 animtor 通過 View 的 setStateListAnimator() 方法或者 android:stateListAnimator 屬性，設置到 View 上。

舉個例子。

首先在 /res/animtor 目錄下，創建一個 btn_press_animator.xml 文件。

可以看到，和 StateListDrawable 一樣，它也是通過 android:state_xxx 屬性來定義不同的 Animator 的，如果存在多個 Animator ，可以使用

然後，定義一個 View，為其設置屬性 android:stateListAnimator="@animator/btn_press_animator"。

來看看運行的效果：

3.9 三角形的 Drawable

假如有類似氣泡提示的效果，如下圖。

這樣的效果，除了使用 9patch 來實現之外，還可以拿兩個 Drawable 來拼接實現，這就需要一個圓角的矩形和一個三角的 Drawable。

三角 Drawable 的實現思路很清奇，是使用一個矩形的 shape ，通過使用 rotate 實現的旋轉，來達到尖角的效果。

這個例子，就是上圖的實現效果，是一個黃色的倒三角。如果想要的是一個正三角，只需要改變旋轉的角度就可以了。

3.10 Tint 著色的 Drawable

在 Drawable 中，如果使用的是 BitmapDrawable 或者 NinePatchDrawable(9patch) 的資源的話，可以使用 android:tint 屬性為其著色。

默認情況下，待著色的圖片資源，會將其所有有顏色地方，都著色成我們指定的顏色，但是會保留透明度。

效果圖如下，上面是原圖，下面是使用 tint 之後的效果：

前面這裏給的是 tint 默認的效果，還可以通過 android:tintMode 指定成不同的著色效果，例如下面將 android:tintMode 指定成 screen 之後，效果就完全不一樣了。

3.11 鋪平的 Drawable

有時候，作為一些有規則的圖片的背景，可以使用一張很小的圖片，然後設定 android:tileMode 屬性，為其設定一個平鋪的效果。

tileMode 可以指定多個屬性值，用於指定不同的效果，以下就是兩個比較常用的，上圖使用的是 repeat ，下圖使用的是 mirror。

3.12 狀態可控的層級 Drawable

如果想要一個 ImageView 上，根據不同的條件顯示不同的 Drawable ，可以使用

今天舉一個例子，給某個圖標加紅點的邏輯。當然我們也可以使用通過一個 FrameLayout 來實現，但是今天我們試試用

這裏使用一個

最終我們可以通過 ImageView 的 setImageLevel() 方法來控制顯示的內容。

四、結語

到這裏基本上涵蓋了 Drawable 大部分的使用場景，在實際例子中學東西是印象最深刻的。當然，Drawable 的使用不止這些，還有一些例如拿 ClipDrawable 來實現一個切割進度的效果之類的，這種還需要寫邏輯代碼，就不在本文的範圍內了，本文主要介紹一些靜態能實現的效果。

你只需要掌握最基本的規則，什麽 Drawable 能實現什麽效果，具體碰到實際需求的時候，再來細致的研究，基本上微調一下就可以使用。

如果你還又什麽更有意思的 Drawable 使用技巧，歡迎在文末留言，我們一起討論一下，如有需要，會持續更新。

今天在承香墨影公眾號的後臺，回復『成長』。我會送你一些我整理的學習資料，包含：Android反編譯、算法、設計模式、虛擬機、Linux、Kotlin、Python、爬蟲、Web項目源碼。

推薦閱讀：

• 認真聊聊陰影那些事兒
• 利用 StateListAnimator 為你的點擊加個動畫吧！
• 好的代碼可以自己說話
• 關於如何編寫 Clean Code 的 6 個簡單技巧
• 手寫你的第一個 Dalvik 版的 HelloWorld ！

這些 Drawable 的小技巧，你都了解嗎？