Android用戶界面課件

1、第5章 Android用戶界面5.1 用戶界面基礎(chǔ)設(shè)計手機(jī)用戶界面應(yīng)解決的問題需要界面設(shè)計與程序邏輯完全分離，這樣不僅有利于他們的并行開發(fā)，而且在后期修改界面時，也不用再次修改程序的邏輯代碼根據(jù)不同型號手機(jī)的屏幕解析度、尺寸和縱橫比各不相同，自動調(diào)整界面上部分控件的位置和尺寸，避免因為屏幕信息的變化而出現(xiàn)顯示錯誤能夠合理利用較小的屏幕顯示空間，構(gòu)造出符合人機(jī)交互規(guī)律的用戶界面，避免出現(xiàn)凌亂、擁擠的用戶界面Android已經(jīng)解決了前兩個問題，使用XML文件描述用戶界面；資源資源文件獨(dú)立保存在資源文件夾中；對界用戶面描述非常靈活，允許不明確定義界面元素的位置和尺寸，僅聲明界面元素的相對位置和粗略尺

2、寸5.1 用戶界面基礎(chǔ)Android用戶界面框架Android用戶界面框架（Android UI Framework）采用MVC（Model-View-Controller）模型提供了處理用戶輸入的控制器（Controller）顯示用戶界面和圖像的視圖（View），以及保存數(shù)據(jù)和代碼的模型（Model）5.1 用戶界面基礎(chǔ)Android用戶界面框架MVC模型MVC模型中的控制器能夠接受并響應(yīng)程序的外部動作，如按鍵動作或觸摸屏動作等控制器使用隊列處理外部動作，每個外部動作作為一個對立的事件被加入隊列中，然后Android用戶界面框架按照“先進(jìn)先出”的規(guī)則從隊列中獲取事件，并將這個事件分配給所對應(yīng)

3、的事件處理函數(shù)5.1 用戶界面基礎(chǔ)Android用戶界面框架Android用戶界面框架（Android UI Framework）采用視圖樹（View Tree）模型Android用戶界面框架中的界面元素以一種樹型結(jié)構(gòu)組織在一起，稱為視圖樹Android系統(tǒng)會依據(jù)視圖樹的結(jié)構(gòu)從上至下繪制每一個界面元素。每個元素負(fù)責(zé)對自身的繪制，如果元素包含子元素，該元素會通知其下所有子元素進(jìn)行繪制5.1 用戶界面基礎(chǔ)Android用戶界面框架視圖樹視圖樹由View和ViewGroup構(gòu)成View是界面的最基本的可視單元，存儲了屏幕上特定矩形區(qū)域內(nèi)所顯示內(nèi)容的數(shù)據(jù)結(jié)構(gòu)，并能夠?qū)崿F(xiàn)所占據(jù)區(qū)域的界面繪制、焦點(diǎn)變化、

4、用戶輸入和界面事件處理等功能View也是一個重要的基類，所有在界面上的可見元素都是View的子類ViewGroup是一種能夠承載含多個View的顯示單元ViewGroup功能：一個是承載界面布局，另一個是承載具有原子特性的重構(gòu)模塊5.1 用戶界面基礎(chǔ)Android用戶界面框架單線程用戶界面在單線程用戶界面中，控制器從隊列中獲取事件和視圖在屏幕上繪制用戶界面，使用的都是同一個線程特點(diǎn)：處理函數(shù)具有順序性，能夠降低應(yīng)用程序的復(fù)雜程度，同時也能減低開發(fā)的難度缺點(diǎn)：如果事件處理函數(shù)過于復(fù)雜，可能會導(dǎo)致用戶界面失去響應(yīng)5.2 界面控件Android系統(tǒng)的界面控件分為定制控件和系統(tǒng)控件定制控件是用戶獨(dú)立開

5、發(fā)的控件，或通過繼承并修改系統(tǒng)控件后所產(chǎn)生的新控件。能夠為用戶提供特殊的功能或與眾不同的顯示需求方式系統(tǒng)控件是Android系統(tǒng)提供給用戶已經(jīng)封裝的界面控件。提供在應(yīng)用程序開發(fā)過程中常見功能控件。系統(tǒng)控件更有利于幫助用戶進(jìn)行快速開發(fā)，同時能夠使Android系統(tǒng)中應(yīng)用程序的界面保持一致性常見的系統(tǒng)控件包括TextView、EditText、Button、ImageButton、Checkbox、RadioButton、Spinner、ListView和TabHost5.2 界面控件5.2.1 TextView和EditTextTextView是一種用于顯示字符串的控件EditText則是用來輸

6、入和編輯字符串的控件EditText是一個具有編輯功能的TextView5.2 界面控件5.2.1 TextView和EditText建立一個“TextViewDemo”的程序，包含TextView和EditText兩個控件上方“用戶名”部分使用的是TextView，下方的文字輸入框使用的是EditText5.2 界面控件5.2.1 TextView和EditTextTextViewDemo在XML文件中的代碼5.2 界面控件5.2.1 TextView和EditText第1行android:id屬性聲明了TextView的ID，這個ID主要用于在代碼中引用這個TextView對象“+id/T

7、extView01”表示所設(shè)置的ID值表示后面的字符串是ID資源加號（+）表示需要建立新資源名稱，并添加到R.java文件中斜杠后面的字符串（TextView01）表示新資源的名稱如果資源不是新添加的，或?qū)儆贏ndroid框架的ID資源，則不需要使用加號（+），但必須添加Android包的命名空間，例如android:id=android:id/empty5.2 界面控件5.2.1 TextView和EditText第2行的android:layout_width屬性用來設(shè)置TextView的寬度，wrap_content表示TextView的寬度只要能夠包含所顯示的字符串即可第3行的andr

8、oid:layout_height屬性用來設(shè)置TextView的高度第4行表示TextView所顯示的字符串，在后面將通過代碼更改TextView的顯示內(nèi)容第7行中“fill_content”表示EditText的寬度將等于父控件的寬度5.2 界面控件5.2.1 TextView和EditTextTextViewDemo.java文件中代碼的修改第1行代碼的findViewById()函數(shù)能夠通過ID引用界面上的任何控件，只要該控件在XML文件中定義過ID即可第3行代碼的setText()函數(shù)用來設(shè)置TextView所顯示的內(nèi)容TextView textView = (TextView)fin

9、dViewById(R.id.TextView01);EditText editText = (EditText)findViewById(R.id.EditText01);textView.setText(用戶名：);editText.setText();5.2 界面控件5.2.2 Button和ImageButtonButton是一種按鈕控件，用戶能夠在該控件上點(diǎn)擊，并后引發(fā)相應(yīng)的事件處理函數(shù)ImageButton用以實(shí)現(xiàn)能夠顯示圖像功能的控件按鈕5.2 界面控件5.2.2 Button和ImageButton建立一個“ButtonDemo”的程序，包含Button和ImageButton

10、兩個按鈕，上方是“Button按鈕”，下方是一個ImageButton控件5.2 界面控件5.2.2 Button和ImageButtonButtonDemo在XML文件中的代碼定義Button控件的高度、寬度和內(nèi)容定義ImageButton控件的高度和寬度，但是沒定義顯示的圖像，在后面的代碼中進(jìn)行定義5.2 界面控件5.2.2 Button和ImageButton引入資源將download.png文件拷貝到/res/drawable文件夾下在/res目錄上選擇Refresh新添加的文件將顯示在/res/drawable文件夾下R.java文件內(nèi)容也得到了更新否則提示無法找到資源的錯誤5.2

11、界面控件5.2.2 Button和ImageButton更改Button和ImageButton內(nèi)容引入android.widget.Button和android.widget.ImageButton第1行代碼用于引用在XML文件中定義的Button控件第2行代碼用于引用在XML文件中定義的ImageButton控件第3行代碼將Button的顯示內(nèi)容更改為“Button按鈕”第4行代碼利用setImageResource()函數(shù)，將新加入的png文件R.drawable.download傳遞給ImageButtonButton button = (Button)findViewById(R.i

12、d.Button01);ImageButton imageButton = (ImageButton)findViewById(R.id.ImageButton01);button.setText(Button按鈕);imageButton.setImageResource(R.drawable.download);5.2 界面控件5.2.2 Button和ImageButton按鈕響應(yīng)點(diǎn)擊事件：添加點(diǎn)擊事件的監(jiān)聽器第2行代碼中button對象通過調(diào)用setOnClickListener()函數(shù)，注冊一個點(diǎn)擊（Click）事件的監(jiān)聽器View.OnClickListener()第3行代碼是點(diǎn)擊

13、事件的回調(diào)函數(shù)第4行代碼將TextView的顯示內(nèi)容更改為“Button按鈕”final TextView textView = (TextView)findViewById(R.id.TextView01);button.setOnClickListener(new View.OnClickListener() public void onClick(View view) textView.setText(Button按鈕););imageButton.setOnClickListener(new View.OnClickListener() public void onClick(View

14、 view) textView.setText(ImageButton按鈕););5.2 界面控件5.2.2 Button和ImageButtonView.OnClickListener()View.OnClickListener()是View定義的點(diǎn)擊事件的監(jiān)聽器接口，并在接口中僅定義了onClick()函數(shù)當(dāng)Button從Android界面框架中接收到事件后，首先檢查這個事件是否是點(diǎn)擊事件，如果是點(diǎn)擊事件，同時Button又注冊了監(jiān)聽器，則會調(diào)用該監(jiān)聽器中的onClick()函數(shù)每個View僅可以注冊一個點(diǎn)擊事件的監(jiān)聽器，如果使用setOnClickListener()函數(shù)注冊第二個點(diǎn)擊事

15、件的監(jiān)聽器，之前注冊的監(jiān)聽器將被自動注銷多個按鈕注冊到同一個點(diǎn)擊事件的監(jiān)聽器上，代碼如下5.2 界面控件5.2.2 Button和ImageButton第1行至第12行代碼定義了一個名為buttonListener的點(diǎn)擊事件監(jiān)聽器第13行代碼將該監(jiān)聽器注冊到Button上第14行代碼將該監(jiān)聽器注冊到ImageButton上Button.OnClickListener buttonListener = new Button.OnClickListener()Overridepublic void onClick(View v) switch(v.getId()case R.id.Button01

16、:textView.setText(Button按鈕);return;case R.id.ImageButton01:textView.setText(ImageButton按鈕);return; ; button.setOnClickListener(buttonListener); imageButton.setOnClickListener(buttonListener);5.2 界面控件5.2.3 CheckBox和RadioButtonCheckBox是一個同時可以選擇多個選項的控件RadioButton則是僅可以選擇一個選項的控件RadioGroup是RadioButton的承載體

17、，程序運(yùn)行時不可見，應(yīng)用程序中可能包含一個或多個RadioGroup一個RadioGroup包含多個RadioButton，在每個RadioGroup中，用戶僅能夠選擇其中一個RadioButton5.2 界面控件5.2.3 CheckBox和RadioButton建立一個“CheckboxRadiobuttonDemo”程序，包含五個控件，從上至下分別是TextView01、CheckBox01、 CheckBox02、RadioButton01、RadioButton02當(dāng)選擇RadioButton01， RadioButton02則無法選擇5.2 界面控件5.2.3 CheckBox和R

18、adioButtonCheckboxRadiobuttonDemo在XML文件中的代碼 5.2 界面控件5.2.3 CheckBox和RadioButton第15行標(biāo)簽聲明了一個RadioGroup在第18行和第23行分別聲明了兩個RadioButton，這兩個RadioButton是RadioGroup的子元素 5.2 界面控件5.2.3 CheckBox和RadioButton引用CheckBox和RadioButton的方法參考下面的代碼CheckBox設(shè)置點(diǎn)擊事件監(jiān)聽器的簡要代碼與Button設(shè)置點(diǎn)擊事件監(jiān)聽器中介紹的方法相似，唯一不同在于將Button.OnClickListener

19、換成了CheckBox.OnClickListenerCheckBox checkBox1= (CheckBox)findViewById(R.id.CheckBox01);RadioButton radioButton1 =(RadioButton)findViewById(R.id.RadioButton01);CheckBox.OnClickListener checkboxListener = new CheckBox.OnClickListener()Overridepublic void onClick(View v) /過程代碼;checkBox1.setOnClickListe

20、ner(checkboxListener);checkBox2.setOnClickListener(checkboxListener);5.2 界面控件5.2.3 CheckBox和RadioButtonRadioButton設(shè)置點(diǎn)擊事件監(jiān)聽器的方法RadioButton.OnClickListener radioButtonListener = new RadioButton.OnClickListener()Overridepublic void onClick(View v) /過程代碼; radioButton1.setOnClickListener(radioButtonListe

21、ner);radioButton2.setOnClickListener(radioButtonListener);5.2 界面控件5.2.4 SpinnerSpinner是一種能夠從多個選項中選一選項的控件，類似于桌面程序的組合框（ComboBox），但沒有組合框的下拉菜單，而是使用浮動菜單為用戶提供選擇建立一個程序“SpinnerDemo”包含3個子項Spinner控件5.2 界面控件5.2.4 SpinnerSpinnerDemo在XML文件中的代碼第5行使用標(biāo)簽聲明了一個Spinner控件第6行代碼中指定了該控件的寬度為300dip5.2 界面控件5.2.4 Spinner在Spinn

22、erDemo.java文件中，定義一個ArrayAdapter適配器，在ArrayAdapter中添加需要在Spinner中可以選擇的內(nèi)容，需要在代碼中引入android.widget.ArrayAdapter和android.widget.SpinnerSpinner spinner = (Spinner) findViewById(R.id.Spinner01); List list = new ArrayList();list .add(Spinner子項1);list .add(Spinner子項2);list .add(Spinner子項3);ArrayAdapter adapter

23、 = new ArrayAdapter(this, android.R.layout.simple_spinner_item, list );adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);spinner.setAdapter(adapter);5.2 界面控件5.2.4 Spinner第2行代碼建立了一個字符串?dāng)?shù)組列表（ArrayList），這種數(shù)組列表可以根據(jù)需要進(jìn)行增減表示數(shù)組列表中保存的是字符串類型的數(shù)據(jù)在代碼的第3、4、5行中，使用add()函數(shù)分別向數(shù)組列表中添加3個字符串

24、第6行代碼建立了一個ArrayAdapter的數(shù)組適配器，數(shù)組適配器能夠?qū)⒔缑婵丶偷讓訑?shù)據(jù)綁定在一起第7行代碼設(shè)定了Spinner的浮動菜單的顯示方式，其中，android.R.layout.simple_spinner_dropdown_item是Android系統(tǒng)內(nèi)置的一種浮動菜單第8行代碼實(shí)現(xiàn)綁定過程，所有ArrayList中的數(shù)據(jù)，將顯示在Spinner的浮動菜單中5.2 界面控件5.2.4 Spinner設(shè)置android.R.layout.simple_spinner_item浮動菜單，顯示結(jié)果如圖適配器綁定界面控件和底層數(shù)據(jù)，如果底層數(shù)據(jù)更改了，用戶界面也相應(yīng)修改顯示內(nèi)容，就不

25、需要應(yīng)用程序再監(jiān)視，從而極大的簡化的代碼的復(fù)雜性5.2 界面控件5.2.5 ListViewListView是一種用于垂直顯示的列表控件，如果顯示內(nèi)容過多，則會出現(xiàn)垂直滾動條ListView能夠通過適配器將數(shù)據(jù)和自身綁定，在有限的屏幕上提供大量內(nèi)容供用戶選擇,所以是經(jīng)常使用的用戶界面控件ListView支持點(diǎn)擊事件處理，用戶可以用少量的代碼實(shí)現(xiàn)復(fù)雜的選擇功能5.2 界面控件5.2.5 ListView建立一個“ListViewDemo”程序，包含四個控件，從上至下分別為TextView01、ListView01、 ListView02和 ListView035.2 界面控件5.2.5 List

26、ViewListViewDemo在XML文件中的代碼5.2 界面控件5.2.5 ListView在ListViewDemo.java文件中，首先需要為ListView創(chuàng)建適配器，并添加ListView中所顯示的內(nèi)容第2行代碼通過ID引用了XML文件中聲明的ListView第7行代碼聲明了適配器ArrayAdapter，第三個參數(shù)list說明適配器的數(shù)據(jù)源為數(shù)組列表第8行代碼將ListView和適配器綁定final TextView textView = (TextView)findViewById(R.id.TextView01);ListView listView = (ListView)f

27、indViewById(R.id.ListView01);List list = new ArrayList();list.add(ListView子項1);list.add(ListView子項2);list.add(ListView子項3);ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, list );listView.setAdapter(adapter);5.2 界面控件5.2.5 ListView下面的代碼聲明了ListView子項的點(diǎn)擊事件監(jiān)聽器，用以確定用戶在Lis

28、tView中，選擇的是哪一個子項AdapterView.OnItemClickListener listViewListener = newAdapterView.OnItemClickListener()Overridepublic void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) String msg =”;textView.setText(msg);listView.setOnItemClickListener(listViewListener);5.2 界面控件5.2.5 ListView第1行的Ada

29、pterView.OnItemClickListener是ListView子項的點(diǎn)擊事件監(jiān)聽器，同樣是一個接口，需要實(shí)現(xiàn)onItemClick()函數(shù)。在ListView子項被選擇后，onItemClick()函數(shù)將被調(diào)用第3行的onItemClick()函數(shù)中一共有四個參數(shù)，參數(shù)0表示適配器控件，就是ListView；參數(shù)1表示適配器內(nèi)部的控件，是ListView中的子項；參數(shù)2表示適配器內(nèi)部的控件，也就是子項的位置；參數(shù)3表示子項的行號第4行和第5行代碼用于顯示信息，選擇子項確定后，在TextView中顯示子項父控件的信息、子控件信息、位置信息和ID信息第7行代碼是ListView指定剛剛

30、聲明的監(jiān)聽器5.2 界面控件5.2.6 TabHostTab標(biāo)簽頁是界面設(shè)計時經(jīng)常使用的界面控件，可以實(shí)現(xiàn)多個分頁之間的快速切換，每個分頁可以顯示不同的內(nèi)容下圖是Android系統(tǒng)內(nèi)置的Tab標(biāo)簽頁，點(diǎn)擊“呼出/接聽鍵”后出現(xiàn)，用于電話呼出和查看撥號記錄、聯(lián)系人5.2 界面控件5.2.6 TabHostTab標(biāo)簽頁的使用首先要設(shè)計所有的分頁的界面布局在分頁設(shè)計完成后，使用代碼建立Tab標(biāo)簽頁，并給每個分頁添加標(biāo)識和標(biāo)題最后確定每個分頁所顯示的界面布局每個分頁建立一個XML文件，用以編輯和保存分頁的界面布局，使用的方法與設(shè)計普通用戶界面沒有什么區(qū)別5.2 界面控件5.2.6 TabHost建立一

31、個“TabDemo”程序，包含三個XML文件，分別為tab1.xml、tab2.xml和tab3.xml，這3個文件分別使用線性布局、相對布局和絕對布局示例中的main.xml的代碼，并將布局的ID分別定義為layout01、layout02和layout035.2 界面控件5.2.6 TabHosttab1.xml文件代碼tab2.xml文件代碼tab3.xml文件代碼LinearLayout android:id = +id/layout01 AbsoluteLayout android:id=+id/layout02 RelativeLayout android:id=+id/layou

32、t03 5.2 界面控件5.2.6 TabHost在TabDemo.java文件中鍵入下面的代碼，創(chuàng)建Tab標(biāo)簽頁，并建立子頁與界面布局直接的關(guān)聯(lián)關(guān)系package edu.hrbeu.TabDemo; import android.app.TabActivity;import android.os.Bundle;import android.widget.TabHost;import android.view.LayoutInflater; public class TabDemo extends TabActivity Override5.2 界面控件5.2.6 TabHost publi

33、c void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); TabHost tabHost = getTabHost();LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView(),true);LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView(),true);LayoutInflater.from(this

34、).inflate(R.layout.tab3, tabHost.getTabContentView(),true);tabHost.addTab(tabHost.newTabSpec(TAB1).setIndicator(線性布局).setContent(R.id.layout01);tabHost.addTab(tabHost.newTabSpec(TAB2).setIndicator(絕對布局).setContent(R.id.layout02);tabHost.addTab(tabHost.newTabSpec(TAB3).setIndicator(相對布局).setContent(R

35、.id.layout03); 5.2 界面控件5.2.6 TabHost第8行代碼的聲明TabDemo類繼承與TabActivity，與以往繼承Activity不同，TabActivity支持內(nèi)嵌多個Activity或View第12行代碼通過getTabHost()函數(shù)獲得了Tab標(biāo)簽頁的容器，用以承載可以點(diǎn)擊的Tab標(biāo)簽和分頁的界面布局。第13行代碼通過LayoutInflater將tab1.xml文件中的布局轉(zhuǎn)換為Tab標(biāo)簽頁可以使用的View對象第16行代碼使用addTab()函數(shù)添加了第1個分頁，tabHost.newTabSpec(TAB1)表明在第12行代碼中建立的tabHost上

36、，添加一個標(biāo)識為TAB1的Tab分頁第17行代碼使用setIndicator()函數(shù)設(shè)定分頁顯示的標(biāo)題，使用setContent()函數(shù)設(shè)定分頁所關(guān)聯(lián)的界面布局5.2 界面控件5.2.6 TabHostTabDemo示例的運(yùn)行結(jié)果如圖5.2 界面控件5.2.6 TabHost在使用Tab標(biāo)簽頁時，可以將不同分頁的界面布局保存在不同的XML文件中，也可以將所有分頁的布局保存在同一個XML文件中第一種方法有利于在Eclipse開發(fā)環(huán)境中進(jìn)行可視化設(shè)計，并且不同分頁的界面布局在不同的文件中更加易于管理第二種方法則可以產(chǎn)生較少的XML文件，同時編碼時的代碼也會更加簡潔5.3 界面布局界面布局界面布局（

37、Layout）是用戶界面結(jié)構(gòu)的描述，定義了界面中所有的元素、結(jié)構(gòu)和相互關(guān)系聲明Android程序的界面布局有兩種方法使用XML文件描述界面布局在程序運(yùn)行時動態(tài)添加或修改界面布局用戶既可以獨(dú)立使用任何一種聲明界面布局的方式，也可以同時使用兩種方式5.3 界面布局界面布局使用XML文件聲明界面布局的特點(diǎn)將程序的表現(xiàn)層和控制層分離在后期修改用戶界面時，無需更改程序的源代碼用戶還能夠通過可視化工具直接看到所設(shè)計的用戶界面，有利于加快界面設(shè)計的過程，并且為界面設(shè)計與開發(fā)帶來極大的便利性 5.3 界面布局5.3.1 線性布局線性布局（LinearLayout）是一種重要的界面布局中，也是經(jīng)常使用到的一種界

38、面布局在線性布局中，所有的子元素都按照垂直或水平的順序在界面上排列如果垂直排列，則每行僅包含一個界面元素如果水平排列，則每列僅包含一個界面元素5.3 界面布局5.3.1 線性布局創(chuàng)建Android工程工程名稱是LinearLayout包名稱是edu.hrbeu.LinearLayoutActivity名稱為LinearLayout為了能夠完整體驗創(chuàng)建線性布局的過程，首先刪除Eclipse自動建立的/res/layout/main.xml文件，然后建立用于顯示垂直排列線性布局的XML文件5.3 界面布局5.3.1 線性布局右擊/res/layout文件夾選擇New File打開新文件建立向?qū)募?/p>

39、名為main_vertical.xml保存位置為LinearLayout/res/layout5.3 界面布局5.3.1 線性布局雙擊新建立的/res/layout/main_vertical.xml文件，Eclipse將打開界面布局的可視化編輯器5.3 界面布局5.3.1 線性布局可視化編輯器頂部是資源配置清單，可以根據(jù)手機(jī)的配置不同選擇不同的資源，主要用來實(shí)現(xiàn)應(yīng)用軟件的本地化下部左側(cè)是界面布局和界面控件，用戶可以將需要的布局和控件拖拽到右面的可視化界面中，并修改布局和控件的屬性右側(cè)是可視化的用戶界面，能夠?qū)崟r的呈現(xiàn)用戶界面，但對無法正確顯示中文。左下角的“Layout”和“main_ver

40、tical.xml”能夠在可視化編輯器和XML文件編輯器之間切換5.3 界面布局5.3.1 線性布局在Eclipse右邊的Outline中，雙擊LinearLayout，打開線性布局的屬性編輯器線性布局的排列方法主要由Orientation屬性進(jìn)行控制，vertical表示垂直排列，horizontal表示水平排列選擇Orientation的值為vertical，表示該線性布局為垂直排列5.3 界面布局5.3.1 線性布局缺省情況下，Layout height的值為wrap_content，表示線性布局高度等于所有子控件的高度總和，也就是線性布局的高度會剛好將所有子控件包含其中將Layout

41、width屬性的值改為fill_parent，表示線性布局寬度等于父控件的寬度，就是將線性布局在橫向上占據(jù)父控件的所有空間5.3 界面布局5.3.1 線性布局打開XML文件編輯器，main_vertical.xml文件的代碼如下第2行代碼是聲明XML文件的根元素為線性布局第4、5、6行代碼是在屬性編輯器中修改過的寬度、高度和排列方式的屬性用戶在可視化編輯器和屬性編輯器中的任何修改，都會同步的反映在XML文件中；反之，也是如此5.3 界面布局5.3.1 線性布局將四個界面控件TextView、EditText、Button、Button先后拖拽到可視化編輯器中所有控件都自動獲取控件名稱，并把該名

42、稱顯示在控件上，如TextView01、EditText01、Button01和Button025.3 界面布局5.3.1 線性布局修改界面控件的屬性所有界面控件都有一個共同的屬性IDID是一個字符串，編譯時被轉(zhuǎn)換為整數(shù)，可以用來在代碼中引用界面元素，一般僅在代碼中需要動態(tài)修改的界面元素時才為界面元素設(shè)置ID，反之則不需要設(shè)置ID編號類型屬性值1TextViewId+id/labelText用戶名：2EditTextId+id/entryLayout widthfill_parentTextnull3ButtonId+id/okText確認(rèn)4ButtonId+id/cancelText取消5.

43、3 界面布局5.3.1 線性布局從可視化編輯器中發(fā)現(xiàn)，界面控件的中文字符都顯示為“”，因為可視化編輯器還不能很好的支持中文字符打開XML文件編輯器查看main_vertical.xml文件代碼，發(fā)現(xiàn)在屬性編輯器內(nèi)填入的文字已經(jīng)正常寫入到XML文件中，例如第11、20、25行代碼 5.3 界面布局5.3.1 線性布局 5.3 界面布局5.3.1 線性布局將LinearLayout.java文件中的setContentView(R.layout.main)，更改為setContentView(R.layout.main_vertical)。運(yùn)行后的結(jié)果如圖5.3 界面布局5.3.1 線性布局建立橫

44、向線性布局與縱向線性布局相似，只需注意以下幾點(diǎn)建立main_ horizontal.xml文件線性布局的Orientation屬性的值設(shè)置為horizontal將EditText的Layout width 屬性的值設(shè)置為 wrap_content將LinearLayout.java文件中的 setContentView(R.layout.main_vertical) 修改為setContentView(R.layout.main_ horizontal) 5.3 界面布局5.3.2 框架布局框架布局（FrameLayout）是最簡單的界面布局，是用來存放一個元素的空白空間，且子元素的位置是不能

45、夠指定的，只能夠放置在空白空間的左上角如果有多個子元素，后放置的子元素將遮擋先放置的子元素使用Android SDK中提供的層級觀察器（Hierarchy Viewer）進(jìn)一步分析界面布局層級觀察器能夠?qū)τ脩艚缑孢M(jìn)行分析和調(diào)試，并以圖形化的方式展示樹形結(jié)構(gòu)的界面布局還提供了一個精確的像素級觀察器（Pixel Perfect View），以柵格的方式詳細(xì)觀察放大后的界面界面5.3 界面布局5.3.2 框架布局在層級觀察器中獲得示例界面布局的樹形結(jié)構(gòu)圖5.3 界面布局5.3.2 框架布局示意圖5.3 界面布局5.3.2 框架布局結(jié)合界面布局的樹形結(jié)構(gòu)圖和示意圖，分析不同界面布局和界面控件的區(qū)域邊界

46、用戶界面的根節(jié)點(diǎn)（#043599ee0）是線性布局，其邊界是整個界面，也就是示意圖的最外層的實(shí)心線根節(jié)點(diǎn)右側(cè)的子節(jié)點(diǎn)（#043599a730）是框架布局，僅有一個節(jié)點(diǎn)元素（#04359ad18），這個子元素是TextView控件，用來顯示Android應(yīng)用程序名稱，其邊界是示意圖中的區(qū)域1。因此框架布局元素#043599a730的邊界是同區(qū)域1的高度相同，寬帶充滿整個根節(jié)點(diǎn)的區(qū)域。這兩個界面元素是系統(tǒng)自動生成的，一般情況下用戶不能夠修改和編輯根節(jié)點(diǎn)左側(cè)的子節(jié)點(diǎn)（#14359b858）也是框架布局，邊界是區(qū)域2到區(qū)域7的全部空間5.3 界面布局5.3.2 框架布局子節(jié)點(diǎn)（#14359b858）下

47、僅有一個子節(jié)點(diǎn)（#04359bd60）元素是線性布局，因為線性布局的Layout width屬性設(shè)置為fill_parent，Layout height屬性設(shè)置為wrap_content，因此該線性布局的寬度就是其父節(jié)點(diǎn)#14359b858的寬帶，高度等于所有子節(jié)點(diǎn)元素的高度之和線性布局#04359bd60的四個子節(jié)點(diǎn)元素#04359bfa8、#14359c5f8、#24359d5d8和#34359de18的邊界，分別是界面布局示意圖中的區(qū)域2、區(qū)域3、區(qū)域4和區(qū)域55.3 界面布局5.3.3 表格布局表格布局（TableLayout）也是一種常用的界面布局，它將屏幕劃分網(wǎng)格，通過指定行和列可

48、以將界面元素添加的網(wǎng)格中網(wǎng)格的邊界對用戶是不可見的表格布局還支持嵌套，可以將另一個表格布局放置在前一個表格布局的網(wǎng)格中，也可以在表格布局中添加其他界面布局，例如線性布局、相對布局等等5.3 界面布局5.3.3 表格布局表格布局示意圖 表格布局效果圖5.3 界面布局5.3.3 表格布局建立表格布局要注意以下幾點(diǎn)向界面中添加一個表格布局，無需修改布局的屬性值。其中，Id屬性為TableLayout01，Layout width和Layout height屬性都為wrap_content向TableLayout01中添加兩個TableRow。TableRow代表一個單獨(dú)的行，每行被劃分為幾個小的單元

49、，單元中可以添加一個界面控件。其中，Id屬性分別為TableRow01和TableRow02，Layout width和Layout height屬性都為wrap_content5.3 界面布局5.3.3 表格布局通過Outline，向TableRow01中添加TextView和EditText5.3 界面布局5.3.3 表格布局通過Outline，向TableRow02中添加兩個Button參考下表設(shè)置TableRow中四個界面控件的屬性值編號類型屬性值1TextViewId+id/labelText用戶名：GravityrightPadding3dipLayout width160dip2

50、EditTextId+id/entryTextnullPadding3dipLayout width160dip3ButtonId+id/okText確認(rèn)Padding3dip4ButtonId+id/cancelText取消Padding3dip5.3 界面布局5.3.3 表格布局main.xml文件的完整代碼如下 5.3 界面布局5.3.3 表格布局 5.3 界面布局5.3.3 表格布局第3行代碼使用了標(biāo)簽聲明表格布局第7行和第23行代碼聲明了兩個TableRow元素第12行設(shè)定寬度屬性android:layout_width：160dip第13行設(shè)定屬性android:gravity，指

51、定文字為右對齊第15行使用屬性android:padding，聲明TextView元素與其他元素的間隔距離為3dip 5.3 界面布局5.3.4 相對布局相對布局（RelativeLayout）是一種非常靈活的布局方式，能夠通過指定界面元素與其他元素的相對位置關(guān)系，確定界面中所有元素的布局位置特點(diǎn)：能夠最大程度保證在各種屏幕類型的手機(jī)上正確顯示界面布局5.3 界面布局5.3.4 相對布局相對布局示例說明添加TextView控件（“用戶名”），相對布局會將TextView控件放置在屏幕的最上方然后添加EditText控件（輸入框），并聲明該控件的位置在TextView控件的下方，相對布局會根據(jù)T

52、extView的位置確定EditText控件的位置之后添加第一個Button控件（“取消”按鈕），聲明在EditText控件的下方，且在父控件的最右邊最后，添加第二個Button控件（“確認(rèn)”按鈕），聲明該控件在第一個Button控件的左方，且與第一個Button控件處于相同的水平位置5.3 界面布局5.3.4 相對布局相對布局在main.xml文件的完整代碼如下 5.3 界面布局5.3.4 相對布局17. 、5.3 界面布局5.3.4 相對布局第3行使用了標(biāo)簽聲明一個相對布局第15行使用位置屬性android:layout_below，確定EditText控件在ID為label的元素下方第2

53、0行使用屬性android:layout_alignParentRight，聲明該元素在其父元素的右邊邊界對齊第21行設(shè)定屬性android:layout_marginLeft，左移10dip第22行聲明該元素在ID為entry的元素下方第28行聲明使用屬性android:layout_toLeftOf，聲明該元素在ID為cancel元素的左邊第29行使用屬性android:layout_alignTop，聲明該元素與ID為cancel的元素在相同的水平位置5.3 界面布局5.3.5 絕對布局絕對布局（AbsoluteLayout）能通過指定界面元素的坐標(biāo)位置，來確定用戶界面的整體布局絕對布局

54、是一種不推薦使用的界面布局，因為通過X軸和Y軸確定界面元素位置后，Android系統(tǒng)不能夠根據(jù)不同屏幕對界面元素的位置進(jìn)行調(diào)整，降低了界面布局對不同類型和尺寸屏幕的適應(yīng)能力5.3 界面布局5.3.5 絕對布局每一個界面控件都必須指定坐標(biāo)（X，Y），例如“確認(rèn)”按鈕的坐標(biāo)是（40，120），“取消”按鈕的坐標(biāo)是（120，120）。坐標(biāo)原點(diǎn)（0，0）在屏幕的左上角5.3 界面布局5.3.5 絕對布局絕對布局示例在main.xml文件的完整代碼 19. 20. 26. 27. 33. 34. 5.4 菜單菜單是應(yīng)用程序中非常重要的組成部分，能夠在不占用界面空間的前提下，為應(yīng)用程序提供了統(tǒng)一的功能和設(shè)

55、置界面，并為程序開發(fā)人員提供了易于使用的編程接口Android系統(tǒng)支持三種菜單選項菜單（Option Menu）子菜單（Submenu）快捷菜單（Context Menu）5.4 菜單5.4.1 選項菜單選項菜單是一種經(jīng)常被使用的Android系統(tǒng)菜單打開方式：通過“菜單鍵”（MENU key）打開選項菜單分類圖標(biāo)菜單（Icon Menu）擴(kuò)展菜單（Expanded Menu）5.4 菜單5.4.1 選項菜單圖標(biāo)菜單能夠同時顯示文字和圖標(biāo)的菜單，最多支持6個子項圖標(biāo)菜單不支持單選框和復(fù)選框5.4 菜單5.4.1 選項菜單擴(kuò)展菜單是在圖標(biāo)菜單子項多余6個時才出現(xiàn)，通過點(diǎn)擊圖標(biāo)菜單最后的子項“Mo

56、re”才能打開擴(kuò)展菜單是垂直的列表型菜單不能夠顯示圖標(biāo)支持單選框和復(fù)選框5.4 菜單5.4.1 選項菜單重載Activity的onCreateOptionMenu()函數(shù)，才能夠在Android應(yīng)用程序中使用選項菜單初次使用選項菜單時，會調(diào)用onCreateOptionMenu()函數(shù)，用來初始化菜單子項的相關(guān)內(nèi)容設(shè)置菜單子項自身的ID和組ID菜單子項顯示的文字和圖片等5.4 菜單5.4.1 選項菜單第1行和第2行代碼將菜單子項ID定義成靜態(tài)常量，并使用靜態(tài)常量Menu.FIRST（整數(shù)類型，值為1）定義第一個菜單子項，以后的菜單子項僅需在Menu.FIRST增加相應(yīng)的數(shù)值即可第7行代碼是on

57、CreateOptionsMenu()函數(shù)返回值，函數(shù)的返回值類型為布爾型返回true將顯示在函數(shù)中設(shè)置的菜單，否則不能夠顯示菜單final static int MENU_DOWNLOAD = Menu.FIRST;final static int MENU_UPLOAD = Menu.FIRST+1; Override public boolean onCreateOptionsMenu(Menu menu) menu.add(0,MENU_DOWNLOAD,0,下載設(shè)置); menu.add(0,MENU_UPLOAD,1,上傳設(shè)置); return true; 5.4 菜單5.4.1

58、選項菜單第4行代碼Menu對象作為一個參數(shù)被傳遞到函數(shù)內(nèi)部，因此在onCreateOptionsMenu()函數(shù)中，用戶可以使用Menu對象的add()函數(shù)添加菜單子項add()函數(shù)的語法第1個參數(shù)groupId是組ID，用以批量的對菜單子項進(jìn)行處理和排序第2關(guān)參數(shù)itemId是子項ID，是每一個菜單子項的唯一標(biāo)識，通過子項ID使應(yīng)用程序能夠定位到用戶所選擇的菜單子項第3個參數(shù)order是定義菜單子項在選項菜單中的排列順序第4個參數(shù)title是菜單子項所顯示的標(biāo)題MenuItem android.view.Menu.add(int groupId, int itemId, int order,

59、 CharSequence title)5.4 菜單5.4.1 選項菜單添加菜單子項的圖標(biāo)和快捷鍵：使用setIcon()函數(shù)和setShortcut()函數(shù)MENU_DOWNLOAD菜單設(shè)置圖標(biāo)和快捷鍵的代碼第2行代碼中使用了新的圖像資源，用戶將需要使用的圖像文件拷貝到/res/drawable目錄下setShortcut()函數(shù)第一個參數(shù)是為數(shù)字鍵盤設(shè)定的快捷鍵第二個參數(shù)是為全鍵盤設(shè)定的快捷鍵，且不區(qū)分字母的大小寫 menu.add(0,MENU_DOWNLOAD,0,下載設(shè)置) .setIcon(R.drawable.download); .setShortcut(,d);5.4 菜單5

60、.4.1 選項菜單重載onPrepareOptionsMenu()函數(shù)，能夠動態(tài)的添加、刪除菜單子項，或修改菜單的標(biāo)題、圖標(biāo)和可見性等內(nèi)容onPrepareOptionsMenu()函數(shù)的返回值的含義與onCreateOptionsMenu()函數(shù)相同返回true則顯示菜單返回false則不顯示菜單5.4 菜單5.4.1 選項菜單下面的代碼是在用戶每次打開選項菜單時，在菜單子項中顯示用戶打開該子項的次數(shù)第1行代碼設(shè)置一個菜單子項的計數(shù)器，用來統(tǒng)計用戶打開“上傳設(shè)置”子項的次數(shù)第4行代碼是通過將菜單子項的ID傳遞給menu.findItem()函數(shù)，獲取到菜單子項的對象第5行代碼是通過MenuI