第2章-Android-UI開發(fā)-教學(xué)設(shè)計(jì)

《移動(dòng)應(yīng)用開發(fā)技術(shù)》教學(xué)設(shè)計(jì)課程名稱：移動(dòng)應(yīng)用開發(fā)技術(shù)授課年級(jí)：授課學(xué)期：教師姓名：課題名稱第2章AndroidUI開發(fā)計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析Android程序開發(fā)最重要的一個(gè)環(huán)節(jié)就是界面處理，界面的美觀度直接影響用戶的第一印象，因此，開發(fā)一個(gè)整齊、美觀的界面是至關(guān)重要的，本章將針對(duì)Android中的UI開發(fā)進(jìn)行詳細(xì)地講解。教學(xué)目標(biāo)要求學(xué)生了解什么是UI，以及View和ViewGroup的繼承關(guān)系；要求學(xué)生掌握常見布局的使用，并能獨(dú)立設(shè)計(jì)美觀的界面布局；要求學(xué)生掌握樣式和主題的使用，能使用樣式或者主題優(yōu)化布局；要求學(xué)生掌握J(rèn)Unit、LogCat、Toast的使用，會(huì)對(duì)程序進(jìn)行測(cè)試；教學(xué)重點(diǎn)六種常見布局、樣式和主題、國(guó)際化、程序調(diào)試教學(xué)難點(diǎn)樣式和主題教學(xué)方式教師采用課堂講授為主，使用教學(xué)PPT輔助授課。教學(xué)過程第一學(xué)時(shí)（UI概述、布局的創(chuàng)建、相對(duì)布局、線性布局）一、情景導(dǎo)入1、AndroidUI介紹（PPT8-9）大家有沒有發(fā)現(xiàn)，Android應(yīng)用或者游戲界面做的都非常美觀，而且特別吸引人，讓大家很有興趣使用，例如QQ界面、微信界面、網(wǎng)易新聞等等。這個(gè)就是界面的UI效果。Android程序開發(fā)最重要的一個(gè)環(huán)節(jié)就是界面處理，界面的美觀度直接影響用戶的第一印象，因此，開發(fā)一個(gè)整齊、美觀的界面是至關(guān)重要的，本章將針對(duì)Android中的UI開發(fā)進(jìn)行詳細(xì)地講解。2、引出UI的相關(guān)知識(shí)在本章中，我們首先要了解UI這個(gè)概念，然后掌握常見的幾種布局方式，以及如何使用樣式和主題，最后會(huì)講解國(guó)際化、程序調(diào)試等知識(shí)。二、知識(shí)講解1、UI概述（PPT10）老師引導(dǎo)，在學(xué)習(xí)AndroidUI開發(fā)之前，首先要了解UI這個(gè)概念。所謂的UI（UserInterface），它是人與手機(jī)之間數(shù)據(jù)傳遞、交互信息的重要媒介和對(duì)話接口，是Android系統(tǒng)的重要組成部分。一個(gè)應(yīng)用程序，除了其功能強(qiáng)大之外，最重要的就是完美的UI設(shè)計(jì)。然后引出，一個(gè)Android應(yīng)用的界面是由View和ViewGroup對(duì)象構(gòu)建的。分析View與ViewGroup的繼承關(guān)系。2、布局的創(chuàng)建（PPT11）老師引導(dǎo)，通過前面的學(xué)習(xí)，現(xiàn)在大家了解了什么是UI，接下來我們就演示一下Android中如何創(chuàng)建布局。首先說明創(chuàng)建布局的步驟，然后進(jìn)行動(dòng)手實(shí)踐，在實(shí)踐的過程中針對(duì)每個(gè)步驟進(jìn)行解釋說明。3、相對(duì)布局（PPT12-14）老師通過問題引導(dǎo)，大家之前都做過預(yù)習(xí)，想一想Android中有多少種布局？學(xué)生回答之后老師進(jìn)行說明。Android中的布局分為六種，分別是相對(duì)布局、線性布局、表格布局、網(wǎng)格布局、幀布局、絕對(duì)布局，本節(jié)課先為大家講解相對(duì)布局。講解相對(duì)布局時(shí)，先要介紹一些常用屬性，然后給出相對(duì)布局的圖，進(jìn)而給出相對(duì)布局的代碼。4、線性布局（PPT15）老師引導(dǎo)，下面我們講解第2種布局——線性布局，線性布局是Android中較為常用的布局方式，它使用<LinearLayout>標(biāo)簽表示。介紹線性布局主要有兩種形式，一種是水平線性布局，一種是垂直線性布局。三、知識(shí)鞏固1、總結(jié)知識(shí)點(diǎn)，使用博學(xué)谷系統(tǒng)中的隨堂練習(xí)題鞏固本節(jié)課所學(xué)知識(shí)。2、使用博學(xué)谷系統(tǒng)中的測(cè)試題給學(xué)生布置作業(yè)。第二學(xué)時(shí)（表格布局、網(wǎng)格布局、幀布局、絕對(duì)布局、用戶注冊(cè)案例）一、知識(shí)回顧1、對(duì)上節(jié)課留的作業(yè)進(jìn)行答疑。2、回顧總結(jié)上節(jié)課的內(nèi)容，引出本節(jié)課主題上節(jié)課講解了UI概述、布局的創(chuàng)建、相對(duì)布局、線性布局等知識(shí)。接下來本節(jié)將針對(duì)表格布局、網(wǎng)格布局、幀布局、絕對(duì)布局、用戶注冊(cè)案例進(jìn)行講解。二、知識(shí)講解1、表格布局（PPT16）老師引導(dǎo)，表格布局相對(duì)于前兩種布局差異較大，表格布局是讓控件以表格的形式來排列組件的，只要將組件或信息放在單元格中，組件就可以整齊的排列。在TableLayout中，行數(shù)由TableRow對(duì)象控制的，即布局中有多少TableRow對(duì)象，就有多少行。每個(gè)TableRow中可以放置多個(gè)組件。給出表格布局的代碼，然后針對(duì)代碼進(jìn)行詳細(xì)的分析，并講解其中的重要知識(shí)。2、網(wǎng)格布局（PPT17-18）老師引導(dǎo)，網(wǎng)格布局與表格布局有些類似，網(wǎng)格布局用一組無限細(xì)的直線將繪圖區(qū)域分成行、列和單元，并指定控件的顯示區(qū)域和控件在該區(qū)域的顯示方式。它實(shí)現(xiàn)了控件的交錯(cuò)顯示，能夠避免因布局嵌套對(duì)設(shè)備性能的影響，更利于自由布局的開發(fā)。需要注意的是，網(wǎng)格布局是Android4.0新增的布局，如果在項(xiàng)目中使用，需要把SDK的最低版本指定為Android4.0（API14）以上。AndroidManifest.xml中的配置SDK最大兼容版本和最小兼容版本的代碼如下所示：<uses-sdkandroid:minSdkVersion="14"android:targetSdkVersion="17"/>3、幀布局（PPT19）老師提問引導(dǎo)，大家有沒有在手機(jī)上玩過刮刮卡，你們知道這種界面是怎么實(shí)現(xiàn)的嗎？同學(xué)猜測(cè)性的回答，老師說明，其實(shí)這種功能就是通過幀布局實(shí)現(xiàn)的，一個(gè)刮刮卡就是兩個(gè)重疊在一起的兩張圖片，通過手指的移動(dòng)將上一張圖片變成透明，然后顯示刮獎(jiǎng)的效果。幀布局是Android布局中最簡(jiǎn)單的一種，幀布局為每個(gè)加入其中的控件創(chuàng)建一個(gè)空白區(qū)域（稱為一幀，每個(gè)控件占據(jù)一幀）。采用幀布局方式設(shè)計(jì)界面時(shí)，只能在屏幕左上角顯示一個(gè)控件，如果添加多個(gè)控件，這些控件會(huì)按照順序在屏幕的左上角重疊顯示。4、絕對(duì)布局（PPT20-21）老師引導(dǎo)，接下來為大家介紹最后一種布局——絕對(duì)布局，絕對(duì)布局通過指定x、y坐標(biāo)來控制每一個(gè)組件的位置，放入該布局的組件需要通過android:layout_x和android:layout_y兩個(gè)屬性指定其準(zhǔn)確的坐標(biāo)值，并顯示在屏幕上。絕對(duì)布局通常用于游戲中，精確的控制人物的位置。需要注意的是，理論上絕對(duì)布局可以完成任何的布局設(shè)計(jì)，但是實(shí)際的工程應(yīng)用中不提倡使用這種布局。因?yàn)槭褂眠@種布局不但需要精確計(jì)算每個(gè)組件的大小，而且當(dāng)應(yīng)用程序運(yùn)行在不同屏幕的手機(jī)上產(chǎn)生的效果也不相同，因此，一般不推薦使用絕對(duì)布局。5、用戶注冊(cè)案例（PPT22）老師引導(dǎo)，現(xiàn)在大家將6種布局都學(xué)完了，接下來通過一個(gè)注冊(cè)用戶的綜合案例來鞏固大家對(duì)布局的掌握。這個(gè)頁面包含了相對(duì)布局（RelativeLayout）、線性布局（LinearLayout）、文本控件（TextView）、編輯框（EditText）、普通按鈕（Button）、單選按鈕（RadioButton）。三、知識(shí)鞏固1、總結(jié)知識(shí)點(diǎn)，使用博學(xué)谷系統(tǒng)中的隨堂練習(xí)題鞏固本節(jié)課所學(xué)知識(shí)。2、使用博學(xué)谷系統(tǒng)中的測(cè)試題給學(xué)生布置作業(yè)。第三學(xué)時(shí)（樣式和主題、國(guó)際化）一、知識(shí)回顧1、對(duì)上節(jié)課留的作業(yè)進(jìn)行答疑。2、回顧總結(jié)上節(jié)課的內(nèi)容，引出本節(jié)課主題上節(jié)課講解了Android中的常見布局，以及通過一個(gè)用戶注冊(cè)案例來對(duì)布局的知識(shí)進(jìn)行鞏固提升，接下來本節(jié)將針對(duì)樣式和主題、國(guó)際化進(jìn)行講解。二、知識(shí)講解1、樣式和主題（PPT23-25）老師引導(dǎo)，在Android中為了給用戶帶來更好的界面體驗(yàn)效果，提供了很多自帶的樣式和主題，這些樣式和主題可以定義布局在界面上顯示的風(fēng)格。樣式：Android中的樣式和CSS樣式作用相似，都是用于為界面元素定義顯示風(fēng)格，它是一個(gè)包含一個(gè)或者多個(gè)View控件屬性的集合。樣式只能作用于單個(gè)View，如EditText、TextView，使用樣式可以指定多個(gè)控件具有的重復(fù)屬性統(tǒng)一抽取出來進(jìn)行編寫，避免書寫大量重復(fù)代碼。主題：主題也是包含一個(gè)或者多個(gè)View控件屬性的集合，但它作用范圍不同。主題是通過AndroidManifest.xml中的<application>和<activity>節(jié)點(diǎn)用在整個(gè)應(yīng)用或者某個(gè)Activity，它的影響是全局性的。如果一個(gè)應(yīng)用中使用了主題，同時(shí)應(yīng)用下的View也使用了樣式，那么當(dāng)主題和樣式中的屬性發(fā)生沖突時(shí)，樣式的優(yōu)先級(jí)高于主題。介紹完樣式和主題概念，接著講解如何使用系統(tǒng)自帶的主題。在Android系統(tǒng)中，自帶的樣式和主題都可以直接拿來用，例如設(shè)置主題可以通過android:theme="android:style/…"在彈出的對(duì)話框中選擇。然后再講解，當(dāng)自定義的樣式或者主題不能滿足需求時(shí)，還可以自定義，并說明自定義樣式和主題的步驟。1）在res/values目錄下創(chuàng)建一個(gè)樣式文件style.xml，添加一個(gè)<resources>根節(jié)點(diǎn)。2）在<resources>節(jié)點(diǎn)中添加一個(gè)<style>節(jié)點(diǎn)，并在該節(jié)點(diǎn)中為樣式或主題定義一個(gè)唯一的名字，也可以選擇增加一個(gè)父類屬性，表示當(dāng)前風(fēng)格繼承父類的風(fēng)格。3）在<style>節(jié)點(diǎn)中聲明一個(gè)或多個(gè)<item>，每個(gè)<item>節(jié)點(diǎn)需要定義一個(gè)屬性名，并在元素內(nèi)部設(shè)置這個(gè)屬性的值。然后按照步驟進(jìn)行自定義樣式和主題，并展示效果。2、國(guó)際化（PPT26-27）老師引導(dǎo)，大家在使用手機(jī)時(shí)，有沒有注意過語言設(shè)置這個(gè)選項(xiàng)，當(dāng)我們選擇English時(shí)，手機(jī)中的所有內(nèi)容都變成英文顯示，當(dāng)選擇Chinese時(shí)，所有的內(nèi)容都是中文顯示。這個(gè)就是國(guó)際化。所謂的國(guó)際化，就是指軟件在開發(fā)時(shí)就應(yīng)該具備支持多種語言和地區(qū)的功能，也就是說開發(fā)的軟件能同時(shí)應(yīng)對(duì)不同國(guó)家和地區(qū)的用戶訪問，并針對(duì)不同國(guó)家和地區(qū)的用戶，提供相應(yīng)的、符合來訪者閱讀習(xí)慣的頁面或數(shù)據(jù)。由于國(guó)際化Internationalization這個(gè)單詞的首字母“I”和尾字母“N”之間有18個(gè)字符，因此國(guó)際化被簡(jiǎn)稱為I18N。由于Android采用XML文件來管理資源文件，因此Android程序國(guó)際化只需要為資源文件提供不同語言國(guó)家對(duì)應(yīng)的內(nèi)容即可。開發(fā)者只需要在res目錄下新建幾個(gè)values文件夾即可。需要注意的是，新建的values文件是有命名規(guī)則的，具體如下所示：values-語言代碼-r國(guó)家代碼需要注意的是，在匹配資源時(shí)先會(huì)找語言、地區(qū)完全匹配的。如果沒有地區(qū)匹配的，則查找語言匹配的。然后創(chuàng)建一個(gè)I18N的程序，創(chuàng)建兩個(gè)資源文件夾，分別命名為“values-zh-rCN”、“values-en-rUS”并將values文件夾下的strings.xml文件復(fù)制到這個(gè)文件夾下?！皏alues-zh-rCN”文件夾下的strings.xml文件如下所示：<?xmlversion="1.0"encoding="utf-8"?><resources><stringname="app_name">國(guó)際化</string><stringname="menu_settings">設(shè)置</string><stringname="hello_world">你好，世界!</string></resources>運(yùn)行程序，打開系統(tǒng)設(shè)置（setting菜單）找到【language&input】【language】【簡(jiǎn)體中文】，設(shè)置好語言之后，重新進(jìn)入程序能可以看到如下界面。三、知識(shí)鞏固1、總結(jié)知識(shí)點(diǎn)，使用博學(xué)谷系統(tǒng)中的隨堂練習(xí)題鞏固本節(jié)課所學(xué)知識(shí)。2、使用博學(xué)谷系統(tǒng)中的測(cè)試題給學(xué)生布置作業(yè)。第四學(xué)時(shí)（JUnit單元測(cè)試、LogCat、Toast）一、知識(shí)回顧1、對(duì)上節(jié)課留的作業(yè)進(jìn)行答疑。2、回顧總結(jié)上節(jié)課的內(nèi)容，引出本節(jié)課主題上節(jié)課講解了樣式和主題、國(guó)際化，接下來將針對(duì)程序中的調(diào)試進(jìn)行講解，其中包括JUnit、LogCat、Toast等知識(shí)。二、知識(shí)講解1、JUnit單元測(cè)試（PPT28）教師引導(dǎo)，市面上那些無論多好的應(yīng)用在開發(fā)時(shí)都免不了出現(xiàn)一些BUG，為了避免BUG的產(chǎn)生，需要不斷地進(jìn)行測(cè)試。在Android開發(fā)中使用的是JUnit單元測(cè)試。JUnit實(shí)際上是一個(gè)測(cè)試框架，它是AndroidSDK1.5加入的自動(dòng)化測(cè)試功能，我們可以在完成某一個(gè)功能之后就對(duì)該功能進(jìn)行單獨(dú)測(cè)試，而不需要把應(yīng)用程序安裝到手機(jī)或模擬器中再對(duì)各項(xiàng)功能進(jìn)行測(cè)試，這樣會(huì)大大提高程序開發(fā)的正確性與開發(fā)效率。JUnit的使用分為三個(gè)步驟，具體如下：1、配置JUnit環(huán)境2、創(chuàng)建測(cè)試類3、運(yùn)行測(cè)試程序當(dāng)運(yùn)行結(jié)果與期望結(jié)果匹配時(shí)，JUnit窗口會(huì)顯示綠條2、LogCat（PPT29-30）教師引導(dǎo)，咱們?cè)谶M(jìn)行Java程序開發(fā)時(shí)，使用最多的就是System.out.println(“”);語句，該語句用于將信息輸出到Console控制臺(tái)。在Android中，應(yīng)用是運(yùn)行在一個(gè)單獨(dú)的設(shè)備中，Android應(yīng)用的調(diào)試信息會(huì)輸出到這個(gè)設(shè)備單獨(dú)的日志緩沖區(qū)中。要想從設(shè)備日志緩沖區(qū)取出這些日志信息，就需要使用LogCat。Log所輸出的日志內(nèi)容分五個(gè)級(jí)別，由低到高分別是Verbose、Debug、Info、Warming、Error，這些級(jí)別分別對(duì)應(yīng)Log類中的Log.v()、Log.d()、Log.i()、Log.w()、Log.e()五個(gè)靜態(tài)方法，使用不同的方法輸出信息的顏色各不相同。Verbose（V）：顯示全部信息，黑色Debug（D）：顯示調(diào)試信息，藍(lán)色I(xiàn)nfo（