Microsoft Word - Chap16.doc

Size: px

Start display at page:

Download "Microsoft Word - Chap16.doc"

屏却
5 years ago
Views:

1 Android 2D 繪圖和 3D OpenGL 繪圖從本章節你可以學習到 : 如何用 Drawable 物件來繪製圖形繪製您的圖像或動畫到畫面佈局的圖像顯示物件 (ImageView) 上繪製圖形直接描繪到畫布 (Canvas) 上形狀圖像繪製物件 ShapeDrawable 創作二度空間的動畫, 補間動畫繪製物件 Tween Animation 創作二度空間的動畫, 頁框動畫繪製物件 Frame Animation 畫布描繪圖形 View

2 16.1 Android 作業系統的繪圖 Android 作業系統提供 2D 二維繪圖庫和 OpenGL ES 1.0 高性能 3D 三維繪圖功能最常見的 2D 二維繪圖 API 可以自 Drawable 封包取得, 而 OpenGL API 是採用 Khronos OpenGL ES 封包, 再加上 Android 所加上的一些繪圖設施當您開始一個繪圖專案時, 最重要的是您要考慮到如何選擇正確的工具能符合您的需求不同的繪圖專案需要選擇最適用的不同工具來完成, 譬如靜態應用的繪圖和動畫的實現會不同, 互動遊戲或 3D 貼圖的繪圖也會不同 D 二維繪圖 Android 作業系統提供 2D 二維繪圖庫來繪圖創作圖形或圖像動畫您可以自 android.graphics.drawable 和 android.view.animation 封包找到共同的類別來繪製二維圖形和創作二度空間的動畫這一章會討論到如何用 Drawable 物件來繪製圖形的基礎知識? 如何使用 Drawable 類別和它的一些子類別? 如何創作動畫? 製作動畫的方法可以採用在單一圖形上移動伸展旋轉或一系列變化圖形的動畫, 就如同卡通電影的帶子 D 三維繪圖 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-2

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

4 有 3 種方法可以用來定義和實作一個 Drawable 物件 : 1. 使用圖像儲存在專案的資源 2. 使用 xml 檔案來定義 Drawable 屬性 3. 使用一般建構函數接下來第節介紹第 1 項目和第節介紹第 2 項目的使用方法自專案資源來創作圖像一種最簡單的方法是添加圖像到您的應用程式, 可以自應用程式的專案資源來獲取圖像檔案可以使用的圖像檔案種類有 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-4

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=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/imageview01" 16-5

android:layout_width="wrap_content" android:layout_height="wrap_content"

如下列應用程式範例 HelloImage, 只要加上 setcontentview (R.layout.main) 就會在 Android 顯示畫面上描繪出 myimage.

savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } } 16.3.

6 android:layout_width="wrap_content" android:layout_height="wrap_content" </LinearLayout> 因為已在 xml 畫面佈局檔案設計好圖像檔案的來源和顯示位置, 您的程式碼可以非常簡單, 如下列應用程式範例 HelloImage, 只要加上 setcontentview (R.layout.main) 就會在 Android 顯示畫面上描繪出 myimage.png 圖像 public class HelloImage extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } } 自專案資源來創作圖像的範例在 Drawable 類別範例的 main.xml 檔案上, 安排了 3 個圖像按鈕欄位 ImageButton 和 1 個圖像顯示欄位 ImageView 按下任何一個圖像按鈕, 馬上會在圖像顯示欄位上顯示和圖像按鈕上相同的照片如圖 16-1 所示圖 16-1 Drawable 類別範例 16-6

7 範例程式 e_16_1:src/com/example/android/drawable/hellodrawable.java 9 public class HelloDrawable extends Activity { 10 //HelloDrawable 主程式 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); 17 ImageButton mimagebutton02 = (ImageButton)findViewById(R.id.ImageButton02); 18 ImageButton mimagebutton03 = (ImageButton)findViewById(R.id.ImageButton03); 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 }); 25 // 按下 ImageButton02, 在圖像顯示欄位上顯示 navy_102 照片 26 mimagebutton02.setonclicklistener(new ImageButton.OnClickListener() { 27 public void onclick(view arg0) { 28 mimageview.setimageresource(r.drawable.navy_102); 29 } 30 }); 31 // 按下 ImageButton03, 在圖像顯示欄位上顯示 navy_103 照片 32 mimagebutton03.setonclicklistener(new ImageButton.OnClickListener() { 33 public void onclick(view arg0) { 34 mimageview.setimageresource(r.drawable.navy_103); 35 } 36 }); 37 } 38 } 16-7

8 20 行 - 實作 ImageButton01 的監聽功能 22 行 - 在圖像顯示欄位上設定 navy_101 檔案的資源 ID 26 行 - 實作 ImageButton02 的監聽功能 28 行 - 在圖像顯示欄位上設定 navy_102 檔案的資源 ID 32 行 - 實作 ImageButton03 的監聽功能 34 行 - 在圖像顯示欄位上設定 navy_103 檔案的資源 ID 自 xml 檔案來定義圖像相信您學習到現在, 應該已瞭解 Android 作業系統提供給開發用戶介面的基本原理, 在顯示類別 (Views) 時, 將物件定義在 xml 檔案內可以發揮相當大的功能和彈性對繪圖類別 (Drawables),Android 作業系統也提供一樣的觀點如果您希望創建的圖像物件, 在您的互動應用程式並不是一開始就定義在變數, 將圖像物件定義在 xml 檔案內是個明智的選擇甚至於您期望用戶在體驗您的應用程式時, 會改變圖像物件或修改它的屬性, 您更需要考慮使用 xml 檔案來定義這些圖像物件一旦您將圖像物件定義在 xml 檔案內, 儲存在專案的 /res/drawable 目錄, 您採用 Resources.getDrawable() 來傳遞您的 xml 檔案的資源 ID, 就可以檢索或實作圖像物件, 非常方便和實用任何繪圖子類別都會提供 inflate() 擴張方法, 定義在 xml 檔案和讓您的應用程式來實作 Android 作業系統提供非常多的繪圖子類別, 表 16-1 列舉一些繪圖子類別和用在 xml 檔案內的標籤名稱表 16-1 可在 xml 檔案定義的繪圖子類別繪圖子類別 AnimationDrawable BitmapDrawable ClipDrawable xml 檔案內的標籤名稱 <animation-list> <bitmap> <clip> 16-8

9 繪圖子類別 xml 檔案內的標籤名稱 ColorDrawable GradientDrawable InsetDrawable LayerDrawable LevelListDrawable RotateDrawable ScaleDrawable StateListDrawable TransitionDrawable <color> <shape> <onset> <layer-list> <level-list> <rotate> <scale> <selector> <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=" <item <item </transition> 應用程式的實作, 用 Resources.getDrawable() 來傳遞 navy_photos.xml 檔案的資源 ID, 然後在圖像顯示欄位 (mimageview) 上設定 TransitionDrawable 類別的物件 transition, 這樣就完成了物件 transition 可以自 navy_photos.xml 檔案資源找到這兩張照片的檔名, 交互淡入淡出 16-9

Resources res = getresources(); TransitionDrawable transition = (TransitionDrawable) res.getdrawable(r.drawable.navy_photos); ImageView mimageview = (ImageView) findviewbyid(

4 自 xml 檔案定義圖像 TransitionDrawable 範例兩張照片交互淡入淡出的畫面, 如圖 16-2 所示圖 16-2 TransitionDrawable 類別範例範例程式 e_16_2:src/com/example/android/transition/hellotransition.

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); 自 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 主程式 12 public void oncreate(bundle savedinstancestate) { 13 super.oncreate(savedinstancestate); 14 setcontentview(r.layout.main); 15 // 設定轉換圖像來自 navy_photos.xml 16 Resources res = getresources(); 16-10

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 秒交互淡入淡出形狀圖像繪製物件 ShapeDrawable 如果您希望動態地繪製一些二維圖形, 採用 ShapeDrawable 物件或許可以滿足您的需要使用 ShapeDrawable 物件, 您可以天馬行空地編輯繪製二維圖形原生的形狀和樣式 ShapeDrawable 物件延伸自 Drawable 類別, 因此您可以創作一個物件如同使用 Drawable 類別所預期的, 或許是採用 setbackgrounddrawable() 來創作背景圖形當然您也可以繪製您的圖形當成您的自創顯示組件 (Views), 添加在您的畫面佈局上因為 ShapeDrawable 物件有它自己的 draw() 方法, 在使用 ondraw() 方法時, 您可以創建一個 View 的子類別來繪製 ShapeDrawable 物件下面是個範例, 繪製 ShapeDrawable 物件當成 View 類別, 自創的 CustomDrawableView 物件是延伸自 View 類別 16-11

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;

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

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 主程式 15 public void oncreate(bundle savedinstancestate) { 16 super.oncreate(savedinstancestate); 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-13

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: 依序播放事先規劃好的一系列圖像頁數來產生動畫的效果, 就如同卡通電影的帶子補間動畫繪製物件 Tween Animation 補間動畫 Tween Animation 對顯示物件的內容執行連續的簡單變換 ( 位置移動大小旋轉或透明度 ) 所以您可以對顯示文字物件 (TextView) 的文字內 16-14

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 圖形旋轉的屬性 16-15

主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new

ListView 自訂排版主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new int[]{r.drawable.dog1, R.drawable.dog2,