[Android]Android進階UI開發系列教程（二） – Android繪製教程

教程索引

1. Android 拖拽（Drag and Drop）教程
2. Android 繪製（Drawables）教程
3. Android 樣式和主題（Styles and Themes）教程
4. Android 動態壁紙（Live Wallpaper）教程
5. Android 主畫面小組件（Homescreen Widgets）教程
6. Android 自訂視圖（Custom Views）教程
7. Android 支援不同大小螢幕（Support different screensize）教程
8. Android 動畫（animations）教程
9. Android 觸摸（Touch）教程

Android繪製教程

1. Drawables 簡介

    Drawable 資源是一個籠統的概念，暫且我就籠統地叫它繪製吧，使用它可以來一個圖形。一個最簡單的案例就是 bitmap 檔案，在 Android 中可以通過 BitmapDrawable 類來封裝該檔案。Bitmaps 檔案通常存放在 res/drawable-**目錄下，當你建立一個 Android 項目的時候，伴隨著也會預設建立幾個 drawable 目錄，drawable-hdpi|drawable-ldpi|drawable-mdpi|drawable-xhdpi，你可以為不同的 Android 裝置提供不同尺寸的檔案。如果你為不同尺寸的 Android 系統只提供一個檔案，那麼該檔案在不同解析度的裝置上可能顯示不同的效果。

    Android 除了支援圖形檔案，還支援 XML drawables 和 9-patch 圖形檔案。XML drawables 被用來描述shapes（color, border, gradient），State 和 Transitions 等。9-patch 圖形檔案的作用是當圖形整個擴大，例如某個檔案充當 Button 的背景圖片，當按鈕變得很大的時候，背景圖片也會變大，那麼圖片自然也會變得模糊，而9-patch可以給該圖片劃定一個地區，用來指定圖片變大後，那一塊也跟著變大，哪個地區不變。

2. 擷取 Drawables

   在XML檔案中直接通過 @drawable/filename 來擷取 Drawables，需要注意的是filename不包含副檔名。在Java代碼中同樣可以擷取 Drawables。絕大多數的視圖（Views）接受一個 resource ID來作為輸出的參數。例如下面的例子展示了如何將一個 Drawables 作為 ImageView 的背景圖片。

ImageView imageView = (ImageView) findViewById(R.id.image);
imageView.setImageResource(R.drawable.hello);

3. XML Drawables

3.1 Shape Drawables

    Shape Drawables XML檔案可以用來定義一個幾何對象，你可以定義該幾何對象顏色（colors）， 邊框（borders）以及漸層效果（gradients），並將該對象效果應用到視圖（Views）上面。使用 Shape Drawables XML的優勢在於，他們可以根據不同尺寸的手機自動調整大小。

    下面我將定義一個 Shape Drawable -- myshape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <stroke
    android:width="2dp"
    android:color="#FFFFFFFF" />
  <gradient
    android:endColor="#DDBBBBBB"
    android:startColor="#DD777777"
    android:angle="90" />
  <corners
    android:bottomRightRadius="7dp"
    android:bottomLeftRadius="7dp"
    android:topLeftRadius="7dp"
    android:topRightRadius="7dp" />
</shape>

    接著我們將上面定義的 drawable 應用到你的 layout 中。注意下面例子中的第 5 行代碼。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@drawable/myshape"
 6     android:orientation="vertical" >
 7 
 8     <EditText
 9         android:id="@+id/editText1"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12    >
13     </EditText>
14 
15     <RadioGroup
16         android:id="@+id/radioGroup1"
17         android:layout_width="match_parent"
18         android:layout_height="wrap_content" >
19 
20         <RadioButton
21             android:id="@+id/radio0"
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:checked="true"
25             android:text="@string/celsius" >
26         </RadioButton>
27 
28         <RadioButton
29             android:id="@+id/radio1"
30             android:layout_width="wrap_content"
31             android:layout_height="wrap_content"
32             android:text="@string/fahrenheit" >
33         </RadioButton>
34     </RadioGroup>
35 
36     <Button
37         android:id="@+id/button1"
38         android:layout_width="wrap_content"
39         android:layout_height="wrap_content"
40         android:text="@string/calc" 
41         android:onClick="myClickHandler">
42     </Button>
43 
44 </LinearLayout>

3.2 State Drawables

    State Drawables可以用來指定不同的狀態， 針對視圖（View）的不同狀態可以給該視圖賦予不同的 drawable。最常見的例子就是根據按鈕不同的狀態，顯示不同的 drawable。

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

  <item android:drawable="@drawable/button_pressed"
    android:state_pressed="true" />
  <item android:drawable="@drawable/button_checked"
    android:state_checked="true" />
  <item android:drawable="@drawable/button_default" />

</selector>

3.3 Transition Drawables

    Transition Drawables可以用來在代碼中進行圖片轉換。<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/first_image" />
  <item android:drawable="@drawable/second_image" />
</transition>

 

final ImageView image = (ImageView) findViewById(R.id.image);
final ToggleButton button = (ToggleButton) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(final View v) {
    TransitionDrawable drawable = (TransitionDrawable) image.getDrawable();
    if (button.isChecked()) {
      drawable.startTransition(500);
    } else {
      drawable.reverseTransition(500);
    }
  }
});

4. 9-Patch Drawables

    9 Patch drawables 是一些具有額外 1px 外邊框的圖片資源。在9-Patch 圖片的上邊和左邊你可以定義一塊地區， 當圖片資源相對於視圖而言太小的時候，這些地區將被縮放。在圖片的右邊和下面你也可以定義一塊地區，如果視圖可以添加文字資訊，那麼這些文字資訊將被放置在這些地區，例如Button。

    在 android-sdk/tool安裝目錄下，你可以找到 draw9patch 程式，使用該程式你可以輕鬆地繪製 9 Patch drawables。