手機(jī)平臺(tái)應(yīng)用開(kāi)發(fā)課件：第二章 UI介紹

1、教師：教師： 金星金星辦公室：逸夫樓辦公室：逸夫樓C326C326電話(huà)：電話(huà)18971142771 QQQQ：6514926465149264 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)3 國(guó)際化重點(diǎn)了解掌握2樣式和主題布局的類(lèi)型 程序調(diào)試1 在A(yíng)ndroid應(yīng)用中，UIUI（User InterfaceUser Interface）界面是人與手機(jī)之間數(shù)據(jù)傳遞、交互信息的重要媒介和對(duì)話(huà)接口接口。 Android程序開(kāi)發(fā)最重要的一個(gè)環(huán)節(jié)就是界面處理，界面的美觀(guān)度直接影響用戶(hù)的第一印象，因此，開(kāi)發(fā)一個(gè)整齊、美觀(guān)的界面是至關(guān)重要的。2.1 UI2.1 UI概述概述2.1 UI2.1 UI概述概述 A

2、ndroid應(yīng)用的界面是由ViewView和ViewGroupViewGroup對(duì)象構(gòu)建而成的。View類(lèi)是Android系統(tǒng)平臺(tái)上用戶(hù)界面表示的基本單元，View的一些子類(lèi)被統(tǒng)稱(chēng)為Widgets（工具），它們提供了諸如文本輸入框和按鈕之類(lèi)的UI對(duì)象的完整實(shí)現(xiàn)。 ViewGroup是View的一個(gè)擴(kuò)展，它可以容納多個(gè)View，通過(guò)ViewGroup類(lèi)可以創(chuàng)建有聯(lián)系的子View組成的復(fù)合控件。2.2 2.2 布局文件的創(chuàng)建布局文件的創(chuàng)建 在A(yíng)ndroid應(yīng)用程序中，界面界面是通過(guò)布局文件布局文件設(shè)定的。 布局文件采用XMLXML格式，每個(gè)應(yīng)用程序默認(rèn)包含一個(gè)主界面布局文件，該文件位于項(xiàng)目的“re

3、s/layoutres/layout”目錄中。 Android中中有幾種布局？有幾種布局？2.3 2.3 布局的類(lèi)型布局的類(lèi)型 Android中的布局如下：LinearLayoutRelativeLayoutTableLayoutGridLayoutFrameLayoutAbsoluteLayout2.3 2.3 布局的類(lèi)型布局的類(lèi)型控件盒子模型控件盒子模型一般控件屬性一般控件屬性 margin android:layout_marginTop android:layout_marginBottom android:layout_marginLeft android:layout_margin

4、Right 如果四面是相同的 android:layout_margin padding android:paddingTop android:paddingBottom android:paddingLeft android:paddingRight android:background #aa0000 drawable/some 如果四面是相同的 android:padding增強(qiáng)編程環(huán)境的自動(dòng)提示功能增強(qiáng)編程環(huán)境的自動(dòng)提示功能 XML 粘貼到里面：=:.abcdefghijklmnopqrstuvwxyz(, Alt+/：自動(dòng)補(bǔ)全快捷鍵 java 粘貼到里面：.abcdefghijklm

5、nopqrstuvwxyz(, Ctrl+1：快速修復(fù)AndroidAndroid有沒(méi)有有沒(méi)有Border ?Border ? 沒(méi)有提供。 使用background android:background 只要是drawable均可 drawable包括圖片和長(zhǎng)方形等矢量圖案。 單位單位 px: 1個(gè)像素，不建議使用這個(gè)單位 PPI (DPI): Pixels (Dots) per inch，屏幕上每英寸有多少個(gè)像素。 dp: Density-independent pixels，dp*ppi/160 = px sp: Scale-independent pixels，安卓的字體單位不同屏幕分辨

6、率不同屏幕分辨率 ldpi 低分辨率 120dpi 1dp=0.75px mdpi 標(biāo)準(zhǔn)分辨率 160dpi 1dp=1px hdpi 高分辨率 240dpi 1dp=1.5px xhdpi 超高分辨率 320dpi 1dp=2px真實(shí)手機(jī)的真實(shí)手機(jī)的DPIDPI計(jì)算計(jì)算屏幕分辨率屏幕分辨率測(cè)試測(cè)試shapeshape ImageView、ImageButton等控件 android:src 設(shè)置View的drawable(如圖片，也可以是顏色，但是需要指定View的大小) TextView等控件 android:background Shape的子節(jié)點(diǎn) gradient - 對(duì)應(yīng)顏色漸變。

7、solid - 填充。 stroke - 描邊。 corners - 圓角。 padding - 定義內(nèi)容離邊界的距離。圓角按鈕背景圓角按鈕背景shapeshape代碼節(jié)選代碼節(jié)選 其他控件屬性其他控件屬性 android:gravity top, bottom, left, right, center, center_vertical, center_horizontal android:ignoreGravity android:layout_gravity 區(qū)別 前兩者是對(duì)內(nèi)容的限定 后者是相對(duì)父元素限定 android:scaleType 設(shè)置圖片適配控件尺寸的不同方式。 2.3.1

8、相對(duì)布局（相對(duì)布局（RelativeLayout）。 在Eclipse中開(kāi)發(fā)Android程序時(shí)，默認(rèn)默認(rèn)采用的就是相對(duì)相對(duì)布局布局。 相對(duì)布局通常有兩種形式，一種是相對(duì)于容器相對(duì)于容器而言的，一種是相相對(duì)于控件對(duì)于控件而言的。2.3 2.3 布局的類(lèi)型布局的類(lèi)型第一類(lèi)第一類(lèi): :屬性值為屬性值為truetrue或或false false android:layout_centerHorizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相對(duì)于父元素完全居中 android:layout_a

9、lignWithParentIfMissing 如果對(duì)應(yīng)的兄弟元素找不到的話(huà)就以父元素做參照物 android:layout_alignParentBottom 貼緊父元素的下邊緣 android:layout_alignParentLeft 貼緊父元素的左邊緣 android:layout_alignParentRight 貼緊父元素的右邊緣 android:layout_alignParentTop 貼緊父元素的上邊緣 第二類(lèi)：屬性值必須為第二類(lèi)：屬性值必須為idid的引用名的引用名“id/id-nameid/id-name” android:layout_below 在某元素的下方 an

10、droid:layout_above 在某元素的上方 android:layout_toLeftOf 在某元素的左邊 android:layout_toRightOf 在某元素的右邊 android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對(duì)齊 android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對(duì)齊 android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對(duì)齊 android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對(duì)齊2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.2 線(xiàn)性布局（線(xiàn)

11、性布局（LinearLayout） 線(xiàn)性布局是Android中較為常用的布局方式，它使用標(biāo)簽表示。 線(xiàn)性布局有兩種方式指定控件位置，一種是水平方向水平方向，一種是豎直豎直方向方向。 屬性屬性 android:orientation 布局的方向 layout_weight 相對(duì)大小 取值：一個(gè)非負(fù)整數(shù)值 線(xiàn)性布局會(huì)根據(jù)該控件layout_weight值與其所處布局中所有控件layout_weight值之和的比值為該控件分配占用的區(qū)域。 注意： 如果layout_weight指為0，控件會(huì)按原大小顯示，不會(huì)被拉伸。2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.3 表格布局（表格布局（TableLa

12、yout） 表格布局就是讓控件以表格以表格的形式來(lái)排列組件的，只要將組件或信息放在單元格中，控件就可以整齊整齊的排列排列。 在TableLayout中，行行數(shù)由TableRow對(duì)象控制的，即布局中有多少TableRow對(duì)象，就有多少行。2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.4 網(wǎng)格布局（網(wǎng)格布局（GridLayout） 網(wǎng)格布局是Android4.0Android4.0新增的布局，它實(shí)現(xiàn)了控件的交錯(cuò)顯示交錯(cuò)顯示，能夠避免因布局嵌套對(duì)設(shè)備性能的影響，更利于自由布局的開(kāi)發(fā)。 網(wǎng)格布局用一組無(wú)限細(xì)無(wú)限細(xì)的直線(xiàn)直線(xiàn)將繪圖區(qū)域分成行行、列列和單元單元，并指定控件的顯示區(qū)域和控件在該區(qū)域的顯示方式

13、。2.3 2.3 布局的類(lèi)型布局的類(lèi)型 腳下留心：腳下留心： 由于GridLayout是Android4.0之后有的新功能，如果要在項(xiàng)目中使用這種布局，需要把SDK的最低版本指定為Android4.0（API14）以上。 AndroidManifest.xml中，配置SDK兼容的最低版本和最高版本示例代碼如下： uses-sdk android:targetSdkVersion=17 /2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.5 幀幀布局布局 （FrameLayout) 幀布局為每個(gè)加入其中的控件創(chuàng)建一個(gè)空白區(qū)域空白區(qū)域（稱(chēng)為一幀，每個(gè)控件占據(jù)一幀）。 采用幀布局設(shè)計(jì)界面時(shí)，只能在屏幕左

14、上角顯示左上角顯示一個(gè)控件，如果添加多個(gè)控件，這些控件會(huì)按照順序在屏幕的左上角重疊顯示重疊顯示，且會(huì)透明透明顯示之前控件的文本文本。 2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.6 絕對(duì)布局絕對(duì)布局 AbsoluteLayout 絕對(duì)布局需要通過(guò)指定x、y坐標(biāo)坐標(biāo)來(lái)控制每一個(gè)控件的位置，放入該布局的組件需要通過(guò)android:layout_x和android:layout_y兩個(gè)屬性指定其準(zhǔn)確的坐標(biāo)值，并顯示在屏幕上。2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.6 絕對(duì)絕對(duì)布局布局 （AbsoluteLayout）絕對(duì)布局多用于游戲開(kāi)發(fā)中，由于多分辨率兼容麻煩，絕對(duì)布局在A(yíng)ndroid1.

15、5后被Google棄用，因此應(yīng)用開(kāi)發(fā)一般情況下不推薦使用絕對(duì)布局。2.3 2.3 布局的類(lèi)型布局的類(lèi)型 2.3.7 案例案例用戶(hù)注冊(cè)用戶(hù)注冊(cè) 接下來(lái)通過(guò)一個(gè)用戶(hù)注冊(cè)的案例演示相對(duì)布局和線(xiàn)性布局的使用。2.4 2.4 樣式和主題樣式和主題 2.4.1 樣式和主題的使用樣式和主題的使用 Android系統(tǒng)中，包含了很多定義好的樣式和主題，這些樣式和主題用于定義定義布局顯示在界面上的風(fēng)格風(fēng)格。 下圖就是一幅設(shè)置了窗口化主題的應(yīng)用。2.4 2.4 樣式和主題樣式和主題 2.4.2 案例案例自定義樣式和主題自定義樣式和主題 盡管Android系統(tǒng)提供了很多樣式和主題，但有時(shí)這些效果并不能滿(mǎn)足實(shí)際需求，此

16、時(shí)還可以自定義自定義樣式樣式或者主題主題。 自定義樣式和主題的步驟如下： 1）在res/values 目錄創(chuàng)建樣式文件style.xml，添加 根節(jié)點(diǎn)。 2）在節(jié)點(diǎn)中添加一個(gè)節(jié)點(diǎn)，并在該節(jié)點(diǎn)中為樣式或 主題定義一個(gè)名稱(chēng)。 3）在節(jié)點(diǎn)中聲明一個(gè)或多個(gè)，每個(gè)節(jié)點(diǎn)需要定義一 個(gè)屬性名，并在元素內(nèi)部設(shè)置這個(gè)屬性的值。 2.4 2.4 樣式和主題樣式和主題 2.4.2 案例案例自定義樣式和主題自定義樣式和主題 接下來(lái)通過(guò)一個(gè)具體的案例來(lái)演示如何自定義樣式和主題。2.5 2.5 國(guó)際化國(guó)際化 2.5 國(guó)際化國(guó)際化 國(guó)際化國(guó)際化是指軟件開(kāi)發(fā)時(shí)，應(yīng)該具備支持多種語(yǔ)言和地區(qū)的功能，為不同國(guó)家和地區(qū)的用戶(hù)，提供符

17、合來(lái)訪(fǎng)者閱讀習(xí)慣的頁(yè)面或數(shù)據(jù)。 由于國(guó)際化InternationalizationInternationalization這個(gè)單詞的首字母“I”和尾字母“N”之間有18個(gè)字符，因此國(guó)際化被簡(jiǎn)稱(chēng)為I18NI18N。 為了提供不同語(yǔ)言版本，開(kāi)發(fā)者只需要在res目錄下新建對(duì)應(yīng)的values文件夾。2.5 2.5 國(guó)際化國(guó)際化 2.5 國(guó)際化國(guó)際化 接下來(lái)通過(guò)一個(gè)案例I18N來(lái)展示圖片、文字的國(guó)際化。I18N實(shí)現(xiàn)了在系統(tǒng)設(shè)置頁(yè)面切換不同國(guó)家語(yǔ)言，在程序界面展示不同國(guó)家的國(guó)花以及文字。2.6 2.6 程序調(diào)試程序調(diào)試 2.6.1 Junit單元測(cè)試單元測(cè)試 JUnit是一個(gè)測(cè)試框架，它是Android

18、SDK1.5加入的自動(dòng)化測(cè)試自動(dòng)化測(cè)試功能。在完成某個(gè)功能后對(duì)該功能進(jìn)行單獨(dú)測(cè)試，而不需要把程序安裝到手機(jī)或模擬器中進(jìn)行測(cè)試，這樣會(huì)大大提高程序開(kāi)發(fā)的準(zhǔn)確性。 JUnit單元測(cè)試既可以嵌入到項(xiàng)目中，也可以作為一個(gè)單獨(dú)的項(xiàng)目，針對(duì)某個(gè)項(xiàng)目進(jìn)行測(cè)試。具體步驟如下： 1）配置JUnit環(huán)境 2）創(chuàng)建測(cè)試類(lèi) 3）運(yùn)行測(cè)試2.6 2.6 程序調(diào)試程序調(diào)試 2.6.2 LogCat使用使用 LogCat用于輸出Android程序中的日志信息。它支持五種輸出方式，級(jí)別由低到高分別是：Verbose（V）： 顯示全部信息，黑色Debug（D）： 顯示調(diào)試信息，藍(lán)色I(xiàn)nfo（I）： 顯示一般信息，綠色Warming（W）：顯示警告信息，橙色Error（E）： 顯示錯(cuò)誤信息，紅色2.6 2.6 程序調(diào)試程序調(diào)試 2.6.2 LogCat使用使用 由于LogCat中輸出的信息多而繁雜，找到所需要