1、第第2章章 Android界面界面設計設計基礎基礎網絡資源：http:/ QQ群：489059718(Android編程-清華版) 287966120（公共版）QQ號： 本章知識結構本章知識結構 本章示例本章示例基本界面控件使用基本界面控件使用布局管理器的嵌套使用布局管理器的嵌套使用 2.1 2.1 基礎基礎ViewView控件控件2.1.1 2.1.1 ViewView與與ViewGroupViewGroup類類1 View1 View類類View類是所有界面控件類的超類超類；代表屏幕上一塊空白的矩形區域空白的矩形區域，用于繪畫和事件處理；在View類中定義了控件的一些共同屬性共同屬性（例如

2、透明度、邊距、旋轉、縮放等）。 2.1 2.1 基礎基礎ViewView控件控件2 ViewGroup2 ViewGroup類類 ViewGroup類是View類的一個抽象子類，是一種特殊的View；是所有布局類和容器組件的超類，ViewGroup中可以包含View和ViewGroup對象；ViewGroup并沒有定義其包含的View布局，由其子類中定義它所包含的View的排列方式。 2.1 2.1基礎基礎ViewView控件控件3 View3 View和和ViewGroupViewGroup關系關系View與ViewGroup的關系類似于文件與文件夾文件與文件夾的關系；View與ViewGr

3、oup組合組合使用使用，形成一種界面布局的層次結構層次結構。ViewGroup控件控件的層次的層次結構結構 2.1 2.1基礎基礎ViewView控件控件視圖組視圖4 4 控制界面顯示的兩種方法控制界面顯示的兩種方法通過XMLXML布局文件布局文件設置控件屬性屬性進行控制。通過JavaJava代碼代碼調用控件類相應的方法方法進行控制。兩種方式都可以使界面達到預期的效果，實際上，XML文件的屬性與代碼中類的方法之間存在著一一對應的關系，可查看View類API介紹。 2.1 2.1基礎View控件 完全使用Java代碼來控制用戶界面不僅繁瑣而且界面和邏輯代碼相混合，不利于軟件設計人員的分工合作。完

4、全使用XML布局文件雖然方便、便捷，但靈活性不好，不能動態改變屬性值不能動態改變屬性值。混合使用混合使用這兩種方式來控制界面，一般來說，習慣將一些變化小的、比較固定的、初始化的屬性放在XML文件中管理，而對于那些需要動態變化的屬性則交給JavaJava代碼控制代碼控制。兩種方式的優缺點兩種方式的優缺點解決方案解決方案 2.1 2.1基礎View控件.2 2 文本顯示框（文本顯示框（TextViewTextView） TextView類直接繼承于View類，用于在界面上顯示文本信息，與Word中“字體”的功能類似，可以設置顯示文本的顏色、大小、字體、風格等信息。XML屬性屬性對應對

5、應的的Java方法方法說明說明android:textColorsetTextColor(int)設置文本的顏色android:textSizesetTextSize(int,float)設置文本的大小android:textStylesetTypeface(Typeface) 設置文本的風格android:typefacesetTypeface(Typeface) 設置文本的字體android:widthsetWidth(int)設置文本框的寬度（pixel為單位） TextView類的常見類的常見XML屬性、對應方法及說明屬性、對應方法及說明.2 2 文本顯示框（文本顯示框（

6、TextViewTextView） 除了上述幾乎所有文本顯示控件都擁有的屬性外，Android中的TextView還提供一些特殊功能，例如：自動識別文本中的各種鏈接、顯示部分HTML標簽定義的格式。識別自動鏈接的屬性為：android:autoLinkandroid:autoLink，該屬性的值為：unone：不匹配任何格式，這是默認值。uweb：只匹配網址，網址會以超鏈接的形式顯示。uemail：只匹配電子郵箱，電子郵箱會以超鏈接的形式顯示。uphone：只匹配電話號碼，電話號碼會以超鏈接的形式顯示。umap：只匹配地圖地址，地理位置會以超鏈接的形式顯示。uall：匹配以上所有。當匹配時，相

7、應部分會以超鏈接超鏈接形式顯示，單擊超鏈接，會自動運行相關程序自動運行相關程序。.2 2 文本顯示框（文本顯示框（TextViewTextView） 在在Android中經常需要設置尺寸，包括組件的寬度和高中經常需要設置尺寸，包括組件的寬度和高度、邊距、文本大小等，這些尺寸的單位各不相同，在度、邊距、文本大小等，這些尺寸的單位各不相同，在Android提供了多種尺寸單位，常見有：提供了多種尺寸單位，常見有：為了適應不同分辨率、不同的屏幕密度的為了適應不同分辨率、不同的屏幕密度的設備設備，推薦使用，推薦使用dip，文字，文字大小大小使用使用sp。 px (px (像素像素pixel

8、s)pixels) ：屏幕上真實像素表示，不同設備顯示效果相同，用于表示清晰度，像素越高越清晰。 dipdip或或dp (device independent pixels)dp (device independent pixels) ：設備獨立像素，是一個抽象單位，基于屏幕的物理密度，1dp在不同密度的屏幕上對應的px不同，從而整體效果不變，dp可消除不同類型屏幕對布局的影響。 sp (sp (Scale-independent PixelsScale-independent Pixelsbest for text size)best for text size) ：比例獨立像素，主要處理字

9、體的大小，可以根據屏幕自適應。.2 2 文本顯示框（文本顯示框（TextViewTextView）顯示部分HTML標簽定義的格式，需要Android中HtmlHtml類的輔助，該類提供了一個fromHtmlfromHtml（）（）方法，該方法可以識別字符串中的HTML標簽，返回值為SpannedSpanned類型，該類實現了CharSequenceCharSequence接口，可以作為參數傳入setTextsetText（）（）方法。TextView tv=(TextView)findViewById(R.id.myText); tv.setText(Html.fromHtml

10、(“歡迎參加手機軟件設計賽”); 首先為該文本框添加一個idid屬性，然后在onCreate()onCreate()方法中，通過findViewById(R.id.findViewById(R.id.* * * *) )，獲取該文本框，最后設置通過setText()方法來設置顯示的內容。 2.1. 2.1.3 3 文本編輯框（文本編輯框（EditTextEditText） 可以把TextView看成是一個文本編輯器的基類，但其本身不提供編輯功能，TextView有一個子類EditText，該控件允許用戶輸入，并且可設置輸入的類型。uandroid:hintandroid:hint：設置文本框內

11、容為空時，文本框內顯示的提示信息（灰色灰色），一旦輸入內容，該提示立即消失，當刪除文本框內容時，提示信息又會自動出現。uandroid:minLinesandroid:minLines：設置文本編輯框的最小行數。uandroid:inputTypeandroid:inputType：設置文本框的輸入類型，例如數字、電話號碼、密碼等。EditText常用屬性常用屬性 2.1. 2.1.4 4 按鈕（按鈕（ButtonButton）注意：注意：Button是是TextView的子類，是一個特殊的文本。的子類，是一個特殊的文本。按鈕是人機交互中一個關鍵的控件，主要用于發送請求、提交數據等，例如登錄、

12、注冊等。Android中Button是TextView的子類，也可以顯示文本信息，相對于普通的TextView而言，Button的特殊之處在于可以接收事件，并對相應事件進行處理。例如單擊事件、雙擊事件、觸摸事件等。具體的事件處理將在后面進行講解。 2.1. 2.1.5 5 應用舉例應用舉例 2.1. 2.1.5 5 應用舉例應用舉例 2.1. 2.1.5 5 應用舉例應用舉例layoutactivity_main.xml線性布局內組件的對齊方式：水平居中線性布局方向為垂直為TextView添加id屬性組件寬度為內容包裹組件高度為內容包裹設置文本大小為20像素設置寬度為填充父容器組件高度為內容包

13、裹設置文本編輯框的提示信息設置文本編輯框的輸入類型為密碼設置文本編輯框的提示信息設置按鈕的現實文本 2.1.5 應用舉例layoutactivity_main.xml設置按鈕的顯示文本設置文本字體大小為18像素設置文本顏色為藍色自動識別所有鏈接設置顯示的文本 2.1.5 應用舉例 在布局文件中多次用到string/*作為android：text的屬性值，表示引用R.java中string內部類的*成員變量所代表的資源。這些常量值是在String.xml文件中定義的。 2.1.5 應用舉例 本程序涉及html格式標簽的使用，需在java代碼中進行簡單設置，首先通過findViewById()方法

14、獲得組件，然后進行設置顯示文本。該過程調用html類的靜態方法fromHtml().根據id獲取文本組件 設置文本組件的顯示文本 2.1.5 應用舉例附：引入已有應用程序的基本步驟1. 下載第二章源代碼包，并將代碼解包本書全部代碼包下載前解包到workspace文件夾下 2.1.5 應用舉例附：引入已有應用程序的基本步驟2.選擇Eclips 的File/import.菜單，顯示引入資源及項目的對話框資源對話框 2.1.5 應用舉例附：引入已有應用程序的基本步驟引入項目對話框 2.1.5 應用舉例附：引入已有應用程序的基本步驟3. 選定項目后，返回圖引入資源對話框，再單擊Finish按鈕。在Pa

15、ckage Explorer下面顯示剛引入的項目名稱引入了新的項目：TextViewT 2.1.5 應用舉例附：引入已有應用程序的基本步驟4. 運行引入的項目：右擊TextViewTest項目，然后在彈出菜單中選擇Run as/ Android Application啟動項目運行的菜單選啟動項目運行的菜單選擇過程擇過程 2.1.5 應用舉例附：引入已有應用程序的基本步驟5. 查看所需看的代碼，這里主要是看布局文件。依次單擊 res/layout/ activity_main.xml查看布局文件的代碼查看布局文件的代碼 2.1.5 應用舉例附：引入已有應用程序的基本步驟可以查看該項目的清單文件(

16、AndroidManifest.xml)和主程序(MainActivity. java)等。 2.2 2.2 布局管理器布局管理器 android中布局管理器本身也是一個界面組件，所有的布局管理器都是ViewGroup類的子類，都可以當做容器來使用。 android 中用得最多的布局主要是：線性布局，表格布局，性對布局。2.2.1 2.2.1 線性布局線性布局線性布局由LinearLayout類來表示，將容器里的控件一個挨一個地排列起來。排列方向只有兩種：水平排水平排列列和垂直排列垂直排列。通過其android:orientationandroid:orientation屬性來設置。當容器中控

17、件的寬度總和寬度總和或高度總和高度總和超過父容器父容器的寬度或高度時，超過的部分如何顯示超過的部分如何顯示呢？當添加某一控件后，寬度超過父容器時，即該控件能該控件能顯示部分，但無法完整顯示顯示部分，但無法完整顯示時，該控件會被壓縮被壓縮，從而完全顯示，而再添加其他控件時，將不會顯示該控件再添加其他控件時，將不會顯示該控件。高度亦如此。如果需要完全顯示，怎么做？如果需要完全顯示，怎么做？2.2.2 2.2.2 表格布局表格布局 表格布局表格布局（TableLayoutTableLayout）指以）指以行和列行和列的形式對控件的的形式對控件的排列方式進行管理。排列方式進行管理。 在表格布局中，通過

18、添加在表格布局中，通過添加TableRowTableRow來添加來添加表格行表格行，TableRowTableRow本身也是容器本身也是容器，可以添加其他控件，可以添加其他控件，每添加一每添加一個控件，相對于該行添加了一列個控件，相對于該行添加了一列。 如果沒有添加如果沒有添加TableRowTableRow而是而是直接在表格中添加控件，則直接在表格中添加控件，則該控件獨自占一行該控件獨自占一行。 表格布局中表格布局中所有列的寬度都一致所有列的寬度都一致，列的寬度由該列中最列的寬度由該列中最寬的那個單元決定寬的那個單元決定，整個表格布局的寬度則取決于父容，整個表格布局的寬度則取決于父容器的寬度

19、。器的寬度。2.2.2 2.2.2 表格布局表格布局表格布局中的常見屬性： android:collapseColumnsandroid:collapseColumns：隱藏隱藏指定的列，其值為列所在的序號，從0開始，如果需要隱藏多列，可用逗號隔開這些序號。 android:shrinkColumnsandroid:shrinkColumns：收縮收縮指定的列以適合屏幕，使整行能夠完全顯示不會超出屏幕。 android:stretchColumnsandroid:stretchColumns：擴展擴展指定的列以填充空白部分。該屬性用于某一行的內容不足以填充整個屏幕。 android:layou

20、t_columnandroid:layout_column：指定控件在TableRow中列的序號列的序號。 android:layout_spanandroid:layout_span：指定控件所跨越的列數跨越的列數，即將多列合并為一列。2.2.2 2.2.2 表格布局表格布局利用表格布局設計以下界面。2.2.3 2.2.3 相對布局相對布局相對布局，顧名思義就是相對于某個控件的位置，相對布局，顧名思義就是相對于某個控件的位置，由由RelativeLayout類表示，這種布局的關鍵是找到一類表示，這種布局的關鍵是找到一個個合適的參照物合適的參照物，如果甲組件的位置需要根據乙組件，如果甲組件的位

21、置需要根據乙組件的位置來確定，那么要求先定義乙組件，再定義甲組的位置來確定，那么要求先定義乙組件，再定義甲組件。件。在相對布局中，每個控件的位置可通過它相對于某在相對布局中，每個控件的位置可通過它相對于某個控件的個控件的方位方位以及以及對齊方式對齊方式來確定。方位或對齊方式來確定。方位或對齊方式的值為參考控件的的值為參考控件的ID，由于父容器是確定的，只有一，由于父容器是確定的，只有一個，所以與父容器方位與對齊的關系取值為個，所以與父容器方位與對齊的關系取值為true或或false。.4 4 其他布局其他布局 層布局層布局也叫幀布局，由FrameLayout類表示。其每個控件占據

22、一層，后面添加的層會覆蓋前面的層，后面的控件會疊放在先前的控件之上。如果后面控件的大小大于前面的控件，那么前面的控件將會完全被覆蓋，不可見；如果后面控件無法完全覆蓋前面的控件，則未覆蓋部分，顯示先前的控件。 絕對布局，絕對布局，即指定每個控件在手機上的具體坐標，每個控件的位置和大小都是固定的。 2.2. 2.2.5 5 布局的綜合應用布局的綜合應用 2.2.5 2.2.5 布局的綜合應用布局的綜合應用界面要求：界面要求：該界面中包含一個文本編輯框（EditTextEditText）、28個按鈕（ButtonButton），文本編輯框的寬度為填充父容器填充父容器、高度為內容包裹內容包裹，行數最少

23、為最少為2 2行行。28個按鈕中26個按鈕的高度為50dp50dp，寬度為60dp60dp，“=”按鈕高度為100dp100dp，寬度為60dp60dp，“0”按鈕的高度為50dp50dp，寬度為120dp120dp。所有按鈕的文本大小為20sp20sp，對齊方式為居中居中。（特殊符號：、）(考察知識點：基本界面控件的使用基本界面控件的使用、布局的嵌套布局的嵌套) 2.2.5 2.2.5 布局的綜合應用布局的綜合應用 該界面整體采用垂直線性布局，先添加一個文本框，然后添加一個四行五列的表格布局，最后添加相對布局，擺放剩余按鈕。 由于所有按鈕都需要設置高度、寬度、對齊方式、字體大小、等屬性，在此

24、我們定義三種按鈕樣式。普通按鈕風格設置按鈕寬度設置按鈕高度設置按鈕上字體大小設置按鈕文本大小較寬按鈕風格設置按鈕寬度為120dp設置按鈕高度為50dp設置按鈕上的字體大小為20sp設置按鈕上文字水平居中設置按鈕上文字水平居中較高按鈕風格設置按鈕寬度為60dp設置按鈕高度為100dp設置按鈕上字體大小為20sp設置按鈕文本對齊方式 2.2.4 2.2.4 布局嵌套使用示例布局嵌套使用示例首先整體采用線性布局：1垂直線性布局6 高度最少兩行10 表格布局11相對布局12 2.2.4 2.2.4 布局嵌套使用示例布局嵌套使用示例表格布局中包含四行五列:表格布局寬度填充父容器高度包裹內容表格行(第一行

25、)寬度填充父容器內容水平居中對齊插入一列（第1列）引用樣式btn01按鈕文字為MC插入一列（第2列）插入一列（第3列）插入一列（第4列）插入一列（第5列） 2.2.5 2.2.5 布局的綜合應用布局的綜合應用表格行（第2行） 2.2.5 2.2.5 布局的綜合應用布局的綜合應用表格行（第3行） 2.2.5 2.2.5 布局的綜合應用布局的綜合應用表格行（第4行）添加Id屬性 2.2.5 2.2.5 布局的綜合應用布局的綜合應用相對布局需要一個參照物。本例中，按鈕“2”以“1”按鈕(id為“one”，見下面代碼第6行)為參考，與“1”頂端對齊（見代碼14行），在“1”的右邊（見代碼15行），詳見下面代碼。1水平居中對齊5 按鈕文字為粗體字11