Drawable天天用，可你是否對Drawable家族有一個(gè)完整的認(rèn)知？今天我們就來系統(tǒng)的學(xué)習(xí)一下Drawable的使用。
1.概述
用過Drawable的筒子都知道Drawable有很多種，有的時(shí)候Drawable是一張圖片，有的時(shí)候Drawable是我們通過顏色構(gòu)造出來的某種圖形。最常見的自己構(gòu)造的Drawable圖形莫過于ShapeDrawable，我們在開發(fā)中可能經(jīng)常需要自己繪制一個(gè)矩形、圓形、橢圓等等各種各樣的圖形。一般來說，Drawable并沒大小的概念（雖然可以通過getIntrinsicHeight和getIntrinsicWidth兩個(gè)方法獲取Drawable的寬和高，但是這兩個(gè)方法并不總是有效，因?yàn)槿绻覀兊腄rawable是圖片的話，那么Drawable的大小就是圖片的大小，如果我們的Drawable本身就是顏色的話，那么就沒有寬高的概念），因?yàn)槲覀冊谟肈rawable的時(shí)候，大多數(shù)時(shí)候都是把它當(dāng)作某一個(gè)控件的背景來使用的，此時(shí)Drawable會被拉伸到和View相同的大小，此時(shí)Drawable的大小實(shí)際上就是控件的大小。接下來我們來看看Drawable的繼承關(guān)系：
在Drawable的這些繼承類中我們常用的主要有以下幾種：LayerDrawable、ShapeDrawable、NinePatchDrawable、BitmapDrawable、StateListDrawable、LevelListDrawable、TransitionDrawable、InsetDrawable、ScaleDrawable、ClipDrawable等，下面我們會就這些不同的Drawable一一介紹。
2.BitmapDrawable
BitmapDrawable算是最最最最常見的Drawable之一，我們構(gòu)造一個(gè)Bitmap對象的時(shí)候，有時(shí)候會用到BitmapDrawable，那么BitmapDrawable的構(gòu)造，除了在代碼中new一個(gè)BitmaDrawable之外，我們還可以使用XML來構(gòu)造一個(gè)BitmapDrawable對象，在項(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)會自動(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)我們在這里使用了除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í)，圖片會在水平方向和垂直方向不斷的重復(fù)。如果我把tileMode屬性的值改為clamp，我們再來看看顯示效果：
大家看到，這時(shí)當(dāng)圖片小于控件的大小時(shí)，圖片在水平方向或者垂直方向末端的顏色會自動(dòng)延伸直至將控件填充滿。最后我們再來看看mirror屬性，為了方便看到效果，我這里把圖片換一下，我們再來看看顯示效果：
大家看到一個(gè)小飛機(jī)在水平方向和垂直方向以倒影的形式在不斷的重復(fù)。這就是mirror的顯示效果。
3.ShapeDrawable
shapeDrawable又是一個(gè)非常常用的Drawable，我們在開發(fā)中對于純色的背景一般來說都是繪制的，因?yàn)橹苯邮褂脠D片會使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è)等級Drawable，它就是根據(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對象作為它的src，然后當(dāng)我點(diǎn)擊按鈕的時(shí)候改變ImageView的level，這個(gè)時(shí)候圖片就會發(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對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屬性才會生效，至于每次剪裁的百分比則是和level屬性的值有關(guān)，level屬性的取值范圍為0～10000，0表示完全剪裁，10000表示完全不剪裁，5000則表示剪裁一般，其它值依此類推。
原文鏈接：http://blog.csdn.net/u012702547/article/details/51594131
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
