[Android]Android高級UI開發系列教程（二） - Android繪制教程

本文轉載自查看原文 2012-11-14 23:28 2910

教程索引

Android 拖拽（Drag and Drop）教程
Android 繪制（Drawables）教程
Android 樣式和主題（Styles and Themes）教程
Android 動態壁紙（Live Wallpaper）教程
Android 主屏幕小部件（Homescreen Widgets）教程
Android 自定義視圖（Custom Views）教程
Android 支持不同大小屏幕（Support different screensize）教程
Android 動畫（animations）教程
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。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [Android]Android高級UI開發系列教程（一） - Android拖拽教程 [Android]Android高級UI開發系列教程（三） - Android樣式和主題教程 Android開發教程匯總 Android開發簡易教程 android高級UI之Draw繪制流程、Paint渲染高級應用基於Android的小巫新聞客戶端開發系列教程 Android項目實戰--手機衛士開發系列教程 Android開發教程 --- Content Provider 老羅Android開發視頻教程 (android常用UI編程) 25集集合 Android UI繪制流程及原理