玩轉(zhuǎn)Android之Drawable的使用

更新時間：2016年06月08日 09:12:21 作者：_江南一點雨

這篇文章主要為大家詳細(xì)介紹了Android之Drawable的使用方法，幫助大家系統(tǒng)的學(xué)習(xí)一下Drawable的使用，感興趣的小伙伴們可以參考一下

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

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

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

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

我的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)圖片的大小小于控件的大小時，圖片會在水平方向和垂直方向不斷的重復(fù)。如果我把tileMode屬性的值改為clamp，我們再來看看顯示效果：

大家看到，這時當(dāng)圖片小于控件的大小時，圖片在水平方向或者垂直方向末端的顏色會自動延伸直至將控件填充滿。最后我們再來看看mirror屬性，為了方便看到效果，我這里把圖片換一下，我們再來看看顯示效果：

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

3.ShapeDrawable
shapeDrawable又是一個非常常用的Drawable，我們在開發(fā)中對于純色的背景一般來說都是繪制的，因為直接使用圖片會使App打包后變得比較大，通過XML來繪制純色背景是一個不錯的選擇。關(guān)于這個我這里就不再多說了，大家查看這篇文章自行了解。android開發(fā)之shape詳解。

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

<?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>

我把這個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="江南一點雨" 
  android:layout_height="wrap_content"/> 
 <EditText 
  android:text="江南一點雨" 
  android:layout_marginTop="20dp" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content"/> 
</LinearLayout>

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

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

5.LevelListDrawable
LevelListDrawable，顧名思義就是一個等級Drawable，它就是根據(jù)控件的不同等級來切換Drawable，有點類似于selector中的根據(jù)控件的狀態(tài)來更新Drawable。不同的是這里是根據(jù)控件的level來更新。比如下面一個簡單的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>

這個levelListDrawable文件表示當(dāng)控件的level處于0～10之間的時候，顯示圖片p2，當(dāng)控件的level處于11～20之間的時候顯示圖片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)我點擊按鈕的時候改變ImageView的level，這個時候圖片就會發(fā)生變化。點擊事件代碼如下：

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主要是實現(xiàn)兩個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"/>

點擊事件如下：

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

顯示效果如下：

7.InsetDrawable
InsetDrawable表示可以將一個Drawable嵌入到自己當(dāng)中。類似的效果使用LayerDrawable也能實現(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)然這個設(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ù)一個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表示剪裁的方向，是從水平方向剪裁還是從垂直方向剪裁，這個屬性配合gravity屬性才會生效，至于每次剪裁的百分比則是和level屬性的值有關(guān)，level屬性的取值范圍為0～10000，0表示完全剪裁，10000表示完全不剪裁，5000則表示剪裁一般，其它值依此類推。

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

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

您可能感興趣的文章: