移動平臺UI交互設(shè)計與開發(fā)Android——TetrisUI交互項目開發(fā)

1、第第7 7章章 Android AndroidTetris UITetris UI交互項目開發(fā)交互項目開發(fā)移動平臺UI交互設(shè)計與開發(fā)知識技能目標(biāo)： 了解在Android系統(tǒng)中開發(fā)UI交互項目的流程 掌握Android應(yīng)用程序的創(chuàng)建 掌握UI界面布局文件的編寫 掌握外部資源文件的訪問方式 掌握事件處理的響應(yīng)機(jī)制目錄：7.1創(chuàng)建創(chuàng)建Tetris應(yīng)用程序應(yīng)用程序7.2開發(fā)輸出界面開發(fā)輸出界面7.3外部資源訪問外部資源訪問7.4顯示輸出界面顯示輸出界面7.5知識與技能梳理知識與技能梳理7.1 創(chuàng)建創(chuàng)建Tetris應(yīng)用程序應(yīng)用程序 本任務(wù)是創(chuàng)建Tetris應(yīng)用程序，項目采用Eclipse創(chuàng)建Androi

2、d的應(yīng)用程序。根據(jù)項目要求，首先要創(chuàng)建背景界面及對應(yīng)界面的Activity，Tetris的應(yīng)用程序效果如圖所示。 1、創(chuàng)建應(yīng)用程序、創(chuàng)建應(yīng)用程序 使用Eclipse創(chuàng)建Android應(yīng)用程序，其操作步驟如下： （1）啟動Eclipse， 單擊工具欄中的File，并選擇New選項，再選擇Android Application Project命令打開New Android Project（新建Android項目）對話框。（2）根據(jù)對話框要求進(jìn)行應(yīng)用程序名稱設(shè)置。Application Name是應(yīng)用程序名稱，該項目應(yīng)用程序名稱為Tetris；Project Name是項目的工程名，即Eclipse

3、中看到的名稱。Package Name是包名，是區(qū)分Android軟件的唯一標(biāo)記；Minimum Required SDK是應(yīng)用程序支持的Android的最低版本對應(yīng)的API級別，對于本項目使用默認(rèn)即可。Compile With是用于編譯應(yīng)用的平臺版本。Theme是應(yīng)用程序的Android UI的風(fēng)格，如圖所示。(3)單擊Next按鈕，設(shè)置應(yīng)用程序的存儲位置和項目配置，保持默認(rèn)設(shè)置，如左下圖所示。(4)單擊Next按鈕，設(shè)置應(yīng)用程序的圖標(biāo)，如右下所示。（5）單擊Next按鈕，創(chuàng)建一個空白的Activity。（6）單擊Next按鈕，配置Activity信息，輸入Activity的名字和對應(yīng)的布局

4、文件的名字，如下圖所示。（7）單擊Finish按鈕，成功建立第一個Activity文件后的項目目錄結(jié)構(gòu)。2、Eclipse的字符編碼格式的字符編碼格式UTF-8 默認(rèn)的字符編碼格式是GBK，由于GBK字符集支持不夠多，有時會出現(xiàn)亂碼。當(dāng)程序需要和網(wǎng)絡(luò)交互的時候，網(wǎng)絡(luò)上傳來的數(shù)據(jù)一般是UTF-8編碼。因此要求項目的字符編碼格式也是UTF-8，這樣有利于網(wǎng)絡(luò)交互和出現(xiàn)亂碼時進(jìn)行轉(zhuǎn)碼產(chǎn)生錯誤。Eclipse開發(fā)下字符集的設(shè)定如下：（1）單擊window選項，選擇preferences命令。2、Eclipse的字符編碼格式的字符編碼格式UTF-8單擊preferences對話框下的General命令，

5、選擇Workspase命令，置UTF-8。7.2 開發(fā)輸出界面開發(fā)輸出界面 本任務(wù)主要完成背景界面、主菜單界面和二級菜單界面的布局設(shè)計，其中背景界面使用一張背景圖片。主菜單界面是功能操作的界面，由按鈕以及背景組成。二級菜單是單擊按鈕后跳轉(zhuǎn)的界面，由按鈕和背景組成。 要實現(xiàn)布局應(yīng)考慮一下幾個問題： 背景圖如何引進(jìn)？ 按鈕應(yīng)如何布局？ 任務(wù)共有三個布局文件，背景界面布局是引用一張圖片資源進(jìn)行的布局設(shè)計。 主界面布局是按鈕的布局設(shè)計和圖片資源的引用。二級菜單界面與主菜單布局相似。 根據(jù)任務(wù)分析大致可分以下幾個步驟： 1、設(shè)置背景界面； 2、設(shè)置主菜單界面； 3、設(shè)置二級菜單界面； 步驟步驟1：設(shè)置背

6、景界面。：設(shè)置背景界面。 打開背景界面的打開背景界面的activity_splash.xml布局文件，選擇布局文件，選擇RelativeLayout元素進(jìn)行布局設(shè)元素進(jìn)行布局設(shè)計，將計，將drawable中的圖片資源使用中的圖片資源使用android:background=“drawable/*”方法引用。示方法引用。示例代碼如下：例代碼如下： android:layout_width=match_parent android:layout_height=match_parent android:background=drawable/tetris_splash android:padding

7、Bottom=dimen/activity_vertical_margin android:paddingLeft=dimen/activity_horizontal_margin android:paddingRight=dimen/activity_horizontal_margin android:paddingTop=dimen/activity_vertical_margin tools:context=.SplashActivity 步驟步驟2 2：設(shè)置主菜單界面。：設(shè)置主菜單界面。 首先打開目錄下的layout文件夾，右鍵單擊layout文件夾，選擇New新建命令，再選擇XML創(chuàng)

8、建命令，新建一個activity_menu.xml布局文件。主菜單界面的背景圖片同樣是引用drawable下的圖片資源；按鈕的布局設(shè)計，采用線性布局即選擇Linearlayout和Button元素進(jìn)行布局，并且使按鈕成垂直方式排列而且水平居中。 步驟步驟3 3：設(shè)置二級菜單界面。：設(shè)置二級菜單界面。 與步驟2相似，創(chuàng)建一個battle_activity.xml的布局文件，布局與主菜單的布局設(shè)計相似。7.3 外部資源訪問外部資源訪問 1、訪問音頻文件、訪問音頻文件 音頻的播放我們會用到MediaPlayer類。該類提供了播放，暫停，停止和重復(fù)播放等方法。該類位于Android.media包中，接

9、下來我們討論如何播放音頻文件。播放音頻的步驟如下： 步驟1：在項目的res/raw文件下面放置一個Android支持的媒體文件。 步驟2：創(chuàng)建一個MediaPlayer實例，可以使用MediaPlayer的靜態(tài)方法create來完成 步驟3：調(diào)用start()方法開始播放。程序示例代碼如下所示： /實例化MediaPlayer，從資源文件中創(chuàng)建媒體文件，第一參數(shù)是哪個頁面中使用這音頻文件，第二個是那個音頻文件。 /開始播放 mp.start(); this.finish(); 2、訪問第三方字體 除了文字顏色和大小設(shè)置以外，android也為文字提供了字體設(shè)置。這里特別解說是通過外部資源ass

10、ets，引用外部的字體文件(True Type Font)，再通過Typeface類createFromAsset方法。此處特別需要留意的是，字體文件必須是符合True Type Font格式。否則，即便程序編譯時不出錯，在運(yùn)行時也會發(fā)生無法更改字體的情況。操作步驟如下： （1）將新字體的TTF文件copy到assets目錄下面，例如我們將“*.ttf”復(fù)制過去。 （2）我們需要將按鈕設(shè)置為該字體，比較遺憾的是，不能直接在XML文件中進(jìn)行，需要編寫源代碼。 /前提布局文件中已經(jīng)定義過這個ID android:id=”+id/start” /從assert中獲取有資源，獲得app的assert，

11、采用getAserts()，通過給出在assert/下面的相對路徑。設(shè)置項目按鈕使用第三方字體。 Typeface tp = Typeface.createFromAsset(this.getAssets(),KBAStitchInTime.ttf); start.setTypeface(tp); 3、自制XML文件 常見的引用xml文件有許多種，以本項目為例，采用以下幾種。 （1）使用尺寸(dimen)資源 Android中支持的尺寸單位： Px：像素 屏幕上的真實像素表示； In：英尺 基于屏幕的物理尺寸； Mm：毫米 基于屏幕的物理尺寸； Pt：點表示磅，是一個標(biāo)準(zhǔn)的長度單位 英尺的1/

12、72； Dp：和密度無關(guān)的像素 相對于屏幕物理密度的抽象單位； Sp ：和精度無關(guān)的像素 和dp類似。 引用尺寸資源xml文件的步驟如下： 本任務(wù)使用在其他資源文件中引用尺寸資源文件，格式Android:對象=“【包名稱】資源類型 /資源名稱”。 步驟1：在項目的res/values/目錄下建一個dimens.xml尺寸資源文件。示例代碼如下： 根元素 16dp 16dp 步驟2：在布局文件中使用尺寸資源來設(shè)置寬和高。 android:layout_width=match_parent android:layout_height=match_parent android:background=

13、drawable/tetris_splash android:paddingBottom=dimen/activity_vertical_margin android:paddingLeft=dimen/activity_horizontal_margin android:paddingRight=dimen/activity_horizontal_margin android:paddingTop=dimen/activity_vertical_margin tools:context=.SplashActivity （2）使用drawables資源 我們經(jīng)常在Android的布局文件中定義

14、Drawable屬性。例如：可以在Android的布局文件中定義圖片按鈕的圖片及應(yīng)用程序的圖標(biāo)等。本例的按鈕背景就是采用xml文件定義drawable屬性，通過引用drawable 中的xml資源給按鈕設(shè)置圖片。其中，設(shè)置要求為按鈕初始狀態(tài)和單擊時圖片為menutile_pressed，在釋放按鈕時圖片為menutile。在drawable文件夾下創(chuàng)建一個xml文件并設(shè)置示例代碼如下：7.4 顯示輸出界面顯示輸出界面任務(wù)分析 完成了界面的布局和Android的資源訪問后，接下來的任務(wù)是實現(xiàn)響應(yīng)用戶的交互操作。 其中背景界面程序文件為splashActivity.java；MainMenuAct

15、ivity.java是主菜單程序文件； 單擊菜單按鈕，可以實現(xiàn)與二級界面之間的跳轉(zhuǎn)； BattleMenuActivity.java是二級菜單程序文件，單擊菜單按鈕，同時實現(xiàn)按鈕上的聲音播放。 要完成本次任務(wù)，需要思考如下幾個問題： 1、如何將程序的窗口設(shè)置為全屏？ 2、如何實現(xiàn)界面之間的跳轉(zhuǎn)？ 3、單擊按鈕，如何播放聲音文件？ 1、背景界面Activity文件SplashActivity （1）全屏顯示 在實際的應(yīng)用程序開發(fā)中，我們有時需要把 Activity 設(shè)置成全屏顯示，一般情況下，可以通過兩種方式來設(shè)置全屏顯示效果。 其一，通過在代碼中可以設(shè)置； 其二，通過manifest配置文件來

16、設(shè)置全屏。 本項目采用方法一進(jìn)行全屏設(shè)置：protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);/ 請求不顯示TitleBar,設(shè)置無標(biāo)題，隱藏標(biāo)題requestWindowFeature(Window.FEATURE_NO_TITLE);/ 請求設(shè)置全屏/ 給我這個頁面設(shè)置布局顯示內(nèi)容，指定的是剛才我們修改的那個布局文件Activity類的requestWindowFeature(int featureId)是控制Android應(yīng)用程序窗體顯示的重要方法，其功能是啟用窗體的拓

17、展性,參數(shù)featureId是在Window類中定義的常量，本例中的取值為 FEATURE_NO_TITLE，不使用標(biāo)題欄。requestWindowFeature方法的執(zhí)行必須放在setContentView()設(shè)置布局前面，不然會報錯。 Window類概括了Android窗口的基本屬性和基本功能。窗口的類型分為應(yīng)用程序窗口，子窗口和系統(tǒng)窗口3種。Activity的getWindow()方法返回Activity的當(dāng)前窗口對象Window。本例中對象使用如下的方法，該方法在setContentView()設(shè)置布局后面調(diào)用。 getWindow().setFlags(int flags ,int

18、 mask)：設(shè)置窗體標(biāo)記。 參數(shù)flags表示窗體的標(biāo)記，取值來自WindowManager.LayoutParams類中定義的常量； WindowManager.LayoutParams的作用是向WindowManager描述Window的管理策略，例如窗口類型設(shè)置等； 參數(shù)mask表示需要更改的窗口標(biāo)記位。 （2）添加線程休眠跳轉(zhuǎn) 使用Thread類實現(xiàn)多線程：定義一個線程類繼承Thread類,然后重寫public void run()方法。其中run()方法稱為線程體，包含了線程執(zhí)行的代碼。當(dāng)run()方法執(zhí)行完后，線程結(jié)束。要運(yùn)行線程，先用線程類定義一個對象，再調(diào)用對象的start(

19、)方法即可。當(dāng)線程在休眠過程中線程被中斷，則會產(chǎn)生InterruptedException異常，因此，代碼中需要捕獲InterruptedException異常，保證安全終止線程。本例的實例代碼如下：/ 使用線程進(jìn)行休眠500毫秒后進(jìn)行頁面跳轉(zhuǎn)Thread thread = new Thread() Overridepublic void run() try / 線程休眠500毫秒sleep(500);/ 頁面跳轉(zhuǎn)Intent intent = new Intent(SplashActivity.this,MainMenuActivity.class);startActivity(intent

20、); catch (InterruptedException e) e.printStackTrace();super.run();/ 只有調(diào)用start()的時候才真正啟動起來thread.start();（3）頁面完整程序代碼public class SplashActivity extends Activity Overrideprotected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);/ 請求不顯示TitleBarrequestWindowFeature(Window.FEA

21、TURE_NO_TITLE);/ 給我這個頁面設(shè)置布局顯示內(nèi)容，指定的是剛才我們修改的那個布局文件public void run() try / 線程休眠500毫秒sleep(1500);/ 頁面跳轉(zhuǎn)說明怎么跳轉(zhuǎn)Intent intent = new Intent(SplashActivity.this,MainMenuActivity.class);/ 才是真正的跳轉(zhuǎn)startActivity(intent);super.run();/ 只有調(diào)用start()的時候才真正啟動起來thread.start(); 2、主菜單界面的Activity文件MainMenuActivity （1）頁面跳

22、轉(zhuǎn) 一個Android應(yīng)用程序通常不會只有一個Activity，常見的設(shè)計樣式是每個獨立的畫面都是一個Activity。在這種情況下，每個Activity之間信息的傳遞就變得很重要。 步驟1：將Activity加入AndroidManifest.xml打開AndroidManifest.xml，文件中記載和這個應(yīng)用程序相關(guān)的重要信息，把所要運(yùn)行的Activity添加到里面，并給予名稱name，否則程序?qū)o法編譯運(yùn)行。本項目的示例代碼如下： 步驟2：在頁面中布局Button控件，并實現(xiàn)交互響應(yīng)。 在Android的布局文件中加入按鈕，聲明如下：注意!Button下的android:onClick

23、可以用來指定當(dāng)按下時會執(zhí)行的函數(shù)名稱，因此在Activity下編寫對應(yīng)的函數(shù)。Intent intent = new Intent(MainMenuActivity.this,BattleMenuActivity.class);startActivity(intent);此處先聲明一個Intent，并將它的類設(shè)定成BattleMenuActivity，當(dāng)用戶按下這個按鈕時，就會從主界面切換至二級菜單界面，且Android現(xiàn)在正在活動(active)的狀態(tài)也會變成BattleMenuActivity（即二級菜單頁面）。 (2)Log調(diào)試 使用android.util的log類可以實現(xiàn)Androi

24、d輸出log操作，本項目使用DEBUG類型調(diào)試信息。Android log提供了添加這一調(diào)試信息方法。Log.d(String tag,String msg);其中，Tag為調(diào)試信息標(biāo)簽名稱，msg為添加的調(diào)試信息，添加調(diào)試標(biāo)記的方法如圖所示： 根據(jù)首字母分別對應(yīng)VERBOSE， INFO， WARN和ERROR。 其中，Log.v 的調(diào)試顏色為黑色，任何消息都會輸出，這里的v代表verbose啰嗦的意思，平時使用就是Log.v(,)； Log.d的輸出顏色是藍(lán)色，僅輸出debug調(diào)試的意思，同時會輸出上層的信息，過濾起來可以通過DDMS的Logcat標(biāo)簽來選擇； Log.w的輸出顏色為橙色，

25、可以看作為warning警告，一般需要我們注意優(yōu)化Android代碼，同時選擇它后還會輸出Log.e的信息； Log.e的輸出顏色為紅色，可以想到error錯誤，這里僅顯示紅色的錯誤信息。 （3）聲音播放public class Util private static MediaPlayer mp = null;public static void clikeAudioNormal(Context context) / 首先需要一個MediaPlayer，所以這邊聲明了/ 獲得，需要判斷，沒有的話才去相應(yīng)的獲得if (mp = null) mp.start(); 單擊按鈕時,調(diào)用此類:public void onStart(View v) Util.clikeAudioNormal(this);Log.d(MyTAG, onStart); 3、二級菜單界面的Activity文件BattleMenuActivity二級菜單界面與主菜單類似，其完整代碼如下：public class BattleMenuActivity extends Activity Overrideprotected void onCreate(Bundl