Android用戶界面詳解
這個(gè)章節(jié)描述怎么實(shí)現(xiàn)一個(gè)基本的Android界面。它涉及構(gòu)建屏幕基本元素，怎么在xml(定義文件)內(nèi)定義屏幕、用你的代碼生成、在不同任務(wù)你需要操作你的用戶接口。Android生成屏幕有三種方式：xml配置生成;通過(guò)你自己用戶界面接口生成;直接用代碼生成。根據(jù)MVC原則，UI應(yīng)該與程序邏輯相分離，因此，在XML中定義UI結(jié)構(gòu)是高度推薦的。此外，一個(gè)程序從一個(gè)屏幕方案調(diào)整到另一個(gè)也容易得多。在XML中定義UI跟創(chuàng)建一個(gè)普通的HTML文檔非常相似，例如，你有如下的一個(gè)文件：
The content of the body element.
就如Android的XML布局一樣，所有的元素都是結(jié)構(gòu)化的，能夠通過(guò)樹(shù)形結(jié)構(gòu)來(lái)表示：
xmlns:android=http://schemas.android.com/apk/res/android
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"/>
3.2.1屏幕元素的層次
Android應(yīng)用程序的基礎(chǔ)功能單元就是Activity--android.app.Activity類中的一個(gè)對(duì)象。一個(gè)Activity可以做很多事，但是他自己并不會(huì)顯示到屏幕上。想要讓你的Activity顯示在屏幕上并且設(shè)計(jì)它的UI，你需要使用view和viewgroup--Android平臺(tái)基礎(chǔ)的用戶界面表達(dá)單元。
Views
一個(gè)view是一個(gè)android.view.View基礎(chǔ)類的對(duì)象。它是一個(gè)存儲(chǔ)有屏幕上特定的一個(gè)矩形內(nèi)布局和內(nèi)容屬性的數(shù)據(jù)結(jié)構(gòu)。一個(gè)View對(duì)象處理測(cè)距和布局，繪圖，焦點(diǎn)變換，滾動(dòng)條，還有屏幕區(qū)域自己表現(xiàn)的按鍵和手勢(shì)。
View類作為一個(gè)基類，為widget(窗體部件)服務(wù)，widget--是一組用于繪制交互屏幕元素的完全實(shí)現(xiàn)子類。Widget處理它們自己的測(cè)距和繪圖，所以你可以更快速地用它們?nèi)?gòu)建你的UI?？捎玫降膚idget包括Text，EditText，InputMethod，Button，RadioButton，Checkbox，和ScrollView……。
Viewgroups
一個(gè)ViewGroup是一個(gè)android.view.Viewgroup類的對(duì)象。正如同它的名字表明的一樣，一個(gè)viewgroup是一個(gè)特殊的view對(duì)象，它的功能是去裝載和管理一組下層的view和其他viewgroup，Viewgroup讓你可以為你的UI增加結(jié)構(gòu)并且將復(fù)雜的屏幕元素構(gòu)建成一個(gè)獨(dú)立的實(shí)體。
Viewgroup類作為一個(gè)基類為layout(布局)服務(wù)，layout--是一組提供屏幕界面通用類型的完全實(shí)現(xiàn)子類。layout讓你可以為一組view構(gòu)建一個(gè)結(jié)構(gòu)。
一個(gè)樹(shù)形結(jié)構(gòu)的界面
在Android平臺(tái)上，你用view樹(shù)和viewgroup節(jié)點(diǎn)來(lái)定義一個(gè)Activity的UI，就如同下面圖表一樣。這個(gè)樹(shù)可以如你需要那樣簡(jiǎn)單或者復(fù)雜，并且你可以使用Android的預(yù)定義widget和layout或者你自定義的view類型來(lái)構(gòu)建它。
一個(gè)view和viewgroup樹(shù)的樣例:
Picture 4 Android UI - Tree structure
要將屏幕綁定一個(gè)樹(shù)以便于渲染，你的Activity調(diào)用它的setContentView()方法并且傳遞一個(gè)參數(shù)給根節(jié)點(diǎn)對(duì)象。一旦Android系統(tǒng)獲得了根節(jié)點(diǎn)的參數(shù)，它就可以直接通過(guò)節(jié)點(diǎn)來(lái)無(wú)效化，測(cè)距和繪制樹(shù)。當(dāng)你的Activity被激活并且獲得焦點(diǎn)時(shí)，系統(tǒng)會(huì)通知你的activity并且請(qǐng)求根節(jié)點(diǎn)去測(cè)距并繪制樹(shù)，根節(jié)點(diǎn)就會(huì)請(qǐng)求它的子節(jié)點(diǎn)去繪制它們自己，同時(shí)，每個(gè)樹(shù)上的viewgroup節(jié)點(diǎn)負(fù)責(zé)繪制它的直接子節(jié)點(diǎn)。
正如之前提到的，每個(gè)view group都有測(cè)量它的有效空間，布局它的子對(duì)象，并且調(diào)用每個(gè)子對(duì)象的Draw()方法去繪制它們自己。子對(duì)象可能會(huì)請(qǐng)求獲得一個(gè)它們?cè)诟笇?duì)象中的大小和位置，但是父對(duì)象對(duì)于每個(gè)子對(duì)象的大小和位置有最終的決定權(quán)。
LayoutParams：一個(gè)子對(duì)象如何指定它的位置和大小
每個(gè)viewgroup類都會(huì)使用一個(gè)繼承于Viewgroup.LayoutParams的嵌套類。這個(gè)子類包含了一系列的屬性類型，這些屬性類型定義一個(gè)子對(duì)象位置和大小，與view group類相適應(yīng)。
layoutparams的一個(gè)樣例：
要注意的是，每個(gè)LayoutParams子類都有它自己賦值的語(yǔ)法。每個(gè)子元素必須定義適用于它們父對(duì)象的LayoutParams，盡管父對(duì)象可能會(huì)為子元素定義不同的LayoutParams。
所有的viewgroup都包括寬和高。很多還包括邊界的定義(margin和border)。你可以非常精確地描述寬和高，盡管你并不想經(jīng)常這么做。更多時(shí)候你希望你的view自行調(diào)整到適應(yīng)內(nèi)容大小，或者適應(yīng)容器大小。
Android 界面元素與Swing界面元素的比較
|
Android 界面元素 |
Swing 界面元素 |
|
Activities |
Frame |
|
Views |
Components |
|
TextViews |
Labels |
|
EditTexts |
TextFields |
|
Buttons |
Buttons |
Android和Swing的監(jiān)聽(tīng)者設(shè)置也幾乎一樣：
3.2.2 通用布局對(duì)象
下面為在你的應(yīng)用中為最普遍的view groups。這里介紹每種類型的一些基本信息;更深入的細(xì)節(jié)，請(qǐng)看每章前面的鏈接參考頁(yè)。
FrameLayout
FrameLayout是最簡(jiǎn)單的一個(gè)布局對(duì)象。它被定制為你屏幕上的一個(gè)空白備用區(qū)域，之后你可以在其中填充一個(gè)單一對(duì)象 — 比如，一張你要發(fā)布的圖片。所有的子元素將會(huì)固定在屏幕的左上角;你不能為FrameLayout中的一個(gè)子元素指定一個(gè)位置。后一個(gè)子元素將會(huì)直接在前一個(gè)子元素之上進(jìn)行覆蓋填充，把它們部份或全部擋住(除非后一個(gè)子元素是透明的)。
LinearLayout
LinearLayout以你為它設(shè)置的垂直或水平的屬性值，來(lái)排列所有的子元素。所有的子元素都被堆放在其它元素之后，因此一個(gè)垂直列表的每一行只會(huì)有一個(gè)元素，而不管他們有多寬，而一個(gè)水平列表將會(huì)只有一個(gè)行高(高度為最高子元素的高度加上邊框高度)。LinearLayout保持子元素之間的間隔以及互相對(duì)齊(相對(duì)一個(gè)元素的右對(duì)齊、中間對(duì)齊或者左對(duì)齊)。
LinearLayout還支持為單獨(dú)的子元素指定weight。好處就是允許子元素可以填充屏幕上的剩余空間。這也避免了在一個(gè)大屏幕中，一串小對(duì)象擠成一堆的情況，而是允許他們放大填充空白。子元素指定一個(gè)weight值，剩余的空間就會(huì)按這些子元素指定的weight比例分配給這些子元素。默認(rèn)的weight值為0。例如，如果有三個(gè)文本框，其中兩個(gè)指定了weight值為1，那么，這兩個(gè)文本框?qū)⒌缺壤胤糯螅⑻顫M剩余的空間，而第三個(gè)文本框不會(huì)放大。
下面的兩個(gè)窗體采用LinearLayout，包含一組的元素：一個(gè)按鈕，幾個(gè)標(biāo)簽，幾個(gè)文本框。兩個(gè)窗體都為布局做了一番修飾。文本框的width被設(shè)置為FILL_PARENT;其它元素的width被設(shè)置為WRAP_CONTENT。默認(rèn)的對(duì)齊方式為左對(duì)齊。左邊的窗體沒(méi)有設(shè)置weight(默認(rèn)為0);右邊的窗體的comments文本框weight被設(shè)置為1。如果Name文本框也被設(shè)置為1，那么Name和Comments這兩個(gè)文本框?qū)?huì)有同樣的高度。
在一個(gè)水平排列的LinearLayout中，各項(xiàng)按他們的文本基線進(jìn)行排列(第一列第一行的元素，即最上或最左，被設(shè)定為參考基線)。因此，人們?cè)谝粋€(gè)窗體中檢索元素時(shí)，就不需要七上八下地讀元素的文本了。我們可以在layout的XML中設(shè)置android:baselineAligned="false"，來(lái)關(guān)閉這個(gè)設(shè)置。[!--empirenews.page--]
TableLayout
TableLayout將子元素的位置分配到行或列中。android的一個(gè)TableLayout由許多的TableRow組成，每個(gè)TableRow都會(huì)定義一個(gè)row(事實(shí)上，你可以定義其它的子對(duì)象，這在下面會(huì)解釋到)。TableLayout容器不會(huì)顯示row、cloumns或cell的邊框線。每個(gè)row擁有0個(gè)或多個(gè)的cell;每個(gè)cell擁有一個(gè)View對(duì)象。表格由列和行組成許多的單元格。表格允許單元格為空。單元格不能跨列，這與HTML中的不一樣。下圖顯示了一個(gè)TableLayout，圖中的虛線代表不可視的單元格邊框。
列可以被隱藏，也可以被設(shè)置為伸展的從而填充可利用的屏幕空間，也可以被設(shè)置為強(qiáng)制列收縮直到表格匹配屏幕大小。對(duì)于更詳細(xì)信息，可以查看這個(gè)類的參考文檔。 AbsoluteLayout AbsoluteLayout可以讓子元素指定準(zhǔn)確的x/y坐標(biāo)值，并顯示在屏幕上。(0, 0)為左上角，當(dāng)向下或向右移動(dòng)時(shí)，坐標(biāo)值將變大。AbsoluteLayout沒(méi)有頁(yè)邊框，允許元素之間互相重疊（盡管不推薦）。我們通常不推薦使用AbsoluteLayout，除非你有正當(dāng)理由要使用它，因?yàn)樗菇缑娲a太過(guò)剛性，以至于在不同的設(shè)備上可能不能很好地工作。 RelativeLayout RelativeLayout[!--empirenews.page--]允許子元素指定他們相對(duì)于其它元素或父元素的位置（通過(guò)ID指定）。因此，你可以以右對(duì)齊，或上下，或置于屏幕中央的形式來(lái)排列兩個(gè)元素。元素按順序排列，因此如果第一個(gè)元素在屏幕的中央，那么相對(duì)于這個(gè)元素的其它元素將以屏幕中央的相對(duì)位置來(lái)排列。如果使用XML來(lái)指定這個(gè)layout，在你定義它之前，被關(guān)聯(lián)的元素必須定義。 這是一個(gè)RelativeLayout例子，其中有可視的和不可視的元素?；A(chǔ)的屏幕layout對(duì)象是一個(gè)RelativeLayout對(duì)象。 這個(gè)視圖顯示了屏幕元素的類名稱，下面是每個(gè)元素的屬性列表。這些屬性一部份是由元素直接提供，另一部份是由容器的LayoutParams成員（RelativeLayout的子類）提供。RelativeLayout參數(shù)有width，height，below，alignTop，toLeft，padding和marginLeft。注意，這些參數(shù)中的一部份，其值是相對(duì)于其它子元素而言的，所以才RelativeLayout。這些參數(shù)包括toLeft，alignTop和below，用來(lái)指定相對(duì)于其它元素的左，上和下的位置。 Summary of Important View Groups 重要View Group摘要 These objects all hold child UI elements. Some provide visible UI, and others only handle child layout. 這些對(duì)象擁有UI子元素。一些提供可視的UI，另一些只處理子元素的布局。
3.2.3數(shù)據(jù)綁定
有些View groups會(huì)有UI。這些對(duì)象通常是AdapterView類的子類.例如包括圖庫(kù)和列表視圖， 它們具有兩個(gè)共同的職責(zé)： · 填充布局?jǐn)?shù)據(jù) · 處理用戶操作 填充布局?jǐn)?shù)據(jù)通常通過(guò)把這個(gè)類綁定到一個(gè)Adapter來(lái)完成，Adapter從某個(gè)地方獲取它的數(shù)據(jù)，或者是代碼提供的一個(gè)列表，或者是來(lái)自設(shè)備數(shù)據(jù)庫(kù)的查詢結(jié)果。 // Get a Spinner and bind it to an ArrayAdapter that // references a String array. Spinner s1 = (Spinner) findViewById(R.id.spinner1); ArrayAdapter adapter = ArrayAdapter.createFromResource( this, R.array.colors, android.R.layout.simple_spinner_item); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); s1.setAdapter(adapter); // Load a Spinner and bind it to a data query. private static String[] PROJECTION = new String[] { People._ID, People.NAME }; Spinner s2 = (Spinner) findViewById(R.id.spinner2); Cursor cur = managedQuery(People.CONTENT_URI, PROJECTION, null, null); SimpleCursorAdapter adapter2 = new SimpleCursorAdapter(this, android.R.layout.simple_spinner_item, // Use a template // that displays a // text view cur, // Give the cursor to the list adatper new String[] {People.NAME}, // Map the NAME column in the // people database to... new int[] {android.R.id.text1}); // The "text1" view defined in // the XML template adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); s2.setAdapter(adapter2); 注意：使用CursorAdapter時(shí)，必須有People._ID， 否則將會(huì)發(fā)生異常。 處理用戶操作 Android通過(guò)設(shè)置類的AdapterView.OnItemClickListener 成員到一個(gè)監(jiān)聽(tīng)者并捕捉用戶的操作事件，來(lái)處理用戶的操作。 // Create a message handling object as an anonymous class. private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { // Display a messagebox. showAlert("You‘ve got an event", "Clicked me!", "ok", false); } }; // Now hook into our object and set its onItemClickListener member // to our class handler object. mHistoryView = (ListView)findViewById(R.id.accept_button); mHistoryView.setOnItemClickListener(mMessageClickedHandler); |
下載文檔
