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

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

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

3、s/layoutres/layout”目錄中。 Android中中有幾種布局？有幾種布局？2.3 2.3 布局的類型布局的類型 Android中的布局如下：LinearLayoutRelativeLayoutTableLayoutGridLayoutFrameLayoutAbsoluteLayout2.3 2.3 布局的類型布局的類型控件盒子模型控件盒子模型一般控件屬性一般控件屬性 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增強編程環(huán)境的自動提示功能增強編程環(huán)境的自動提示功能 XML 粘貼到里面：=:.abcdefghijklmnopqrstuvwxyz(, Alt+/：自動補全快捷鍵 java 粘貼到里面：.abcdefghijklm

5、nopqrstuvwxyz(, Ctrl+1：快速修復(fù)AndroidAndroid有沒有有沒有Border ?Border ? 沒有提供。 使用background android:background 只要是drawable均可 drawable包括圖片和長方形等矢量圖案。 單位單位 px: 1個像素，不建議使用這個單位 PPI (DPI): Pixels (Dots) per inch，屏幕上每英寸有多少個像素。 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真實手機的真實手機的DPIDPI計算計算屏幕分辨率屏幕分辨率測試測試shapeshape ImageView、ImageButton等控件 android:src 設(shè)置View的drawable(如圖片，也可以是顏色，但是需要指定View的大小) TextView等控件 android:background Shape的子節(jié)點 gradient - 對應(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ū)別 前兩者是對內(nèi)容的限定 后者是相對父元素限定 android:scaleType 設(shè)置圖片適配控件尺寸的不同方式。 2.3.1

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

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

10、droid:layout_above 在某元素的上方 android:layout_toLeftOf 在某元素的左邊 android:layout_toRightOf 在某元素的右邊 android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊 android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊 android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊 android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊2.3 2.3 布局的類型布局的類型 2.3.2 線性布局（線

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

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

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

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

15、5后被Google棄用，因此應(yīng)用開發(fā)一般情況下不推薦使用絕對布局。2.3 2.3 布局的類型布局的類型 2.3.7 案例案例用戶注冊用戶注冊 接下來通過一個用戶注冊的案例演示相對布局和線性布局的使用。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)提供了很多樣式和主題，但有時這些效果并不能滿足實際需求，此

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

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

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