android 2d 繪圖和epaper.gotop.com.tw/pdf/acl030800.pdf · android 2d 繪圖和 3d opengl 繪圖...

Android 2D 繪圖和

3D OpenGL 繪圖

從本章節你可以學習到：

如何用 Drawable物件來繪製圖形

繪製您的圖像或動畫到畫面佈局的圖像顯示物件（ImageView）上

繪製圖形直接描繪到畫布（Canvas）上

形狀圖像繪製物件–ShapeDrawable

創作二度空間的動畫，補間動畫繪製物件–Tween Animation

創作二度空間的動畫，頁框動畫繪製物件–Frame Animation

畫布描繪圖形–View

16-2

16.1 Android 作業系統的繪圖

Android 作業系統提供 2D 二維繪圖庫和 OpenGL ES 1.0 高性能 3D 三維繪

圖功能。最常見的 2D 二維繪圖 API 可以自 Drawable 封包取得，而 OpenGL API

是採用 Khronos OpenGL ES 封包，再加上 Android 所加上的一些繪圖設施。

當您開始一個繪圖專案時，最重要的是您要考慮到如何選擇正確的工具能符

合您的需求。不同的繪圖專案需要選擇最適用的不同工具來完成，譬如靜態應用

的繪圖和動畫的實現會不同，互動遊戲或 3D 貼圖的繪圖也會不同。

16.1.1 2D二維繪圖

Android 作業系統提供 2D 二維繪圖庫來繪圖、創作圖形或圖像動畫。您可

以自 android.graphics.drawable 和 android.view.animation 封包找到共同的類別

來繪製二維圖形和創作二度空間的動畫。

這一章會討論到如何用 Drawable 物件來繪製圖形的基礎知識？如何使用

Drawable 類別和它的一些子類別？如何創作動畫？製作動畫的方法可以採用在

單一圖形上移動、伸展、旋轉或一系列變化圖形的動畫，就如同卡通電影的帶子。

16.1.2 3D三維繪圖

Android 作業系統支援採用 OpenGL ES API 高性能 3D 三維繪圖功能，在嵌

入式設備上的 OpenGL ES 會緊跟主要 OpenGL 規範來更新。Android 作業系統

目前提供 OpenGL ES 1.0，這個版本相對應於 OpenGL 1.3。因此如果您的個人電

腦上是提供 OpenGL 1.3，個人電腦上的 OpenGL 應用程式就可以順利地在

Android 作業系統上執行。

Android 作業系統所提供的 API 規格類似於 J2ME JSR239 OpenGL ES API，

但是也會有一些個別的不同點，學習中要注意這些不同點。

16-3

16.2 繪製 2D 二維圖形方法

通常會有下列兩種方法來繪製 2D 二維圖形：

1. 繪製您的圖像或動畫到圖像顯示物件（ImageView）上

您的圖像或動畫是被系統的顯示繪圖處理器來操作，簡單地說您只是將

圖像放進圖像顯示物件。當您所描繪的是靜態圖或是已規劃好連續動作

的動畫時，可以採用這個方法。

2. 圖形直接描繪到畫布（Canvas）上

這個方法會去呼叫 draw() 方法（傳給畫布）或呼叫 Canvas draw…() 其

中之一的方法（譬如 drawPicture()）。這樣做的話，您可以控制動畫。

當您的應用程式是需要定期去重複繪製本身圖形時，譬如遊戲軟體，可

以採用這個方法，繪圖到畫布上。

16.3 圖像顯示物件–Drawable

如果您只是繪製簡單的圖形（圖像、形狀、顏色和事先規劃好的動畫），您

可以繪圖到圖像顯示物件的背景，或安置到 ImageView 內容上。這一節討論如何

採用 Drawable 類別物件來繪製圖形。

一般而言，Drawable 類別是『任何可以繪圖東西』的抽象物件。Drawable

類別會被擴展出來且定義出許多不同的具體 Drawable 圖形，包括有

BitmapDrawable、ShapeDrawable、PictureDrawable、LayerDrawable 等等，您

也可以延伸這些類別來定義自己獨特功能的 Drawable 物件。

16-4

有 3 種方法可以用來定義和實作一個 Drawable 物件：

1. 使用圖像儲存在專案的資源

2. 使用 xml 檔案來定義 Drawable 屬性

3. 使用一般建構函數

接下來第 16.3.1 節介紹第１項目和第 16.3.2 節介紹第 2 項目的使用方法。

16.3.1 自專案資源來創作圖像

一種最簡單的方法是添加圖像到您的應用程式，可以自應用程式的專案資源

來獲取圖像檔案。可以使用的圖像檔案種類有 PNG（優先採用）、JPG（可接受）

和 GIF（不推薦）。當您的應用程式會有圖示（icons）、商標（logos）或其他圖

像時，建議優先採用這個技術。

使用自圖像資源來獲取圖像檔案之前，您需要將圖像檔案添加到專案的

“/res/drawable”目錄內，可以從您的 Java 程式碼或 xml 畫面佈局檔案參考到這

個圖像。它是以資源 ID 來被參考到的，資源 ID 名稱是不具副檔名的檔案名稱，

譬如 myImage.png 儲存在“/res/drawable”目錄內，您可以使用 R.drawable.myImage

資源 ID 來獲取這個圖像。

(1) Java 程式碼內使用指令建立畫面佈局

以下是一個簡單範例說明您的 Java 程式碼如何來參考到這個圖像。

首先在 Java 程式碼內建立一個 LinearLayout 畫面佈局（mLinearLayout），

且在此實作一個 ImageView 圖像顯示欄位（mImageView）且定義它的屬性，利用

mImageView.setImageResource(R.drawable.myImage) 指令會自“/res/drawable”

目錄獲取 myImage.png 圖像，然後將此圖像設定到 mImageView 圖像顯示欄位

上，且設定 content view 是 mLinearLayout 畫面佈局，就會在 Android 顯示畫面

上描繪出 myImage.png 圖像。

16-5

LinearLayout mLinearLayout;

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// 創建一個 LinearLayout 畫面佈局，在此要加入 ImageView 欄位

mLinearLayout = new LinearLayout(this);

// 實作一個 ImageView 欄位且定義它的屬性

ImageView mImageView = new ImageView(this);

mImageView.setImageResource(R.drawable.myImage);

// 設定 ImageView 欄位能符合 Drawable 大小

mImageView.setAdjustViewBounds(true);

mImageView.setLayoutParams(new

Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

//添加 ImageView 欄位到 LinearLayout 畫面佈局且設定 content view

mLinearLayout.addView(mImageView);

setContentView(mLinearLayout);

}

在某些狀態下，您可能會希望操作您的圖像，譬如用滑鼠移動圖像。首先要

建立一個 Drawable 類別的圖像資源物件 myImageobj，如下列程式碼，自圖像資

源（Resources）取得圖像資源 ID（R.drawable.myImage），定義成 myImageobj。

Resources res = mContext.getResources();

Drawable myImageobj = res.getDrawable(R.drawable.myImage);

(2) 畫面佈局設計在 xml 畫面佈局檔案內

您也可以在 xml 畫面佈局檔案（main.xml）來規劃這個圖像。

首先在 xml 畫面佈局檔案（main.xml）建立一個新的 ImageView 類別，欄位

名稱 ImageView01，圖像檔案的來源是 android:src="@drawable/myImage"，所

定義圖像檔案是 myImage.png。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ImageView android:id="@+id/ImageView01"

16-6

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/myImage"/>

</LinearLayout>

因為已在 xml 畫面佈局檔案設計好圖像檔案的來源和顯示位置，您的程式碼

可以非常簡單，如下列應用程式範例『HelloImage』，只要加上 setContentView

(R.layout.main) 就會在 Android 顯示畫面上描繪出 myImage.png 圖像。

public class HelloImage extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

}

16.3.2 自專案資源來創作圖像的範例

在 Drawable 類別範例的 main.xml 檔案上，安排了 3 個圖像按鈕欄位

ImageButton 和 1 個圖像顯示欄位 ImageView。按下任何一個圖像按鈕，馬上會

在圖像顯示欄位上顯示和圖像按鈕上相同的照片。如圖 16-1 所示。

圖 16-1 Drawable類別範例

16-7

範例程式 e_16_1：src/com/example/android/drawable/HelloDrawable.java

9 public class HelloDrawable extends Activity {

10 //HelloDrawable 主程式

11 @Override

12 public void onCreate(Bundle savedInstanceState) {

13 super.onCreate(savedInstanceState);

14 setContentView(R.layout.main);

15 final ImageView mImageView = (ImageView)findViewById(R.id.ImageView01);

16 ImageButton mImageButton01 = (ImageButton)findViewById(R.id.ImageButton01);



12 行- 建立 HelloDrawable 應用程式。

14 行- 顯示 main.xml 畫面。

15 行- 自顯示畫面模板中取得 ImageView01，定義成 ImageView 類別，實作

變數 mImageView。

16~18 行- 自顯示畫面模板中取得 ImageButton0i，i=1,2,3，定義成 ImageView

類別，實作變數 mImageButton0i，i=1,2,3。

19 //按下 ImageButton01，在圖像顯示欄位上顯示 navy_101 照片

20 mImageButton01.setOnClickListener(new ImageButton.OnClickListener() {

21 public void onClick(View arg0) {

22 mImageView.setImageResource(R.drawable.navy_101);

23 }

24 });





29 }

30 });





35 }

36 });

37 }

38 }

16-8

20 行- 實作 ImageButton01 的監聽功能。

22 行- 在圖像顯示欄位上設定 navy_101 檔案的資源 ID。





16.3.3 自 xml檔案來定義圖像

相信您學習到現在，應該已瞭解 Android 作業系統提供給開發用戶介面的基

本原理，在顯示類別（Views）時，將物件定義在 xml 檔案內可以發揮相當大的

功能和彈性。對繪圖類別（Drawables），Android 作業系統也提供一樣的觀點。

如果您希望創建的圖像物件，在您的互動應用程式並不是一開始就定義在變數，

將圖像物件定義在 xml 檔案內是個明智的選擇。甚至於您期望用戶在體驗您的應

用程式時，會改變圖像物件或修改它的屬性，您更需要考慮使用 xml 檔案來定義

這些圖像物件。

一旦您將圖像物件定義在 xml 檔案內，儲存在專案的“ /res/drawable”目

錄，您採用 Resources.getDrawable() 來傳遞您的 xml 檔案的資源 ID，就可以檢

索或實作圖像物件，非常方便和實用。

任何繪圖子類別都會提供 inflate() 擴張方法，定義在 xml 檔案和讓您的應用

程式來實作。Android 作業系統提供非常多的繪圖子類別，表 16-1 列舉一些繪圖

子類別和用在 xml 檔案內的標籤名稱。

表 16-1 可在 xml檔案定義的繪圖子類別

繪圖子類別 xml檔案內的標籤名稱

AnimationDrawable <animation-list>

BitmapDrawable <bitmap>

ClipDrawable <clip>

16-9

繪圖子類別 xml檔案內的標籤名稱

ColorDrawable <color>

GradientDrawable <shape>

InsetDrawable <onset>

LayerDrawable <layer-list>

LevelListDrawable <level-list>

RotateDrawable <rotate>

ScaleDrawable <scale>

StateListDrawable <selector>

TransitionDrawable <transition>

在此只介紹一個用 TransitionDrawable 繪圖子類別的範例來說明如何定義

xml 檔案的內容和應用程式的實作。其他繪圖子類別的功能，請讀者到 Android

開發網頁查閱。

TransitionDrawable 繪圖子類別是在 xml 檔案內定義的兩個圖像，讓兩個

圖像可以交互淡入淡出（Cross-fade）。首先創建一個 navy_photos.xml 檔案，

在 <transition> 標籤內的 <item> 子標籤定義兩張照片的檔名 navy_101.PNG

和 navy_102.PNG ，兩個圖像檔案和 navy_photos.xml 檔案都要儲存到

“/res/drawable”目錄內。

<?xml version="1.0" encoding="UTF-8"?>

<transition xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/navy_101"/>

<item android:drawable="@drawable/navy_102"/>

</transition>

應用程式的實作，用 Resources.getDrawable() 來傳遞 navy_photos.xml 檔案

的資源 ID，然後在圖像顯示欄位（mImageView）上設定 TransitionDrawable 類

別的物件 transition，這樣就完成了。物件 transition 可以自 navy_photos.xml 檔

案資源找到這兩張照片的檔名，交互淡入淡出。

16-10

Resources res = getResources();

TransitionDrawable transition = (TransitionDrawable)

res.getDrawable(R.drawable.navy_photos);

ImageView mImageView = (ImageView) findViewById(R.id.ImageView01);

mImageView.setImageDrawable(transition);

採用下列指令來啟動物件 transition，每隔 5 秒交互淡入淡出。

transition.startTransition(5000);

16.3.4 自 xml檔案定義圖像–TransitionDrawable範例

兩張照片交互淡入淡出的畫面，如圖 16-2 所示。

圖 16-2 TransitionDrawable類別範例

範例程式 e_16_2：src/com/example/android/transition/HelloTransition.java

9 public class HelloTransition extends Activity {

10 //HelloTransition 主程式

11 @Override



14 setContentView(R.layout.main);

15 //設定轉換圖像來自 navy_photos.xml

16 Resources res = getResources();

16-11

17 TransitionDrawable transition = (TransitionDrawable)

res.getDrawable(R.drawable.navy_photos);

18 ImageView mImageView = (ImageView) findViewById(R.id.ImageView01);

19 mImageView.setImageDrawable(transition);

20 //開始轉換到第 2 張圖像

21 transition.startTransition(5000);

22 }

23 }

12 行- 建立 HelloTransition 應用程式。

14 行- 顯示 main.xml 畫面。

16 行- 實作一個 Resource 類別物件 res。

17 行- 實作一個 TransitionDrawable 類別物件 transition，用 Resources.getDrawable()

來取得 navy_photos.xml 檔案的資源 ID。

18 行- 自顯示畫面模板中取得 ImageView01，定義 ImageView 類別，實作變數

mImageView。

19 行- 在圖像顯示欄位 mImageView 上設定 TransitionDrawable 類別的物件

transition。

21 行- 啟動物件 transition，每隔 5 秒交互淡入淡出。

16.3.5 形狀圖像繪製物件–ShapeDrawable

如果您希望動態地繪製一些二維圖形，採用 ShapeDrawable 物件或許可以滿

足您的需要。使用 ShapeDrawable 物件，您可以天馬行空地編輯繪製二維圖形原

生的形狀和樣式。

ShapeDrawable 物件延伸自 Drawable 類別，因此您可以創作一個物件如同使

用 Drawable 類別所預期的，或許是採用 setBackgroundDrawable() 來創作背景圖

形。當然您也可以繪製您的圖形當成您的自創顯示組件（Views），添加在您的

畫面佈局上。因為 ShapeDrawable 物件有它自己的 draw() 方法，在使用 onDraw()

方法時，您可以創建一個 View 的子類別來繪製 ShapeDrawable 物件。下面是個

範例，繪製 ShapeDrawable 物件當成 View 類別，自創的 CustomDrawableView

物件是延伸自 View 類別。

16-12

public class CustomDrawableView extends View {

private ShapeDrawable mDrawable;

public CustomDrawableView(Context context) {

super(context);

int x = 10;

int y = 10;

int width = 300;

int height = 50;

mDrawable = new ShapeDrawable(new OvalShape());

mDrawable.getPaint().setColor(0xff74AC23);

mDrawable.setBounds(x, y, x + width, y + height);

}

protected void onDraw(Canvas canvas) {

mDrawable.draw(canvas);

}

}

圖形顯示如圖 16-3 所示。

圖 16-3 形狀圖像繪製

在自創的 CustomDrawableView 物件內，定義 ShapeDrawable 物件是個橢圓

形，顏色是綠色和圖形範圍（左上角是 (10,10)、長=300 和高=50）。如果沒有

設定圖形範圍的話，將不會顯示圖形。顏色沒有特別指定的話，會默認是黑色。

16-13

一旦完成自創的 CustomDrawableView 物件，您可以在 Activity 的程式碼內

呼叫它或定義在畫面佈局的 xml 檔案內。

在 Activity 的程式碼內的 onCreate() 階段，定義 CustomDrawableView 類別

實作一個變數 mCustomDrawableView，然後將這個變數設定成內容顯示的參數，

就可以顯示圖形。

CustomDrawableView mCustomDrawableView = new CustomDrawableView(this);

setContentView(mCustomDrawableView);

和安置在 android.graphics.drawable 封包內的其他 Drawable 類別一樣，

ShapeDrawable 類別允許您定義繪圖的許多屬性。這些屬性您都可以調整，譬如

alpha 透明度、顏色濾光、抖動、不透性和顏色。

範例程式 e_16_3：src/com/example/android/shapee/HelloShape.java

11 public class HelloShape extends Activity {

12 private CustomDrawableView mCustomDrawableView;

13 //HelloShape 主程式

14 @Override



17 mCustomDrawableView = new CustomDrawableView(this);

18 setContentView(mCustomDrawableView);

19 }

12 行- 建立 HelloShape 應用程式。

17 行- 定義 CustomDrawableView 類別，實作一個變數 mCustomDrawableView。

18 行- 將變數 mCustomDrawableView 設定成內容顯示的參數，就可以顯示圖形。

20 //CustomDrawableView 類別

21 public class CustomDrawableView extends View {

22 private ShapeDrawable mDrawable;

23 public CustomDrawableView(Context context) {

24 super(context);

25 int x = 10;

26 int y = 10;

27 int width = 300;

28 int height = 50;

16-14

29 mDrawable = new ShapeDrawable(new OvalShape());

30 mDrawable.getPaint().setColor(0xff74AC23);

31 mDrawable.setBounds(x, y, x + width, y + height);

32 }

33 protected void onDraw(Canvas canvas) {

34 mDrawable.draw(canvas);

35 }

36 }

37 }

21 行- 自創 CustomDrawableView 物件延伸自 View 類別。

22 行- 定義 ShapeDrawble 類別，實作變數 mDrawable。

23 行- 定義 CustomDrawableView 物件的內容。

29 行- 定義 mDrawable 物件是個橢圓形。

30 行- 定義 mDrawable 物件的顏色是綠色。

31 行- 定義 mDrawable 物件的圖形範圍，左上角是 (10,10)、長=300 和高=50。

34 行- 在畫布上描繪 mDrawable 物件。

16.4 創作二度空間的動畫–Animation

如何創作和製作動畫， Android 作業系統提供兩種創作二度空間的動畫

Animation 方法：

1. 補間動畫 Tween Animation：採用對單一圖形逐漸地移動、伸展或旋轉來

產生動畫的效果，也可以逐漸地改變透明度。

2. 頁框動畫 Frame Animation：依序播放事先規劃好的一系列圖像頁數來產

生動畫的效果，就如同卡通電影的帶子。

16.4.1 補間動畫繪製物件–Tween Animation

補間動畫 Tween Animation 對顯示物件的內容執行連續的簡單變換（位置移

動、大小、旋轉或透明度）。所以您可以對顯示文字物件（TextView）的文字內

16-15

容或圖形顯示物件（ImageView）的圖像規劃移動、旋轉，伸展或縮小，如果文

字內容有背景圖片的話，該背景圖片也會配合文字的變換一起改變。

Android.view.animation 封包提供所有補間動畫 Tween Animation 的繪製類別。

您可以將補間動畫 Tween Animation 的序列指令定義在 android 程式碼或動

畫 xml 畫面佈局檔案內，建議採用動畫 xml 畫面佈局檔案來創作補間動畫 Tween

Animation，因為動畫 xml 畫面佈局檔案內容的可讀性高、可重複使用，比寫在

程式碼內（hard-coding）更容易替換。這裡只介紹採用動畫 xml 畫面佈局檔案的

方法。（如果您要創作補間動畫 Tween Animation 在 Android 程式碼，請參

AnimationSet 類別和 Animation 子類別）。

補間動畫 Tween Animation 的指令可以依照您的意願來規劃如何展現動畫和

執行時間長短。動畫的變換可以是連續且依序的單一行為，或是數個行為一起動

作。譬如您可以規劃圖形自左到右移動，然後旋轉 90 度，也可以同時移動和旋轉

圖形。

每一個單一行為的變換都包括一組參數的設定（開始和結束的大小、開始和

結束的角度…等等），和一些共同的屬性（執行時間和等待時間）。也可以用 <set>

標籤來規劃數個行為一起動作。

設計完成動畫 xml 畫面佈局檔案後要放在專案的“/res/anim”目錄內。動畫

xml 畫面佈局檔案必須至少要有一個單元，它可以是 <alpha> 、 <scale> 、

<translate>、<rotate> 動畫單元或 <set> 包括一組這些單元。初始時，對這些單

元都設定成是同時執行，要規劃單元間依序發生，需要指定個別單元和 <set> 的

間隔時間 startOffset 和顯示時間 Duration 屬性。

以下的數個表說明補間動畫 Tween Animation 共同的屬性、alpha 漸變透明

度的屬性、scale 漸變圖形大小的屬性、translate 圖形移動位置的屬性和 rotate 圖

形旋轉的屬性。

android 2d 繪圖和epaper.gotop.com.tw/pdf/acl030800.pdf · android 2d 繪圖和 3d opengl 繪圖...

Documents