投影片 1

Size: px

Start display at page:

Download "投影片 1"

崇玄皮
5 years ago
Views:

1 Chapter 12 Android 動畫程式設計

2 前言 Android 在動畫程式設計上有非常多成熟的工具可以使用例如說 :Canvas 畫布 ViewFlipper 動畫等, 另外也可以使用 OpenGL 去設計 2D/3D 圖形或動畫, 使手機多媒體或是操作介面有更多爆炸性的發展

3 畫布 / 畫筆

4 Canvas Canvas 物件在 Java 應用程式上已經非常成熟, 用於 Android 上也是開發動畫或 UI 的一個好工具 Canvas 就像手機中的畫布, 可以在 Canvas 上繪製圖形或者圖片, 一般我們可以使用以下四個組成部分, 在 Android 上繪製圖形 : 點陣圖 ( 包含像素 ) Canvas 畫布 ( 包含繪畫內容, 寫入點陣圖 ) 初始圖形 ( 例如 Rect Bitmap text 等等 ) Paint( 用來描述上面初始圖形的顏色和類型等等 )

5 Canvas View 類別的 ondraw 方法會傳入一個 Canvas 物件, 用來繪製元件界面的畫布在實作 ondraw 方法時, 經常會看到呼叫到 save 和 restore 方法, 下面就解釋這兩個方法的作用 : save: 保存 Canvas 的狀態 save 之後, 可以呼叫 Canvas 中的位移縮放旋轉裁切等等操作 restore: 回復 Canvas 之前保存的狀態防止 save 後對 Canvas 執行的操作對後續繪製有所影響

6 Canvas save 和 restore 要同時使用, 如果 restore 呼叫次數比 save 多, 會引發 Error 下面將有一簡易範例解說 Canvas 中較重要的部分, 如圖所示

7 Canvas 程式碼 (CanvasEX.java): package ncu.bnlab.canvasexample; import android.app.activity; import android.os.bundle; public class CanvasEX extends Activity DrawAction public void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); drawaction = new DrawAction(this); setcontentview(drawaction); /* requestfocus 方法用於設置新焦點 */ drawaction.requestfocus();

8 Canvas 程式碼 (DrawAction.java): public void ondraw(canvas canvas) /* 取得寬度 */ int px = getmeasuredwidth(); int py = getmeasuredwidth(); /* 設定線畫筆顏色 */ linepaint.setcolor(color.white); /* 設置為 true 可消除邊緣效果 */ linepaint.setantialias(true); /* 設定背景畫筆顏色 */ backgroundpaint.setcolor(color.blue); backgroundpaint.setantialias(true); 由於程式碼過多, 完整程式碼請參考光碟中 CanvasEX.java DrawAction.java /* 設定方塊畫筆顏色 */ rectpaint.setcolor(color.red); rectpaint.setantialias(true); /* 於畫布繪製圖形 */ canvas.drawrect(0, 0, px, py, backgroundpaint); /* 呼叫 save 方法儲存目前狀態 */ canvas.save();... /* 呼叫 restore 方法 */ canvas.restore(); /* 於畫布繪製方塊 */ canvas.drawrect(px, py, 300, 300, rectpaint);

9 Canvas 從範例可看出, 其中紅色的方塊位置有明顯差異造成這樣的原因是因為將 Canvas 中 save 與 restore 方法註解, 所有的圖都是在旋轉 90 後的畫布上繪製當執行完 ondraw 方法, 系統自動將畫布恢復回來

10 Paint Paint 類別擁有樣式與顏色資訊, 主要是有關於如何繪製幾何圖形文字及點陣圖的方法, 範例如圖所示

11 Paint 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="previous" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="next" /> </LinearLayout> <ViewFlipper android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" /> </LinearLayout>

12 Paint 程式碼 (PaintEX.java): package ncu.bnlab.paintexample; import android.app.activity; import android.os.bundle; import android.view.window; import public class PaintEX extends Activity DrawAction public void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); /* getwindow().setflags(windowmanager.layoutparams.flag_fullscreen, WindowManager.LayoutParams.FLAG_FULLSCREEN); */ /* requestwindowfeature(window.feature_no_title); */ drawaction = new DrawAction(this); setcontentview(drawaction); /* requestfocus 方法用於設置新焦點 */ drawaction.requestfocus();

13 Paint 程式碼 -1(DrawAction.java): 程式碼 -2(DrawAction.java): List<Point> points = new ArrayList<Point>(); Paint paint = new Paint(); public DrawAction(Context context) super(context); /* 設定可取得焦點 */ setfocusable(true); /* 設定在觸控模式可取得焦點 */ setfocusableintouchmode(true); /* 設定監聽器 */ this.setontouchlistener(this); /* 設定畫筆顏色 */ paint.setcolor(color.white); public void ondraw(canvas canvas) for (Point point : points) /* 於畫布上繪製圖形 */ canvas.drawcircle(point.x, point.y, 5, paint); public boolean ontouch(view view, MotionEvent event) Point point = new Point(); /* 取得目前觸碰螢幕之 x,y 值 */ point.x = event.getx(); point.y = event.gety(); /* 新增點至 Point 物件 */ points.add(point); /* 用於更新 View */ invalidate(); return true;

14 Paint 了解上述 Canvas 與 Paint 結合的範例後, 接著解說關於在 Android 中如何顯示字體, 因為字體在所有應用中是最常被使用到的字體一般擁有的屬性有大小顏色對齊方式粗體斜體下劃線等

15 Paint 在 Android 中使用 Typeface 類別來定義字體 Typeface 可以指定字體和字體風格, 並可用 Paint 繪製字型,Typeface 就類似 Paint 中的其它屬性 textsize,textskewx,textscalex... 等等下表為字體常數的定義 : 字體 (Typeface) DEFAULT DEFAULT_BOLD MONOSPACE SANS_SERIF SERIF

16 Paint 這些字體常數, 在應用程式中是可以直接使用的, 例如說 :Typeface. SERIF 另外 Typeface 也包含了一些用來處理字體的方法, 例如 : 建立字體 Create(), 取得字體屬性 getstyle() isbold() isitalic() 等等 Typeface 類別不僅定義了字體, 還包括粗體 (Bold) 斜體 (Italic)

17 Paint 其它對顯示 String 有影響的因素, 都可以在 Paint 類別中找到它們的方法, 如下頁表所示 : 功能字體對齊方式字體大小顏色下劃線 Paint 中的相關操作 settypeface(typeface typeface) gettypeface() settextalign(paint.align align) Paint.Align gettextalign() gettextsize() settextsize(float textsize) setcolor(int color) getcolor() isunderlinetext() setunderlinetext(boolean underlinetext)

18 Paint 至此讀者應對 Paint 有基本的瞭解, 實際上在 Paint 中還有其他一些功能, 例如用 Alpha 來處理透明度用 Dither 來處理混色... 等等, 詳細內容可參考 Android SDK

19 Paint 接著就以一個簡單的範例來演練 Typeface 與 Paint 結合的做法, 程式如圖所示

20 Paint 首先需將 ttf 字型檔加入專案中的 fonts 資料夾 ( 於 asset 下新建 ), 如圖所示

21 Paint 程式碼 (TypefaceEX.java): private static class FontView extends View /* Paint.ANTI_ALIAS_FLAG 為消除鋸齒 */ private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); private Typeface typeface; public FontView(Context context) super(context); /* 自定義字體 */ typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/verdanaz.ttf"); // typeface = Typeface.createFromFile("/sdcard/verdanaz.ttf"); /* 設定字體大小 */ protected void ondraw(canvas canvas) canvas.drawcolor(color.white); /* 繪製預設字體 */ paint.settypeface(null); canvas.drawtext("default Font", 10, 100, paint); /* 繪製自定義字體 */ paint.settypeface(typeface); canvas.drawtext("custom Font", 10, 200, paint);

22 動畫效果

23 ViewFlipper ViewFlipper 可以包含多個 View) 且 View 之間的切換有動畫效果, 例如說漸變效果它也可以根據時間週期切換顯示項目, 像是一個幻燈片播放的效果, 範例如圖所示

24 ViewFlipper ViewAnimator 的作用是為 FrameLayout 裡面的 View 切換提供動畫效果 ViewAnimator 類別有幾個和動畫相關的方法 : setinanimation: 設定 View 進入螢幕時候使用的動畫 setoutanimation: 設定 View 退出螢幕時候使用的動畫 shownext: 呼叫此方法顯示 Layout 裡面的下一個 View showprevious: 呼叫此方法顯示 Layout 裡面的上一個 View

25 ViewFlipper 一般不直接使用 ViewAnimator 而是使用它的兩個子類別 ViewFlipper 和 ViewSwitcher ViewFlipper 可以用來指定 Layout 內多個 View 之間的切換效果, 可以一次指定也可以每次切換的時候都指定單獨的效果此類別額外提供了如下幾個方法 : isflipping: 用來判斷 View 切換是否正在進行 setfilpinterval: 設定 View 之間切換的時間間隔 startflipping: 使用上面設定的時間間隔來切換所有 View, 會以幻燈片方式進行 stopflipping: 停止 View 切換

26 ViewFlipper 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="previous" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="next" /> </LinearLayout> <ViewFlipper android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" /> </LinearLayout>

27 ViewFlipper 程式碼 -1(ViewFlipperEX.java): public class ViewFlipperEX extends Activity public final static int VIEW_TEXT = 0; public final static int VIEW_IMAGE = 1; private Button btnprevious; private Button btnnext; private ViewFlipper viewflipper; /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.main); initview(); /* 新增圖檔及文字於 viewflipper 此 View 中 */ viewflipper.addview( addtextbytext("android 1.6") ); viewflipper.addview( addimagebyid(r.drawable.play) ); viewflipper.addview( addtextbytext("android 2.0") ); viewflipper.addview( addimagebyid(r.drawable.normal) ); viewflipper.addview( addtextbytext("htc Hero") );

28 ViewFlipper 程式碼 -2(ViewFlipperEX.java): 程式碼 -3(ViewFlipperEX.java): private OnClickListener listener = new OnClickListener() public void onclick(view v) /* 判斷點擊到哪個按鈕 */ switch(v.getid()) /* 點擊到上一張按鈕就呼叫 showprevious 方法 */ case R.id.btnPrevious: viewflipper.showprevious(); break; ; /* 點擊到下一張按鈕就呼叫 shownext 方法 */ case R.id.btnNext: viewflipper.shownext(); break; public View addtextbytext(string text) /* 設定 TextView 屬性並回傳 */ TextView textview = new TextView(this); textview.settext(text); textview.setgravity(1); return textview; public View addimagebyid(int id) /* 設定 ImageView 屬性並回傳 */ ImageView imageview = new ImageView(this); imageview.setimageresource(id); return imageview; 完整程式碼請參考光碟中 ViewFlipperEX.java

29 ViewSwitcher ViewSwitcher 簡單來說就是 Switcher 在兩個 View 之間切換, 可以透過 ViewSwitcher 指定一個 ViewSwitcher.ViewFactory 來建立兩個 View 此類別具有兩個子類別 ImageSwitcher TextSwitcher 分別用於圖片和文字切換, 範例如下頁圖所示

30 程式範例圖 : ViewSwitcher

31 ViewSwitcher 一開始要在 res 資料夾底下新增兩個 XML 檔案, 接著將一開始新增的兩個 XML 檔, 作為兩個 View, 並使用 ViewSwitcher 的方法去做兩個 View 之間的切換當按下讀取更多的按鈕時,ViewSwitcher 就會切換到另外一個 View, 當背景作業處理完成後, 才會切換回原本的 View

32 ViewSwitcher 布局文件 (res/layout/button.xml): <?xml version="1.0" encoding="utf-8"?>  <Button xmlns:android=" android:text="load More Items" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textappearance="?android:attr/textappearancelarge" android:minheight="?android:attr/listpreferreditemheight" android:textcolor="#ffffff" android:clickable="true" android:onclick="onclick" />

33 ViewSwitcher 布局文件 (res/layout/progress.xml): <?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:minheight="?android:attr/listpreferreditemheight"> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" /> <TextView android:text="loading " android:textappearance="?android:attr/textappearancelarge" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_centervertical="true" android:gravity="center" android:padding="10dip" android:textcolor="#ffffff" /> </RelativeLayout>

34 ViewSwitcher 程式碼 -1(ViewSwitcherEX.java): public void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); switcher = new ViewSwitcher(this); button = (Button)View.inflate(this, R.layout.button, null); progress = View.inflate(this, R.layout.progress, null); /* 將 button 與 progressbar 加入 switcher 中 */ switcher.addview(button); switcher.addview(progress); /* 取得 ListView 並將 switcher 加入 */ getlistview().addfooterview(switcher); /* 設定 ListAdapter, 其中第二個參數可選擇樣式 */ setlistadapter(new ArrayAdapter(this, android.r.layout.simple_list_item_1, ITEMS));

ViewSwitcher 程式碼 -2(ViewSwitcherEX.java): private class getmoreitems extends AsyncTask @Override protected Object doinbackground(object.

35 ViewSwitcher 程式碼 -2(ViewSwitcherEX.java): private class getmoreitems extends protected Object doinbackground(object... params) /* 此處可撰寫新增項目之程式碼 */ try /* 執行緒會呼叫 sleep 方法 */ Thread.sleep(3000); catch (InterruptedException e) e.printstacktrace(); return null; 完整程式碼請參考光碟中 protected void onpostexecute(object result) switcher.showprevious();

36 OpenGL

37 前言在 Android 中支援高效能的 3D 圖形, 主要是透過 OpenGL/ES API 所謂的 ES API 就是 OpenGL 所規範給嵌入式設備使用的

38 GLSurfaceView GLSurfaceView 是一個新 API, 開始使用是從 Android1.5 版 GLSurfaceView 可以使得創造一個 OpenGL ES 應用程式更為容易, 通常用於遊戲或快速更新畫面的應用程式上

39 GLSurfaceView GLSurfaceView 具有下列優點 : 提供了 glue code 來連接 OpenGL ES 的視圖系統提供了 glue code 使得 OpenGL ES 與活動生命週期一起工作可以更簡單的選擇適合的 Frame buffer 像素格式建立與管理一個獨立的繪圖執行緒, 使得動畫效果更為流暢提供簡易的除錯工具

40 GLSurfaceView 下面將以一個簡易的範例使讀者更了解 GLSurfaceView 的使用方式, 範例執行結果如圖所示

41 GLSurfaceView 程式碼 -1(GLSurfaceViewEX.java): class ClearGLSurfaceView extends GLSurfaceView private ClearRenderer mrenderer; public ClearGLSurfaceView(Context context) super(context); mrenderer = new ClearRenderer(); setrenderer(mrenderer); public boolean ontouchevent(final MotionEvent event) /* 啟動執行緒, 並傳入座標設定顏色 */ queueevent(new Runnable() public void run() mrenderer.setcolor(event.getx() / getwidth(), event.gety() / getheight(), 1.0f); ); return true; 程式碼 -2(GLSurfaceViewEX.java): class ClearRenderer implements GLSurfaceView.Renderer private float mred; private float mgreen; private float mblue; public void onsurfacecreated(gl10 gl, EGLConfig config) public void onsurfacechanged(gl10 gl, int w, int h) /* 決定視窗上的繪圖區域 */ gl.glviewport(0, 0, w, h); public void ondrawframe(gl10 gl) /* 清除顏色 buffer */ gl.glclearcolor(mred, mgreen, mblue, 1.0f); gl.glclear(gl10.gl_color_buffer_bit GL10.GL_DEPTH_BUFFER_BIT); public void setcolor(float r, float g, float b) mred = r; mgreen = g; mblue = b;

42 SurfaceView 依照傳統的作法, 要快速更新畫面或做遊戲之類的應用, 通常會新增執行緒處理工作後, 使用 handler 傳送訊息給 View 顯示畫面或是在非使用者執行緒呼叫 View

43 SurfaceView SurfaceView 通常用於遊戲中或是需快速更新畫面之應用程式, 藉此來加快程式畫面運行速度 SurfaceView 也是 View 的一種, 但有獨立 buffer, 稱為 surface 由於此 buffer 不需透過 Android framework 做畫面更新, 可直接對應到畫面上的區塊, 提供更好的效能

44 SurfaceView 但實際上還是間接更新到畫面上, 但少了 Android framework 這一層, 而且可透過硬體加速 ( 加速的功能視平台而定 ), 範例程式如圖所示

45 SurfaceView 程式碼 -1(SurfaceViewEX.java): 程式碼 -2(SurfaceViewEX.java): SurfaceHolder holder; public AnimView(Context context) super(context); /* 取得 Holder */ holder = this.getholder(); //holder public void run() while( running ) try /* 鎖定畫布 */ canvas = holder.lockcanvas(null); /* 新增 Callback */ holder.addcallback(this); /* 移動畫布 */ canvas.translate(dx, dy); paint = new Paint(); public void surfacechanged(surfaceholder holder, int format, int width, int height) /* 啟動執行緒繪圖 */ new Thread(new AnimThread(holder)).start(); 完整程式碼請參考光碟中 SurfaceViewEX.java /* 繪製畫布 */ canvas.drawcolor(color.black); /* 於畫布繪製圖形 */ canvas.drawrect(new RectF( pleft,ptop,pright,pbottom ), paint); dx++; catch(exception ex) finally /* 解鎖畫布 */ holder.unlockcanvasandpost(canvas); /* 移動邊界限制 */ if(width <= dx) running = false;

46 SurfaceView 在這個範例當中, 需覆寫 surfacechanged 方法, 在此方法中啟動執行緒, 使用 translate 方法, 並設定條件, 達成方塊移動的動畫效果藉此範例可以了解到有關 SurfaceView 中的標準用法, 流程將於後面敘述說明

47 SurfaceView 流程當程式需要更好的效能時, 繼承 SurfaceView 也是一種方式透過 SurfaceView,canvas 不需透過 ondraw() 取得可以透過呼叫 SurfaceView.getHolder() 取得 surface holder, 而 SurfaceHolder.lockCanvas() 會傳回 SkCanvas Native code 可以在這個 SkCanvas 上作畫, 然後呼叫 SurfaceHolder.unlockCanvasAndPost(), 將內容更新到畫面上

48 SurfaceView 注意事項每次更新畫面前, 都要透過 SurfaceHolder.lockCanvas() 取得一個新的 SkCanvas, 在這個 canvas 上繪圖繪圖完成後都需呼叫 SurfaceHolder.unlockCanvasAndPost() 進行更新, 才能正確的更新畫面

49 Matrix Android 的 2D 繪圖功能其實是非常強大的, 尤其是 matrix 透過 matrix, 可以非常容易的控制 Android 繪圖座標的位移旋轉縮放等等功能範例程式執行結果如下頁圖所示

50 Matrix 點選縮小按鈕可將旁邊圖示縮小 ; 選放大按鈕則可將圖示放大, 其它還有像 setrotate setsincos setscale settranslate 等等方法可以應用

51 Matrix 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android=" <Button android:layout_width="90px" android:layout_height="60px" android:text=" 縮小 " android:textsize="18sp" /> <Button android:layout_width="90px" android:layout_height="60px" android:text=" 放大 " android:textsize="18sp" /> <ImageView android:layout_width="90px" android:layout_height="60px" /> </LinearLayout>

52 Matrix 程式碼 (MatrixEX.java): /* 取得 bitmap 寬高 */ int bmpwidth = bitmap.getwidth(); int bmpheight = bitmap.getheight(); /* 設定縮小比例 */ double scale = 0.7; scalewidth = (float)(scalewidth * scale); scaleheight = (float)(scaleheight * scale); Matrix matrix = new Matrix(); /* 縮放圖片 */ matrix.postscale(scalewidth, scaleheight); /* 重新縮放 Bitmap */ Bitmap resizebmp = Bitmap.createBitmap(bitmap, 0, 0, bmpwidth, bmpheight, matrix, true); if(id == 0) /* 移除 View */ linearlayout.removeview(imageview); else linearlayout.removeview((imageview)findviewbyid(id)); 完整程式碼請參考光碟中 MatrixEX.java id++; ImageView imageview = new ImageView(MatrixEX.this); imageview.setid(id); imageview.setimagebitmap(resizebmp); linearlayout.addview(imageview); setcontentview(linearlayout);

53 課後習題 1. Android 的 Canvas 元件是由哪四個部分所組成的 2. 如果 Canvas 的 restore 呼叫次數比 save 多, 會發生什麼樣的情況? 3. Paint 通常與兩哪種元件結合使用? 4. 修改 Paint 範例, 使得範例可顯示文字 5. ViewAnimator 包含哪兩個子類別? 6. 請在 ViewSwitcher 範例中加入點選 LoadMoreItems 後的項目 7. 解釋 OpenGL 與 OpenES 的差別 8. 一般開發遊戲通常使用本章中哪種元件? 是否可用其它元件開發?

主程式 : 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,