Android技能樹 — Drawable小結

前言

Android技能書系列：

Android基礎知識

Android技能樹 — 動畫小結

Android技能樹 — View小結

Android技能樹 — Activity小結

Android技能樹 — View事件體系小結

Android技能樹 — Android存儲路徑及IO操做小結

Android技能樹 — 多進程相關小結

Android技能樹 — Drawable小結

Android技能樹 — Fragment整體小結

數據結構基礎知識

Android技能樹 — 數組,鏈表,散列表基礎小結

Android技能樹 — 樹基礎知識小結(一)

算法基礎知識

Android技能樹 — 排序算法基礎小結

先上腦圖：

腦圖下載連接

Drawable

固有高/寬 & 大小

咱們知道日常使用最多的Drawable多是圖片了，咱們知道一個圖片的本來的尺寸，好比下面這個圖：

大小爲64X64，咱們把它賦值給一個ImageView作爲背景，同時這個ImageView設置的寬高都很大：

<ImageView       
      android:layout_width="300dp"
      android:layout_height="300dp"
      android:background="@drawable/back"/>
複製代碼

咱們能夠看到咱們的圖片實際上變的很大，因此最終的圖片大小不必定是它固有寬/高。

因此對於這個圖片，它的固有高/寬是它本來圖片的大小，而實際上當最爲咱們ImageView的背景後，被拉伸至於View同等大小了。並且對於一些咱們本身畫的Drawable，不像圖片那樣，有本身本來的尺寸，好比咱們本身寫了個一個紅色的Drawable，這時候它沒有固定的尺寸，因此getIntrinsicWidth/height會返回-1。

Drawable分類

單個Drawable

BitmapDrawable:

這裏特別講一下平鋪模式，好比仍是上面那個箭頭的圖片，咱們寫相應BitmapDrawable代碼：

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/back"
    android:tileMode="repeat"
    >
</bitmap>
複製代碼

<ImageView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/bitmapdrawable"/>

複製代碼

這裏有一點要注意：記住是賦給android:background,有些人寫習慣了，可能就賦給了ImageView的android:src屬性， 而後就不會有效果了。

ShapeDrawable

咱們主要注意這幾點：

1. 當咱們對描邊進行設置虛線時候，android:dashWidth和android:dashGap只要有一個爲0，虛線效果將不能生效。 好比：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
    >
    <stroke android:color="@color/colorBlack"
        android:width="2dp"
        android:dashGap="30dp"
        android:dashWidth="40dp"/>
    
</shape>
複製代碼

咱們能夠看到效果是：

可是隻要一個爲0，就會變成

2. 標籤的設置： 定義內容離邊界的距離,有些人說我設置了Padding，但是沒有看出效果來，好比下面：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
    >
    <stroke android:color="@color/colorBlack"
        android:width="2dp"
        android:dashGap="0dp"
        android:dashWidth="40dp"/>

    <padding android:left="130dp"
        />

    <solid android:color="@color/warning_stroke_color"/>

</shape>
複製代碼

<ImageView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"     
        android:background="@drawable/bg"/>
複製代碼

而後咱們會發現，what啥都沒變啊。其實咱們要知道是內容離邊界的距離。好比咱們這裏換成TextView就知道了：

<TextView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="aaaaaaaaaaaaaaaaaaaa"
        android:background="@drawable/sdf"/>
複製代碼

文字距離左邊padding了130dp了。

3. 標籤的做用： 咱們知道圖片的話，有本身的固有寬/高，可是像這種ShapeBitmap，沒有固有寬/高，getIntrinsicWidth/height獲取到的是-1，因此咱們若是設置了標籤，獲取到的就是你設置的值了。

<size 
     android:width="100dp"
     android:height="100dp"/>
複製代碼

InsetDrawable:

能夠把其餘的Drawable內嵌到本身裏面，而後在能夠設置四周的距離。

好比咱們有時候在狀態欄處，點擊返回按鈕，可是美工切圖的返回鍵有點小，直接設置進去，有時候用戶按返回鍵會按不到，一種是把ImageView的寬高設置的大一點，另一種可使用這個InsetDrawable。

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/back"
    android:insetLeft="20dp"
    android:insetTop="20dp"
    android:insetRight="20dp"
    android:insetBottom="20dp"
    >

</inset>
複製代碼

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/insetdrawable"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/back"
        />

複製代碼

咱們能夠查看設置了InsetDrawable和直接設置返回按鈕圖片的樣子：

ScaleDrawable:

能夠縮放的Drawable，效果以下：

具體的使用能夠參考這篇文章：Android Drawable - Scale Drawable使用詳解

ClipDrawable:

可裁剪的Drawable，效果以下：

具體的使用能夠參考這篇文章：ClipDrawable讓開發變得更簡單

Drawable集合

Drawable集合的意思是這些Drawable能夠放多個Drawable，好比能夠放多個圖片資源在裏面。

LayerDrawable

它是一種層次化的Drawable集合，經過不一樣的Drawable放置在不一樣的層上面達到了疊加後的效果。而且下面的item覆蓋上面的item。

好比這個圖片上的搜索框：

咱們可使用LayerDrawable來實現，只須要把中間的放大鏡和文字變成一個圖片，好比

而後背景爲：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners android:radius="20dp"/>
    <solid android:color="@color/colorWhite"/>
    
</shape>
複製代碼

最後使用LayerDrawable:

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

    <item
        android:drawable="@drawable/search_bg"/>

    <item android:drawable="@drawable/search"
        android:right="60dp"
        android:left="60dp"
        android:top="10dp"
        android:bottom="10dp"
        />

</layer-list>
複製代碼

效果圖爲：

具體能夠參考如下文章：

Android Drawable - Layer Drawable使用詳解

layer-list -- layer-list的基本使用介紹

StateListDrawable

這個估計是你們用的最多的，一般用在不一樣的按鈕上，當按下是什麼背景，送開的時候是什麼背景，當處於不可點擊的時候是什麼背景。

這個我就很少說了，能夠參考這篇：Drawable子類之——StateListDrawable （選擇器）

這裏額外說一個注意點： 系統根據View狀態從selector中按照從上到下的順序查找選擇對應item，因此默認的item放在最後一條，這樣上面都不符合時候，會匹配上默認的item，由於默認的item不附帶狀態，能夠匹配View的任何狀態

LevelListDrawable

這個有點像StateListDrawable,在不一樣Level下會使用不一樣的圖，不一樣的是，它是根據每一個item設置的Level範圍來肯定的。

TransitionDrawable

主要是用來實現二個Drawable之間的淡入淡出，很容易就想到了animation動畫來實現，可是發現使用動畫的話，可是在調用statAnimation的時候由於圖片已經顯示了，再播放一次動畫其實會致使細微的閃爍效果。因此可使用TransitionDrawable來實現。

以下效果：

具體能夠參考文章：[如何使用TransitionDrawable實現背景切換漸變效果 ](blog.csdn.net/u011043551/…)

結語

其實都是很基礎的東西。可是就當本身作個總結了。

PS:這塊的Drawable內容參考《Android 開發藝術探索》。