Android界面開發(fā)詳解

5.1用戶界面基礎(chǔ)用戶界面（UserInterface，UI)是系統(tǒng)和用戶之間進行信息交換的媒介，實現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換在計算機出現(xiàn)早期，批處理界面（1945-1968）和命令行界面（1969-1983）得到廣泛的使用目前，流行圖像用戶界面（GraphicalUserInterface，GUI），采用圖形方式與用戶進行交互的界面未來的用戶界面將更多的運用虛擬現(xiàn)實技術(shù)，使用戶能夠擺脫鍵盤與鼠標(biāo)的交互方式，而通過動作、語言，甚至是腦電波來控制計算機5.1用戶界面基礎(chǔ)設(shè)計手機用戶界面應(yīng)解決的問題需要界面設(shè)計與程序邏輯完全分離，這樣不僅有利于他們的并行開發(fā)，而且在后期修改界面時，也不用再次修改程序的邏輯代碼根據(jù)不同型號手機的屏幕解析度、尺寸和縱橫比各不相同，自動調(diào)整界面上部分控件的位置和尺寸，避免因為屏幕信息的變化而出現(xiàn)顯示錯誤能夠合理利用較小的屏幕顯示空間，構(gòu)造出符合人機交互規(guī)律的用戶界面，避免出現(xiàn)凌亂、擁擠的用戶界面Android已經(jīng)解決了前兩個問題，使用XML文件描述用戶界面；資源資源文件獨立保存在資源文件夾中；用戶對界面描述非常靈活，允許不明確定義界面元素的位置和尺寸，僅聲明界面元素的相對位置和粗略尺寸5.1用戶界面基礎(chǔ)Android用戶界面框架Android用戶界面框架（AndroidUIFramework）采用MVC（Model-View-Controller）模型提供了處理用戶輸入的控制器（Controller）顯示用戶界面和圖像的視圖（View），以及保存數(shù)據(jù)和代碼的模型（Model）5.1用戶界面基礎(chǔ)Android用戶界面框架MVC模型MVC模型中的控制器能夠接受并響應(yīng)程序的外部動作，如按鍵動作或觸摸屏動作等控制器使用隊列處理外部動作，每個外部動作作為一個對立的事件被加入隊列中，然后Android用戶界面框架按照“先進先出”的規(guī)則從隊列中獲取事件，并將這個事件分配給所對應(yīng)的事件處理函數(shù)http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.1用戶界面基礎(chǔ)Android用戶界面框架Android用戶界面框架（AndroidUIFramework）采用視圖樹（ViewTree）模型Android用戶界面框架中的界面元素以一種樹型結(jié)構(gòu)組織在一起，稱為視圖樹Android系統(tǒng)會依據(jù)視圖樹的結(jié)構(gòu)從上至下繪制每一個界面元素。每個元素負責(zé)對自身的繪制，如果元素包含子元素，該元素會通知其下所有子元素進行繪制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ū)域的界面繪制、焦點變化、用戶輸入和界面事件處理等功能View也是一個重要的基類，所有在界面上的可見元素都是View的子類ViewGroup是一種能夠承載含多個View的顯示單元ViewGroup功能：一個是承載界面布局，另一個是承載具有原子特性的重構(gòu)模塊5.1用戶界面基礎(chǔ)Android用戶界面框架單線程用戶界面在單線程用戶界面中，控制器從隊列中獲取事件和視圖在屏幕上繪制用戶界面，使用的都是同一個線程特點：處理函數(shù)具有順序性，能夠降低應(yīng)用程序的復(fù)雜程度，同時也能減低開發(fā)的難度缺點：如果事件處理函數(shù)過于復(fù)雜，可能會導(dǎo)致用戶界面失去響應(yīng)5.2界面控件Android系統(tǒng)的界面控件分為定制控件和系統(tǒng)控件定制控件是用戶獨立開發(fā)的控件，或通過繼承并修改系統(tǒng)控件后所產(chǎn)生的新控件。能夠為用戶提供特殊的功能或與眾不同的顯示需求方式系統(tǒng)控件是Android系統(tǒng)提供給用戶已經(jīng)封裝的界面控件。提供在應(yīng)用程序開發(fā)過程中常見功能控件。系統(tǒng)控件更有利于幫助用戶進行快速開發(fā)，同時能夠使Android系統(tǒng)中應(yīng)用程序的界面保持一致性常見的系統(tǒng)控件包括TextView、EditText、Button、ImageButton、Checkbox、RadioButton、Spinner、ListView和TabHost5.2界面控件5.2.1

TextView和EditTextTextView是一種用于顯示字符串的控件EditText則是用來輸入和編輯字符串的控件EditText是一個具有編輯功能的TextViewhttp://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.1

TextView和EditText建立一個“TextViewDemo”的程序，包含TextView和EditText兩個控件上方“用戶名”部分使用的是TextView，下方的文字輸入框使用的是EditText5.2界面控件5.2.1

TextView和EditTextTextViewDemo在XML文件中的代碼<TextViewandroid:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView01"></TextView><EditTextandroid:id="@+id/EditText01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="EditText01"></EditText>5.2界面控件5.2.1

TextView和EditText第1行android:id屬性聲明了TextView的ID，這個ID主要用于在代碼中引用這個TextView對象“@+id/TextView01”表示所設(shè)置的ID值@表示后面的字符串是ID資源加號（+）表示需要建立新資源名稱，并添加到R.java文件中斜杠后面的字符串（TextView01）表示新資源的名稱如果資源不是新添加的，或?qū)儆贏ndroid框架的ID資源，則不需要使用加號（+），但必須添加Android包的命名空間，例如android:id="@android:id/empty"5.2界面控件5.2.1

TextView和EditText第2行的android:layout_width屬性用來設(shè)置TextView的寬度，wrap_content表示TextView的寬度只要能夠包含所顯示的字符串即可第3行的android: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)容TextViewtextView=(TextView)findViewById(R.id.TextView01);EditTexteditText=(EditText)findViewById(R.id.EditText01);textView.setText("用戶名：");editText.setText("");http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.2

Button和ImageButtonButton是一種按鈕控件，用戶能夠在該控件上點擊，并后引發(fā)相應(yīng)的事件處理函數(shù)ImageButton用以實現(xiàn)能夠顯示圖像功能的控件按鈕5.2界面控件5.2.2

Button和ImageButton建立一個“ButtonDemo”的程序，包含Button和ImageButton兩個按鈕，上方是“Button按鈕”，下方是一個ImageButton控件5.2界面控件5.2.2

Button和ImageButtonButtonDemo在XML文件中的代碼定義Button控件的高度、寬度和內(nèi)容定義ImageButton控件的高度和寬度，但是沒定義顯示的圖像，在后面的代碼中進行定義<Buttonandroid:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button01"></Button><ImageButtonandroid:id="@+id/ImageButton01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageButton>5.2界面控件5.2.2

Button和ImageButton引入資源將download.png文件拷貝到/res/drawable文件夾下在/res目錄上選擇Refresh新添加的文件將顯示在/res/drawable文件夾下R.java文件內(nèi)容也得到了更新否則提示無法找到資源的錯誤5.2界面控件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傳遞給ImageButtonButtonbutton=(Button)findViewById(R.id.Button01);ImageButtonimageButton=(ImageButton)findViewById(R.id.ImageButton01);button.setText("Button按鈕");imageButton.setImageResource(R.drawable.download);5.2界面控件5.2.2

Button和ImageButton按鈕響應(yīng)點擊事件：添加點擊事件的監(jiān)聽器第2行代碼中button對象通過調(diào)用setOnClickListener()函數(shù)，注冊一個點擊（Click）事件的監(jiān)聽器View.OnClickListener()第3行代碼是點擊事件的回調(diào)函數(shù)第4行代碼將TextView的顯示內(nèi)容更改為“Button按鈕”finalTextViewtextView=(TextView)findViewById(R.id.TextView01);button.setOnClickListener(newView.OnClickListener(){ publicvoidonClick(Viewview){ textView.setText("Button按鈕"); }});imageButton.setOnClickListener(newView.OnClickListener(){ publicvoidonClick(Viewview){ textView.setText("ImageButton按鈕"); }});http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.2

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

Button和ImageButton第1行至第12行代碼定義了一個名為buttonListener的點擊事件監(jiān)聽器第13行代碼將該監(jiān)聽器注冊到Button上第14行代碼將該監(jiān)聽器注冊到ImageButton上Button.OnClickListenerbuttonListener=newButton.OnClickListener(){ @Override publicvoidonClick(Viewv){ switch(v.getId()){ caseR.id.Button01: textView.setText("Button按鈕"); return; caseR.id.ImageButton01: textView.setText("ImageButton按鈕"); return; }

}};

button.setOnClickListener(buttonListener);

imageButton.setOnClickListener(buttonListener);5.2界面控件5.2.3

CheckBox和RadioButtonCheckBox是一個同時可以選擇多個選項的控件RadioButton則是僅可以選擇一個選項的控件RadioGroup是RadioButton的承載體，程序運行時不可見，應(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和RadioButtonCheckboxRadiobuttonDemo在XML文件中的代碼<TextViewandroid:id="@+id/TextView01“ android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"/> <CheckBoxandroid:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="CheckBox01"> </CheckBox> <CheckBoxandroid:id="@+id/CheckBox02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="CheckBox02"> </CheckBox>http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.3

CheckBox和RadioButton第15行<RadioGroup>標(biāo)簽聲明了一個RadioGroup在第18行和第23行分別聲明了兩個RadioButton，這兩個RadioButton是RadioGroup的子元素<RadioGroupandroid:id="@+id/RadioGroup01" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButtonandroid:id="@+id/RadioButton01" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:text="RadioButton01"> </RadioButton> <RadioButtonandroid:id="@+id/RadioButton02" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:text="RadioButton02"> </RadioButton> </RadioGroup>5.2界面控件5.2.3

CheckBox和RadioButton引用CheckBox和RadioButton的方法參考下面的代碼CheckBox設(shè)置點擊事件監(jiān)聽器的簡要代碼與Button設(shè)置點擊事件監(jiān)聽器中介紹的方法相似，唯一不同在于將Button.OnClickListener換成了CheckBox.OnClickListenerCheckBoxcheckBox1=(CheckBox)findViewById(R.id.CheckBox01);RadioButtonradioButton1=(RadioButton)findViewById(R.id.RadioButton01);CheckBox.OnClickListenercheckboxListener=newCheckBox.OnClickListener(){ @Override publicvoidonClick(Viewv){ //過程代碼 }};checkBox1.setOnClickListener(checkboxListener);checkBox2.setOnClickListener(checkboxListener);5.2界面控件5.2.3

CheckBox和RadioButtonRadioButton設(shè)置點擊事件監(jiān)聽器的方法RadioButton.OnClickListenerradioButtonListener=newRadioButton.OnClickListener(){ @Override publicvoidonClick(Viewv){ //過程代碼 }}; radioButton1.setOnClickListener(radioButtonListener);radioButton2.setOnClickListener(radioButtonListener);5.2界面控件5.2.4

SpinnerSpinner是一種能夠從多個選項中選一選項的控件，類似于桌面程序的組合框（ComboBox），但沒有組合框的下拉菜單，而是使用浮動菜單為用戶提供選擇建立一個程序“SpinnerDemo”包含3個子項Spinner控件5.2界面控件5.2.4

SpinnerSpinnerDemo在XML文件中的代碼第5行使用<Spinner>標(biāo)簽聲明了一個Spinner控件第6行代碼中指定了該控件的寬度為300dip<TextViewandroid:id="@+id/TextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"/><Spinnerandroid:id="@+id/Spinner01" android:layout_width="300dip" android:layout_height="wrap_content"></Spinner>http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.4

Spinner在SpinnerDemo.java文件中，定義一個ArrayAdapter適配器，在ArrayAdapter中添加需要在Spinner中可以選擇的內(nèi)容，需要在代碼中引入android.widget.ArrayAdapter和android.widget.SpinnerSpinnerspinner=(Spinner)findViewById(R.id.Spinner01);List<String>list=newArrayList<String>();list.add("Spinner子項1");list.add("Spinner子項2");list.add("Spinner子項3");ArrayAdapter<String>adapter=newArrayAdapter<String>(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ù)需要進行增減<String>表示數(shù)組列表中保存的是字符串類型的數(shù)據(jù)在代碼的第3、4、5行中，使用add()函數(shù)分別向數(shù)組列表中添加3個字符串第6行代碼建立了一個ArrayAdapter的數(shù)組適配器，數(shù)組適配器能夠?qū)⒔缑婵丶偷讓訑?shù)據(jù)綁定在一起第7行代碼設(shè)定了Spinner的浮動菜單的顯示方式，其中，android.R.layout.simple_spinner_dropdown_item是Android系統(tǒng)內(nèi)置的一種浮動菜單第8行代碼實現(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)容，就不需要應(yīng)用程序再監(jiān)視，從而極大的簡化的代碼的復(fù)雜性5.2界面控件5.2.5

ListViewListView是一種用于垂直顯示的列表控件，如果顯示內(nèi)容過多，則會出現(xiàn)垂直滾動條ListView能夠通過適配器將數(shù)據(jù)和自身綁定，在有限的屏幕上提供大量內(nèi)容供用戶選擇,所以是經(jīng)常使用的用戶界面控件ListView支持點擊事件處理，用戶可以用少量的代碼實現(xiàn)復(fù)雜的選擇功能5.2界面控件5.2.5

ListView建立一個“ListViewDemo”程序，包含四個控件，從上至下分別為TextView01、ListView01、

ListView02和

ListView035.2界面控件5.2.5

ListViewListViewDemo在XML文件中的代碼 <TextViewandroid:id="@+id/TextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"/> <ListViewandroid:id="@+id/ListView01" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ListView>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和適配器綁定finalTextViewtextView=(TextView)findViewById(R.id.TextView01);ListViewlistView=(ListView)findViewById(R.id.ListView01);List<String>list=newArrayList<String>();list.add("ListView子項1");list.add("ListView子項2");list.add("ListView子項3");ArrayAdapter<String>adapter=newArrayAdapter<String>(this,

android.R.layout.simple_list_item_1,list);listView.setAdapter(adapter);5.2界面控件5.2.5

ListView下面的代碼聲明了ListView子項的點擊事件監(jiān)聽器，用以確定用戶在ListView中，選擇的是哪一個子項AdapterView.OnItemClickListenerlistViewListener=new

AdapterView.OnItemClickListener(){ @Override publicvoidonItemClick(AdapterView<?>arg0,Viewarg1,intarg2,longarg3){ Stringmsg=””; textView.setText(msg); }};listView.setOnItemClickListener(listViewListener);5.2界面控件5.2.5

ListView第1行的AdapterView.OnItemClickListener是ListView子項的點擊事件監(jiān)聽器，同樣是一個接口，需要實現(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指定剛剛聲明的監(jiān)聽器5.2界面控件5.2.6TabHostTab標(biāo)簽頁是界面設(shè)計時經(jīng)常使用的界面控件，可以實現(xiàn)多個分頁之間的快速切換，每個分頁可以顯示不同的內(nèi)容下圖是Android系統(tǒng)內(nèi)置的Tab標(biāo)簽頁，點擊“呼出/接聽鍵”后出現(xiàn)，用于電話呼出和查看撥號記錄、聯(lián)系人http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.6TabHostTab標(biāo)簽頁的使用首先要設(shè)計所有的分頁的界面布局在分頁設(shè)計完成后，使用代碼建立Tab標(biāo)簽頁，并給每個分頁添加標(biāo)識和標(biāo)題最后確定每個分頁所顯示的界面布局每個分頁建立一個XML文件，用以編輯和保存分頁的界面布局，使用的方法與設(shè)計普通用戶界面沒有什么區(qū)別5.2界面控件5.2.6TabHost建立一個“TabDemo”程序，包含三個XML文件，分別為tab1.xml、tab2.xml和tab3.xml，這3個文件分別使用線性布局、相對布局和絕對布局示例中的main.xml的代碼，并將布局的ID分別定義為layout01、layout02和layout035.2界面控件5.2.6TabHosttab1.xml文件代碼tab2.xml文件代碼tab3.xml文件代碼<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutandroid:id="@+id/layout01"…………</LinearLayout><?xmlversion="1.0"encoding="utf-8"?><AbsoluteLayoutandroid:id="@+id/layout02"…………</AbsoluteLayout><?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutandroid:id="@+id/layout03"…………</RelativeLayout>5.2界面控件5.2.6TabHost在TabDemo.java文件中鍵入下面的代碼，創(chuàng)建Tab標(biāo)簽頁，并建立子頁與界面布局直接的關(guān)聯(lián)關(guān)系packageedu.hrbeu.TabDemo;

importandroid.app.TabActivity;importandroid.os.Bundle;importandroid.widget.TabHost;importandroid.view.LayoutInflater;

publicclassTabDemoextendsTabActivity{ @Override5.2界面控件5.2.6TabHostpublicvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); TabHosttabHost=getTabHost(); LayoutInflater.from(this).inflate(R.layout.tab1,

tabHost.getTabContentView(),true); LayoutInflater.from(this).inflate(R.layout.tab2,

tabHost.getTabContentView(),true); LayoutInflater.from(this).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.id.layout03));

}

}http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.2界面控件5.2.6TabHost第8行代碼的聲明TabDemo類繼承與TabActivity，與以往繼承Activity不同，TabActivity支持內(nèi)嵌多個Activity或View第12行代碼通過getTabHost()函數(shù)獲得了Tab標(biāo)簽頁的容器，用以承載可以點擊的Tab標(biāo)簽和分頁的界面布局。第13行代碼通過LayoutInflater將tab1.xml文件中的布局轉(zhuǎn)換為Tab標(biāo)簽頁可以使用的View對象第16行代碼使用addTab()函數(shù)添加了第1個分頁，tabHost.newTabSpec("TAB1")表明在第12行代碼中建立的tabHost上，添加一個標(biāo)識為TAB1的Tab分頁第17行代碼使用setIndicator()函數(shù)設(shè)定分頁顯示的標(biāo)題，使用setContent()函數(shù)設(shè)定分頁所關(guān)聯(lián)的界面布局5.2界面控件5.2.6TabHostTabDemo示例的運行結(jié)果如圖5.2界面控件5.2.6TabHost在使用Tab標(biāo)簽頁時，可以將不同分頁的界面布局保存在不同的XML文件中，也可以將所有分頁的布局保存在同一個XML文件中第一種方法有利于在Eclipse開發(fā)環(huán)境中進行可視化設(shè)計，并且不同分頁的界面布局在不同的文件中更加易于管理第二種方法則可以產(chǎn)生較少的XML文件，同時編碼時的代碼也會更加簡潔5.3界面布局界面布局界面布局（Layout）是用戶界面結(jié)構(gòu)的描述，定義了界面中所有的元素、結(jié)構(gòu)和相互關(guān)系聲明Android程序的界面布局有兩種方法使用XML文件描述界面布局在程序運行時動態(tài)添加或修改界面布局用戶既可以獨立使用任何一種聲明界面布局的方式，也可以同時使用兩種方式5.3界面布局界面布局使用XML文件聲明界面布局的特點將程序的表現(xiàn)層和控制層分離在后期修改用戶界面時，無需更改程序的源代碼用戶還能夠通過可視化工具直接看到所設(shè)計的用戶界面，有利于加快界面設(shè)計的過程，并且為界面設(shè)計與開發(fā)帶來極大的便利性

http://www.anzhuo.cc/forum-45-1.html安卓手機壁紙下載5.3界面布局5.3.1線性布局線性布局（LinearLayout）是一種重要的界面布局中，也是經(jīng)常使用到的一種界面布局在線性布局中，所有的子元素都按照垂直或水平的順序在界面上排列如果垂直排列，則每行僅包含一個界面元素如果水平排列，則每列僅包含一個界面元素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ū)募麨閙ain_vertical.xml保存位置為LinearLayout/res/layout5.3界面布局5.3.1線性布局雙擊新建立的/res/layout/main_vertical.xml文件，Eclipse將打開界面布局的可視化編輯器5.3界面布局5.3.1線性布局可視化編輯器頂部是資源配置清單，可以根據(jù)手機的配置不同選擇不同的資源，主要用來實現(xiàn)應(yīng)用軟件的本地化下部左側(cè)是界面布局和界面控件，用戶可以將需要的布局和控件拖拽到右面的可視化界面中，并修改布局和控件的屬性右側(cè)是可視化的用戶界面，能夠?qū)崟r的呈現(xiàn)用戶界面，但對無法正確顯示中文。左下角的“Layout”和“main_vertical.xml”能夠在可視化編輯器和XML文件編輯器之間切換5.3界面布局5.3.1線性布局在Eclipse右邊的Outline中，雙擊LinearLayout，打開線性布局的屬性編輯器線性布局的排列方法主要由Orientation屬性進行控制，vertical表示垂直排列，horizontal表示水平排列選擇Orientation的值為vertical，表示該線性布局為垂直排列游戲的策劃接下來對本游戲的策劃進行簡單介紹，在真實的游戲開發(fā)中，該步驟還需要更細致、更具體、更全面，該游戲的策劃如下所列。游戲類型運行的目標(biāo)平臺操作方式開發(fā)前準(zhǔn)備工作游戲的準(zhǔn)備工作主要是在進行開發(fā)之前的非代碼方面的準(zhǔn)備工作，主要包括以下兩個方面。圖片資源的準(zhǔn)備工作聲音資源的準(zhǔn)備工作游戲的架構(gòu)在正式代碼的開發(fā)之前，首先對該游戲的設(shè)計框架進行簡要介紹，以幫助讀者更好的理解后面的內(nèi)容。游戲的類框架http://www.anzhuo.cc/forum-49-1.html安卓三星I9300論壇5.3界面布局5.3.1線性布局缺省情況下，Layoutheight的值為wrap_content，表示線性布局高度等于所有子控件的高度總和，也就是線性布局的高度會剛好將所有子控件包含其中將Layoutwidth屬性的值改為fill_parent，表示線性布局寬度等于父控件的寬度，就是將線性布局在橫向上占據(jù)父控件的所有空間5.3界面布局5.3.1線性布局打開XML文件編輯器，main_vertical.xml文件的代碼如下第2行代碼是聲明XML文件的根元素為線性布局第4、5、6行代碼是在屬性編輯器中修改過的寬度、高度和排列方式的屬性用戶在可視化編輯器和屬性編輯器中的任何修改，都會同步的反映在XML文件中；反之，也是如此<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical"></LinearLayout>5.3界面布局5.3.1線性布局將四個界面控件TextView、EditText、Button、Button先后拖拽到可視化編輯器中所有控件都自動獲取控件名稱，并把該名稱顯示在控件上，如TextView01、EditText01、Button01和Button025.3界面布局5.3.1線性布局修改界面控件的屬性所有界面控件都有一個共同的屬性IDID是一個字符串，編譯時被轉(zhuǎn)換為整數(shù)，可以用來在代碼中引用界面元素，一般僅在代碼中需要動態(tài)修改的界面元素時才為界面元素設(shè)置ID，反之則不需要設(shè)置ID編號類型屬性值1TextViewId@+id/labelText用戶名：2EditTextId @+id/entryLayoutwidthfill_parentText[null]3ButtonId @+id/okText確認(rèn)4ButtonId @+id/cancelText取消5.3界面布局5.3.1線性布局從可視化編輯器中發(fā)現(xiàn)，界面控件的中文字符都顯示為“□”，因為可視化編輯器還不能很好的支持中文字符打開XML文件編輯器查看main_vertical.xml文件代碼，發(fā)現(xiàn)在屬性編輯器內(nèi)填入的文字已經(jīng)正常寫入到XML文件中，例如第11、20、25行代碼<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical">

<TextViewandroid:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="用戶名:">5.3界面布局5.3.1線性布局</TextView><EditTextandroid:id="@+id/entry" android:layout_height="wrap_content" android:layout_width="fill_parent"> </EditText> <Buttonandroid:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="確認(rèn)">

</Button>

<Buttonandroid:id="@+id/cancel"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="取消">

</Button>

</LinearLayout>5.3界面布局5.3.1線性布局將LinearLayout.java文件中的setContentView(R.layout.main)，更改為setContentView(R.layout.main_vertical)。運行后的結(jié)果如圖5.3界面布局5.3.1線性布局建立橫向線性布局與縱向線性布局相似，只需注意以下幾點建立main_horizontal.xml文件線性布局的Orientation屬性的值設(shè)置為horizontal將EditText的Layoutwidth屬性的值設(shè)置為wrap_content將LinearLayout.java文件中的setContentView(R.layout.main_vertical)修改為setContentView(R.layout.main_horizontal)

5.3界面布局5.3.2框架布局框架布局（FrameLayout）是最簡單的界面布局，是用來存放一個元素的空白空間，且子元素的位置是不能夠指定的，只能夠放置在空白空間的左上角如果有多個子元素，后放置的子元素將遮擋先放置的子元素使用AndroidSDK中提供的層級觀察器（HierarchyViewer）進一步分析界面布局層級觀察器能夠?qū)τ脩艚缑孢M行分析和調(diào)試，并以圖形化的方式展示樹形結(jié)構(gòu)的界面布局還提供了一個精確的像素級觀察器（PixelPerfectView），以柵格的方式詳細觀察放大后的界面界面5.3界面布局5.3.2框架布局在層級觀察器中獲得示例界面布局的樹形結(jié)構(gòu)圖5.3界面布局5.3.2框架布局示意圖5.3界面布局5.3.2框架布局結(jié)合界面布局的樹形結(jié)構(gòu)圖和示意圖，分析不同界面布局和界面控件的區(qū)域邊界用戶界面的根節(jié)點（#0@43599ee0）是線性布局，其邊界是整個界面，也就是示意圖的最外層的實心線根節(jié)點右側(cè)的子節(jié)點（#0@43599a730）是框架布局，僅有一個節(jié)點元素（#0@4359ad18），這個子元素是TextView控件，用來顯示Android應(yīng)用程序名稱，其邊界是示意圖中的區(qū)域1。因此框架布局元素#0@43599a730的邊界是同區(qū)域1的高度相同，寬帶充滿整個根節(jié)點的區(qū)域。這兩個界面元素是系統(tǒng)自動生成的，一般情況下用戶不能夠修改和編輯根節(jié)點左側(cè)的子節(jié)點（#1@4359b858）也是框架布局，邊界是區(qū)域2到區(qū)域7的全部空間5.3界面布局5.3.2框架布局子節(jié)點（#1@4359b858）下僅有一個子節(jié)點（#0@4359bd60）元素是線性布局，因為線性布局的Layoutwidth屬性設(shè)置為fill_parent，Layoutheight屬性設(shè)置為wrap_content，因此該線性布局的寬度就是其父節(jié)點#1@4359b858的寬帶，高度等于所有子節(jié)點元素的高度之和線性布局#0@4359bd60的四個子節(jié)點元素#0@4359bfa8、#1@4359c5f8、#2@4359d5d8和#3@4359de18的邊界，分別是界面布局示意圖中的區(qū)域2、區(qū)域3、區(qū)域4和區(qū)域55.3界面布局5.3.3表格布局表格布局（TableLayout）也是一種常用的界面布局，它將屏幕劃分網(wǎng)格，通過指定行和列可以將界面元素添加的網(wǎng)格中網(wǎng)格的邊界對用戶是不可見的表格布局還支持嵌套，可以將另一個表格布局放置在前一個表格布局的網(wǎng)格中，也可以在表格布局中添加其他界面布局，例如線性布局、相對布局等等http://www.anzhuo.cc/forum-58-1.html安卓HTCOneX論壇5.3界面布局5.3.3

表格布局表格布局示意圖表格布局效果圖游戲的策劃接下來對本游戲的策劃進行簡單介紹，在真實的游戲開發(fā)中，該步驟還需要更細致、更具體、更全面，該游戲的策劃如下所列。游戲類型運行的目標(biāo)平臺操作方式開發(fā)前準(zhǔn)備工作游戲的準(zhǔn)備工作主要是在進行開發(fā)之前的非代碼方面的準(zhǔn)備工作，主要包括以下兩個方面。圖片資源的準(zhǔn)備工作聲音資源的準(zhǔn)備工作游戲的架構(gòu)在正式代碼的開發(fā)之前，首先對該游戲的設(shè)計框架進行簡要介紹，以幫助讀者更好的理解后面的內(nèi)容。游戲的類框架http://www.anzhuo.cc/forum-49-1.html安卓三星I9300論壇5.3界面布局5.3.3

表格布局建立表格布局要注意以下幾點向界面中添加一個線性布局，無需修改布局的屬性值。其中，Id屬性為TableLayout01，Layoutwidth和Layoutheight屬性都為wrap_content向TableLayout01中添加兩個TableRow。TableRow代表一個單獨的行，每行被劃分為幾個小的單元，單元中可以添加一個界面控件。其中，Id屬性分別為TableRow01和TableRow02，Layoutwidth和Layoutheight屬性都為wrap_content5.3界面布局5.3.3

表格布局通過Outline，向TableRow01中添加TextView和EditText5.3界面布局5.3.3

表格布局通過Outline，向TableRow02中添加兩個Button參考下表設(shè)置TableRow中四個界面控件的屬性值編號類型屬性值1TextViewId@+id/labelText用戶名：GravityrightPadding3dipLayoutwidth160dip2EditTextId @+id/entryText[null]Padding3dipLayoutwidth160dip3ButtonId @+id/okText確認(rèn)Padding3dip4ButtonId @+id/cancelText取消Padding3dip5.3界面布局5.3.3

表格布局main.xml文件的完整代碼如下<?xmlversion="1.0"encoding="utf-8"?>

<TableLayoutandroid:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="/apk/res/android">

<TableRowandroid:id="@+id/TableRow01"

android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextViewandroid:id="@+id/label" android:layout_height="wrap_content" android:layout_width="160dip" android:gravity="right" android:text="用戶名：" android:padding="3dip"> </TextView>http://www.anzhuo.cc/forum-58-1.html安卓HTCOneX論壇5.3界面布局5.3.3

表格布局<EditTextandroid:id="@+id/entry" android:layout_height="wrap_content" android:layout_width="160dip“ android:padding="3dip"> </EditText> </TableRow> <TableRowandroid:id="@+id/TableRow02"

android:layout_width="wrap_content" android:layout_height="wrap_content"> <Buttonandroid:id="@+id/ok" android:layout_height="wrap_content" android:padding="3dip" android:text="確認(rèn)">

</Button>5.3界面布局5.3.3

表格布局第3行代碼使用了<TableLayout>標(biāo)簽聲明表格布局第7行和第23行代碼聲明了兩個TableRow元素第12行設(shè)定寬度屬性android:layout_width：160dip第13行設(shè)定屬性android:gravity，指定文字為右對齊第15行使用屬性android:padding，聲明TextView元素與其他元素的間隔距離為3dip<Buttonandroid:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dip" android:text="取消">

</Button>

</TableRow>

</TableLayout>5.3界面布局5.3.4相對布局相對布局（RelativeLayout）是一種非常靈活的布局方式，能夠通過指定界面元素與其他元素的相對位置關(guān)系，確定界面中所有元素的布局位置特點：能夠最大程度保證在各種屏幕類型的手機上正確顯示界面布局5.3界面布局5.3.4相對布局相對布局示例說明添加TextView控件（“用戶名”），相對布局會將TextView控件放置在屏幕的最上方然后添加EditText控件（輸入框），并聲明該控件的位置在TextView控件的下方，相對布局會根據(jù)TextView的位置確定EditText控件的位置之后添加第一個Button控件（“取消”按鈕），聲明在EditText控件的下方，且在父控件的最右邊最后，添加第二個Button控件（“確認(rèn)”按鈕），聲明該控件在第一個Button控件的左方，且與第一個Button控件處于相同的水平位置5.3界面布局5.3.4相對布局相對布局在main.xml文件的完整代碼如下<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayoutandroid:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="/apk/res/android"> <TextViewandroid:id="@+id/label" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="用戶名："> </TextView> <EditTextandroid:id="@+id/entry" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_below="@id/label"> </EditText>http://www.anzhuo.cc/forum-58-1.html安卓HTCOneX論壇5.3界面布局5.3.4相對布局17.<Buttonandroid:id="@+id/cancel"android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:layout_below="@id/entry" android:text="取消">

</Button>

<Buttonandroid:id="@+id/ok"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_toLeftOf="@id/cancel"

android:layout_alignTop="@id/cancel“

android:text=“確認(rèn)”>、

</Button></RelativeLayout>5.3界面布局5.3.4相對布局第3行使用了<RelativeLayout>標(biāo)簽聲明一個相對布局第15行使用位置屬性android:layout_below，確定EditText控件在ID為label的元素下方第20行使用屬性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)位置，來確定用戶界面的整體布局絕對布局是一種不推薦使用的界面布局，因為通過X軸和Y軸確定界面元素位置后，Android系統(tǒng)不能夠根據(jù)不同屏幕對界面元素的位置進行調(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)原點（0，0）在屏幕的左上角http://www.anzhuo.cc/forum-58-1.html安卓HTCOneX論壇5.3界面布局5.3.5

絕對布局絕對布局示例在main.xml文件的完整代碼<?xmlversion="1.0"encoding="utf-8"?>

<AbsoluteLayoutandroid:id="@+id/AbsoluteLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="/apk/res/android"> <TextViewandroid:id="@+id/label" android:layout_x="40dip" android:layout_y="40dip" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="用戶名："> </TextView> <EditTextandroid:id="@+id/entry" android:layout_x="40dip" android:layout_y="60dip"5.3界面布局5.3.5

絕對布局17.

android:layout_height="wrap_content"18. android:layout_width="150dip">19. </EditText>20. <Buttonandroid:id="@+id/ok"21. android:layout_width="70dip"22. android:layout_height="wrap_content" 23. android:layout_x="40dip"24. android:layout_y="120dip"25. android:text="確認(rèn)">26. </Button>27. <Buttonandroid:id="@+id/cancel"28. android:layout_width="70dip"29. android:layout_height="wrap_content"30. android:layout_x="120dip"31. android:layout_y="120dip" 32. android:text="取消">33. </Button>34.</AbsoluteLayout>5.4

菜單菜單是應(yīng)用程序中非常重要的組成部分，能夠在不占用界面空間的前提下，為應(yīng)用程序提供了統(tǒng)一的功能和設(shè)置界面，并為程序開發(fā)人員提供了易于使用的編程接口Android系統(tǒng)支持三種菜單選項菜單（OptionMenu）子菜單（Submenu）快捷菜單（ContextMenu）5.4

菜單5.4.1選項菜單選項菜單是一種經(jīng)常被使用的Android系統(tǒng)菜單打開方式：通過“菜單鍵”（MENUkey）打