Drawable天天用，可你是否對(duì)Drawable家族有一個(gè)完整的認(rèn)知？今天我們就來系統(tǒng)的學(xué)習(xí)一下Drawable的使用。

1.概述
用過Drawable的筒子都知道Drawable有很多種，有的時(shí)候Drawable是一張圖片，有的時(shí)候Drawable是我們通過顏色構(gòu)造出來的某種圖形。最常見的自己構(gòu)造的Drawable圖形莫過于ShapeDrawable，我們?cè)陂_發(fā)中可能經(jīng)常需要自己繪制一個(gè)矩形、圓形、橢圓等等各種各樣的圖形。一般來說，Drawable并沒大小的概念（雖然可以通過getIntrinsicHeight和getIntrinsicWidth兩個(gè)方法獲取Drawable的寬和高，但是這兩個(gè)方法并不總是有效，因?yàn)槿绻覀兊腄rawable是圖片的話，那么Drawable的大小就是圖片的大小，如果我們的Drawable本身就是顏色的話，那么就沒有寬高的概念），因?yàn)槲覀冊(cè)谟肈rawable的時(shí)候，大多數(shù)時(shí)候都是把它當(dāng)作某一個(gè)控件的背景來使用的，此時(shí)Drawable會(huì)被拉伸到和View相同的大小，此時(shí)Drawable的大小實(shí)際上就是控件的大小。接下來我們來看看Drawable的繼承關(guān)系：

在Drawable的這些繼承類中我們常用的主要有以下幾種：LayerDrawable、ShapeDrawable、NinePatchDrawable、BitmapDrawable、StateListDrawable、LevelListDrawable、TransitionDrawable、InsetDrawable、ScaleDrawable、ClipDrawable等，下面我們會(huì)就這些不同的Drawable一一介紹。

2.BitmapDrawable
BitmapDrawable算是最最最最常見的Drawable之一，我們構(gòu)造一個(gè)Bitmap對(duì)象的時(shí)候，有時(shí)候會(huì)用到BitmapDrawable，那么BitmapDrawable的構(gòu)造，除了在代碼中new一個(gè)BitmaDrawable之外，我們還可以使用XML來構(gòu)造一個(gè)BitmapDrawable對(duì)象，在項(xiàng)目的drawable文件中新創(chuàng)建一個(gè)xml文件，代碼如下：

<?xml version="1.0" encoding="utf-8"?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
  android:antialias="true" 
  android:src="@drawable/a2w" 
  android:dither="true" 
  android:filter="true" 
  android:gravity="top|left" 
  android:tileMode="mirror" 
 > 
</bitmap> 

這里只有src屬性是必須的，該屬性指這個(gè)BitmapDrawable要顯示的圖片，其他屬性看單詞意思都很容易明白，antialias表示是否開啟抗鋸齒，這個(gè)在自定義View創(chuàng)建Paint時(shí)經(jīng)常用到；dither表示是否開啟抖動(dòng)效果，作用是手機(jī)像素配置和圖片像素配置不一致時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)整顯示效果，關(guān)于圖片像素問題參見Android開發(fā)之Bitmap二次采樣文章；filter表示是否開啟過濾效果，這個(gè)屬性也是為了使圖片被放大或者縮小時(shí)有一個(gè)較好的顯示效果；gravity屬性則表示當(dāng)圖片的大小小于控件的大小時(shí)，圖片的顯示位置，tileMode表示平鋪模式，在我們的Windows電腦桌面設(shè)置的時(shí)候就有這個(gè)選項(xiàng)，該屬性共有四種取值，分別是disable、repeat、mirror、clamp四種，默認(rèn)情況下是disable，就是不做任何處理，當(dāng)我們?cè)谶@里使用了除disable之外的另外三種取值時(shí)，gravity屬性值失效。下面我們來看看這三種取值時(shí)的效果：
我的原圖是這樣的：

我的bitmapdrawable是這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
  android:antialias="true" 
  android:src="@drawable/p2" 
  android:dither="true" 
  android:filter="true" 
  android:gravity="top|left" 
  android:tileMode="repeat" 
 > 
</bitmap> 

我的View是這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 tools:context="org.mobiletrain.drawable.MainActivity"> 
 
 <View 
  android:layout_width="400dp" 
  android:layout_height="400dp" 
  android:background="@drawable/mybitmap"/> 
</RelativeLayout> 

這是顯示效果是這樣的：

大家看到，當(dāng)圖片的大小小于控件的大小時(shí)，圖片會(huì)在水平方向和垂直方向不斷的重復(fù)。如果我把tileMode屬性的值改為clamp，我們?cè)賮砜纯达@示效果：

大家看到，這時(shí)當(dāng)圖片小于控件的大小時(shí)，圖片在水平方向或者垂直方向末端的顏色會(huì)自動(dòng)延伸直至將控件填充滿。最后我們?cè)賮砜纯磎irror屬性，為了方便看到效果，我這里把圖片換一下，我們?cè)賮砜纯达@示效果：

大家看到一個(gè)小飛機(jī)在水平方向和垂直方向以倒影的形式在不斷的重復(fù)。這就是mirror的顯示效果。

3.ShapeDrawable
shapeDrawable又是一個(gè)非常常用的Drawable，我們?cè)陂_發(fā)中對(duì)于純色的背景一般來說都是繪制的，因?yàn)橹苯邮褂脠D片會(huì)使App打包后變得比較大，通過XML來繪制純色背景是一個(gè)不錯(cuò)的選擇。關(guān)于這個(gè)我這里就不再多說了，大家查看這篇文章自行了解。android開發(fā)之shape詳解。

4.LayerDrawable
LayerDrawable表示一個(gè)層次化的Drawable，這個(gè)要怎么理解呢？大家看看我之前的這篇文章就理解了博客關(guān)于ProgressBar的美化問題。
LayerDrawable中可以有n多個(gè)item，每個(gè)item就是一個(gè)Drawable，每一個(gè)Drawable依據(jù)代碼的順序相互覆蓋著顯示出來。先寫的先繪制，后寫的后繪制，最終顯示的效果是一個(gè)疊加的顯示效果，我們來看下面一個(gè)例子：

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item> 
 <shape android:shape="rectangle"> 
  <solid android:color="@color/lineColor"/> 
 </shape> 
</item> 
 <item android:bottom="8dp"> 
  <shape android:shape="rectangle"> 
   <solid android:color="@color/lineColor2"/> 
  </shape> 
 </item> 
 <item android:bottom="1dp" android:left="1dp" android:right="1dp"> 
  <shape android:shape="rectangle"> 
   <solid android:color="@color/etbg"/> 
  </shape> 
 </item> 
</layer-list> 

我把這個(gè)Drawable作為EditText的背景，代碼如下：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
 android:orientation="vertical" 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:padding="8dp" 
 tools:context="org.mobiletrain.drawable.MainActivity"> 
 <EditText 
  android:background="@drawable/textview_background" 
  android:layout_width="match_parent" 
  android:text="江南一點(diǎn)雨" 
  android:layout_height="wrap_content"/> 
 <EditText 
  android:text="江南一點(diǎn)雨" 
  android:layout_marginTop="20dp" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content"/> 
</LinearLayout> 

顯示效果如下（上面是加了背景的顯示效果，下面是正常的EditText的顯示效果）：

大家看到，上面的EditText有一點(diǎn)不同，原因在于我在LayerDrawable中首先繪制了一個(gè)藍(lán)色的矩形，然后又繪制了一個(gè)綠色的矩形，但是這個(gè)綠色矩形距離底部有8dp的高度，這就保證了輸入框有兩個(gè)向上翹起的藍(lán)色邊框，最后繪制整個(gè)背景色，整個(gè)背景色為黃色，但是背景色距離左右下三邊的距離分別為1dp，這樣就確保了另外三條線可以正常顯示出來。OK，就是這么簡單，更酷炫的用法參見關(guān)于ProgressBar的美化問題。

5.LevelListDrawable
LevelListDrawable，顧名思義就是一個(gè)等級(jí)Drawable，它就是根據(jù)控件的不同等級(jí)來切換Drawable，有點(diǎn)類似于selector中的根據(jù)控件的狀態(tài)來更新Drawable。不同的是這里是根據(jù)控件的level來更新。比如下面一個(gè)簡單的LevelListDrawable文件：

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

這個(gè)levelListDrawable文件表示當(dāng)控件的level處于0～10之間的時(shí)候，顯示圖片p2，當(dāng)控件的level處于11～20之間的時(shí)候顯示圖片p1，我們來看看我的ImageView：

<ImageView 
  android:layout_width="200dp" 
  android:scaleType="centerCrop" 
  android:id="@+id/iv" 
  android:src="@drawable/level_list_drawable" 
  android:layout_height="200dp"/> 

在ImageView中將剛才的LevelListDrawable對(duì)象作為它的src，然后當(dāng)我點(diǎn)擊按鈕的時(shí)候改變ImageView的level，這個(gè)時(shí)候圖片就會(huì)發(fā)生變化。點(diǎn)擊事件代碼如下：

public void toggle(View view) { 
  if (flag) { 
   iv.setImageLevel(5); 
   flag = false; 
  }else{ 
   iv.setImageLevel(15); 
   flag = true; 
  } 
 } 

顯示效果如下：

這里大家需要注意的是level的取值范圍為0～10000，默認(rèn)值為0。

6.TransitonDrawable
TransitionDrawable主要是實(shí)現(xiàn)兩個(gè)Drawable之間淡入淡出的效果。我們來看看TransitionDrawable文件：

<?xml version="1.0" encoding="utf-8"?> 
<transition xmlns:android="http://schemas.android.com/apk/res/android"> 
 <item android:drawable="@drawable/p1"/> 
 <item android:drawable="@drawable/p2"/> 
</transition> 

再來看看ImageView文件：

<ImageView 
  android:layout_width="200dp" 
  android:scaleType="centerCrop" 
  android:id="@+id/iv" 
  android:src="@drawable/transition_drawable" 
  android:layout_height="200dp"/> 

點(diǎn)擊事件如下：

public void toggle(View view) { 
  TransitionDrawable drawable = (TransitionDrawable) iv.getDrawable(); 
  drawable.startTransition(2000); 
 } 

顯示效果如下 ：

7.InsetDrawable
InsetDrawable表示可以將一個(gè)Drawable嵌入到自己當(dāng)中。類似的效果使用LayerDrawable也能實(shí)現(xiàn)。來看看代碼：

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

表示中心的圓形與控件的上下左右四邊的間距都為20dp，當(dāng)然這個(gè)設(shè)置圖像的地方也可以像下面這種方式來寫：

<?xml version="1.0" encoding="utf-8"?> 
<inset xmlns:android="http://schemas.android.com/apk/res/android" 
  android:insetBottom="20dp" 
  android:drawable="@drawable/p1" 
  android:insetLeft="20dp" 
  android:insetRight="20dp" 
  android:insetTop="20dp"> 
</inset> 

8.ClipDrawable
表示根據(jù)一個(gè)Drawable的level對(duì)Drawable進(jìn)行剪裁，代碼如下：

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

drawable表示drawable圖像，clipOrientation表示剪裁的方向，是從水平方向剪裁還是從垂直方向剪裁，這個(gè)屬性配合gravity屬性才會(huì)生效，至于每次剪裁的百分比則是和level屬性的值有關(guān)，level屬性的取值范圍為0～10000，0表示完全剪裁，10000表示完全不剪裁，5000則表示剪裁一般，其它值依此類推。

原文鏈接：http://blog.csdn.net/u012702547/article/details/51594131

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論