Android用户界面布局(layouts)
Android用戶(hù)界面布局(layouts)
?
備注：view理解為視圖
?
一個(gè)布局定義了用戶(hù)界面的可視結(jié)構(gòu)，比如activity的UI或是APP widget的UI，我們可以用下面兩種方式來(lái)聲明布局：
(1)??在XML文件中聲明UI元素，Android提供一種直觀的XML詞匯(vocabulary，應(yīng)該是指屬性表)來(lái)對(duì)應(yīng)View類(lèi)及其子類(lèi)，比如那些用于部件(widget)和布局的詞匯。
(2)??在運(yùn)行時(shí)實(shí)例化(初始化)布局元素，我們的應(yīng)用能夠以編程的方式創(chuàng)建View和ViewGroup對(duì)象(和操縱它們的屬性)。
?
Android應(yīng)用框架(framework)使我們能夠很靈活使用這兩種方式來(lái)聲明和管理我們應(yīng)用的UI，比如，我們可在XML中聲明我們應(yīng)用默認(rèn)的布局，包括將在它們和它們屬性中顯示的屏幕元素。然后我們可以在應(yīng)用中增加代碼來(lái)修改屏幕對(duì)象的狀態(tài)，包括那些在XML和運(yùn)行時(shí)聲明的。
?
在XML中聲明UI的好處在于使我們可以更好地把控制行為的代碼和應(yīng)用程序的外觀分開(kāi)。我們UI描述在應(yīng)用代碼之外，這意味著我們能夠在不修改代碼和重新編譯的情況下修改UI。比如，我們能夠?yàn)椴煌聊环较?橫向或是縱向)、不同的屏幕大小和多國(guó)語(yǔ)言創(chuàng)建XML布局。另外，在XML中聲明布局使得我們的UI更直觀，所以更容易調(diào)試問(wèn)題。就這點(diǎn)而言，本文的重點(diǎn)在告訴我們?nèi)绾卧赬ML中聲明布局，如果我們對(duì)在運(yùn)行時(shí)初始化View對(duì)象，可參考ViewGroup和View類(lèi)參考文獻(xiàn)。
?
總的來(lái)說(shuō)，定義UI元素的XML詞匯緊密遵循類(lèi)和方法的結(jié)構(gòu)與命名，UI元素名對(duì)應(yīng)類(lèi)型，而屬性名對(duì)應(yīng)方法名。確切地說(shuō)，由于它們之間的一致性，我們可以從類(lèi)方法名猜出XML屬性，或者可以通過(guò)xml元素猜出類(lèi)方法。然而，請(qǐng)注意并不是所有的詞匯都是相同的，比如，EditText元素有一個(gè)text屬性對(duì)應(yīng)的是
EditText.setText()這個(gè)方法。
?
1.?????寫(xiě)XML(Write the XML)
使用Android的XML詞匯，采用一系列嵌套的元素，我們能夠快速設(shè)計(jì)出UI布局和它們包含的屏幕元素，我們也可以采用相同的方式在HTML中創(chuàng)建網(wǎng)頁(yè)網(wǎng)站(web pages)。
?
每個(gè)布局文件必須明確的包含一個(gè)根元素，該元素必須是一個(gè)View或是ViewGroup對(duì)象。一旦我們定義了根元素后，就可以增加額外的布局對(duì)象或是widget作為子元素來(lái)逐步構(gòu)建了我們布局的視圖層級(jí)。比如，下面是使用一個(gè)垂直LinearLayout來(lái)包含一個(gè)TextView和一個(gè)button的XML布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
? ? ? ? ? ? ? android:layout_width="fill_parent"
? ? ? ? ? ? ? android:layout_height="fill_parent"
? ? ? ? ? ? ? android:orientation="vertical">
? ? <TextView android:id="@+id/text"
? ? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? android:text="Hello, I am a TextView"/>
? ? <Button android:id="@+id/button"
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:text="Hello, I am a Button"/>
</LinearLayout>
我們?cè)赬ML中聲明了布局后，保存為xml擴(kuò)展名的文件，次文件保存在我們Android工程的res/layout/文件夾下，這樣它將正確編譯。
?
2.?????加載XML資源(Load the XML Resource)
在編譯我們APP時(shí)，每個(gè)布局文件被編譯成一個(gè)View資源，我們就能在代碼中加載這些布局資源，這在Activity.onCreate()回調(diào)函數(shù)中實(shí)現(xiàn)。調(diào)用setContentView()函數(shù)，并將布局資源的引用R.layout.layout_file_name傳遞給它。比如，如果我們的XML布局保存在main_layout.xml文件中，我們可以像下面這樣在activity中加載資源：
publicvoid onCreate(Bundle savedInstanceState){
? ? super.onCreate(savedInstanceState);
? ? setContentView(R.layout.main_layout);
}
當(dāng)activity被啟動(dòng)的時(shí)候，Android framework調(diào)用我們這個(gè)activity的onCreate回調(diào)函數(shù)。
?
3.?????屬性(Attributes)
每個(gè)View和ViewGroup對(duì)象支持它們各自的一系列XML屬性，一些屬性針對(duì)于具體的View對(duì)象(比如，TextView支持textSize屬性)，這些屬性也被哪些擴(kuò)展自這些類(lèi)的View對(duì)象繼承(也就是View和ViewGroup的屬性，對(duì)繼承了它們的子類(lèi)也有效)。有些屬性對(duì)于所有的View對(duì)象時(shí)公共的，因?yàn)樗鼈兪抢^承之根View類(lèi)(如id屬性)。另外，一些參數(shù)被作為“布局參數(shù)(layout parameters)”，它們描述View對(duì)象的某一布局方向(certain layout orientations)，布局參數(shù)由對(duì)象的父對(duì)象ViewGroup定義。
?
4.?????唯一標(biāo)識(shí)符(ID)
任何View對(duì)象都有一個(gè)與它關(guān)聯(lián)的整數(shù)ID，這可以在View樹(shù)中唯一地標(biāo)識(shí)每個(gè)View對(duì)象。當(dāng)APP編譯時(shí)，這個(gè)ID被引用作為一個(gè)整數(shù)，但I(xiàn)D通常被分配在布局XML文件中作為一個(gè)字符串(string)，放在id屬性中。這是所有View對(duì)象公共的XML屬性(被View類(lèi)定義)和我們將經(jīng)常使用它，一個(gè)ID的語(yǔ)法，在XML標(biāo)記如下：
android:id="@+id/my_button"
以@符號(hào)開(kāi)始的字符串告訴XML解析器應(yīng)解析和展開(kāi)ID字符串的剩余部分并識(shí)別它作為一個(gè)ID資源。+符號(hào)表示這是一個(gè)新資源名稱(chēng)，必須被創(chuàng)建和增加到我們的資源中(在R.java文件中)。Android framework還提供其他的ID資源，當(dāng)引用一個(gè)Android資源ID，我們不需要這個(gè)+符號(hào)，當(dāng)時(shí)必須增加android包命名空間(package namespace)，像下面這樣：
android:id="@android:id/empty"
在適當(dāng)?shù)牡胤绞褂胊ndroid包命名空間，我們現(xiàn)在引用的ID是來(lái)之a(chǎn)ndroid.R資源類(lèi)，而不是本地資源類(lèi)(本地的資源類(lèi)是<包名>.R，是自動(dòng)生成的)。
?
為了創(chuàng)建視圖和在應(yīng)用中引用它們，一個(gè)常用的模式如下：
(1)??在布局文件中定義一個(gè)view/widget和為其分配一個(gè)唯一的ID:
<Buttonandroid:id="@+id/my_button"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="@string/my_button_text"/>
(2)??然后創(chuàng)建view對(duì)象的實(shí)例并從布局中獲取它(一般在onCreate()方法中)
Button myButton= (Button) findViewById(R.id.my_button);
當(dāng)創(chuàng)建一個(gè)相對(duì)布局(RelativeLayout)時(shí)，定義view對(duì)象的ID是非常重要的。在相對(duì)布局中，兄弟view能夠通過(guò)唯一的ID引用來(lái)定義它們之間布局的相對(duì)位置。
?
一個(gè)ID在整個(gè)視圖數(shù)中不需要是唯一的，但必須是我們要搜索的數(shù)部分是唯一的(通常是整棵樹(shù)，所以可能的話最好是整棵樹(shù))。
?
?
5.?????布局參數(shù)(Layout Parameters)
名為layout_something的XML布局屬性定義了view的布局參數(shù)，這些參數(shù)適用于view所在的ViewGroup。
?
每個(gè)ViewGroup類(lèi)實(shí)現(xiàn)一個(gè)擴(kuò)展自ViewGroup.LayoutParams的嵌套類(lèi)，該子類(lèi)包括定義了每個(gè)子view大小和位置的屬性類(lèi)型，適用于視圖組(view group)。正如我們?cè)谙聢D看到的，父視圖組定義了每個(gè)子視圖(包括子視圖組，比如這里的子視圖有下圖的View，子視圖組有下圖的RelativeLayout)的布局參數(shù)。
圖1
注意每個(gè)LayoutParams子類(lèi)有它自己設(shè)置值的語(yǔ)法，每個(gè)子元素必須定義適用于其父元素的LayoutParams，雖然父元素也可以為它的子元素定義不同的LayoutParams。
?
所有的視圖組都包含一個(gè)寬度和高度(layout_width和layout_height)，且每個(gè)視圖都要定義它們。很多LayoutParams頁(yè)可以包括可選的margins(頁(yè)邊的空白)和borders(邊距)。
?
我們可以使用精確的度量指定寬度和高度，盡管我們可能很少這么使用。更常見(jiàn)的是我們將使用下面的常數(shù)設(shè)置寬度或是高度：
(1)??wrap_content?告訴我們view調(diào)整自身內(nèi)容所需要的尺寸來(lái)調(diào)整自己的大小。
(2)?? fill_parent?(從API 8版本開(kāi)始重命名為match_parent?)告訴我們的視圖和它的父視圖組一樣大小就可以。
?
通常，不推薦使用比如是像素這樣的絕對(duì)單位來(lái)指定布局寬度和高度，相反，使用比如是和密度無(wú)關(guān)的像素單元(density-independent pixel units，dp)相對(duì)度量。使用wrap_content或fill_parent是更好的辦法，因?yàn)檫@樣它有助于確保我們的應(yīng)用程序在不同屏幕大小的設(shè)備上正常顯示，Android系統(tǒng)能夠接受的單位類(lèi)型在Available Resources文檔中定義
(http://developer.android.com/guide/topics/resources/available-resources.html#dimension)
?
6.?????布局位置(Layout Position)
?
View的幾何形狀是矩形，一個(gè)view的位置采用一對(duì)left和top坐標(biāo)來(lái)表示，view的二維(可理解為尺寸)用width和height來(lái)表示，位置和尺寸的單位是像素。
?
可調(diào)用方法getLeft()和getTop()來(lái)獲取view的位置，前者返回代表view的矩形的左或是X坐標(biāo)，后者返回代表view的矩形的上或是Y坐標(biāo)。這兩個(gè)方法都返回相對(duì)于其父對(duì)象的位置。比如，當(dāng)getLeft()返回20，意味著view位于其父對(duì)象左邊緣以右的20像素處。
?
另外，提供了一些避免沒(méi)必要計(jì)算的方法getRight()和getBottom()，這些方法返回代表view的矩形的右邊和下邊邊緣的坐標(biāo)。比如調(diào)用gerRight()相當(dāng)于這樣的計(jì)算：getLeft() + getWidth()。
?
7.?????大小、內(nèi)邊距和外邊距(Size,Padding and Margins)
View的大小用一個(gè)寬度和高度來(lái)描述，實(shí)際上，view有兩組寬度和高度的值。
?
第1對(duì)被稱(chēng)為測(cè)量寬度和測(cè)量高度(measured width and measured height)，這些長(zhǎng)度定義一個(gè)view在其父view中的大小。測(cè)量尺寸(measured dimensions)能夠調(diào)用getMeasuredWidth()和getMeasuredHeight()。
?
第2對(duì)被簡(jiǎn)稱(chēng)為寬度和高度(width and height)，或是有時(shí)候被稱(chēng)為繪制寬度和高度(drawing width and drawing height)。這些尺寸定義了view在屏幕上繪制和布局時(shí)的實(shí)際大小，這些值可能，但不一定和測(cè)量寬度和測(cè)量高度相同，這個(gè)寬度和高度通過(guò)調(diào)用getWidth()和getHeight()獲得。
?
為了測(cè)量view的尺寸，一個(gè)view必須把它的padding考慮進(jìn)來(lái)，padding用像素來(lái)表示，一個(gè)view的上下左右部分都有padding。通過(guò)一個(gè)指定數(shù)量像素的padding來(lái)位移view的內(nèi)容。比如，包含2個(gè)像素點(diǎn)的一個(gè)左padding將使view的內(nèi)容相對(duì)于左邊界向右推移2個(gè)像素。Padding通過(guò)調(diào)用setPadding(int, int, int, int)方法來(lái)設(shè)置和調(diào)用getPaddingLeft()、getPaddingTop()、getPaddingRight()和getPaddingBottom()來(lái)查詢(xún)。
?
雖然一個(gè)view能夠定義一個(gè)padding，但它不提供任何對(duì)margins(外邊距)的支持。但是view groups提供這樣的支持，參考ViewGroup和 ViewGroup.MarginLayoutParams以獲取更多的信息。
?
為獲取更多關(guān)于尺寸的信息，請(qǐng)看Dimension Values
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
?
8.?????常見(jiàn)布局(Common Layouts)
ViewGroup類(lèi)的子類(lèi)提供獨(dú)特的方式來(lái)顯示嵌入到ViewGroup中view。下面是一些常見(jiàn)的布局類(lèi)型內(nèi)置在Android平臺(tái)中。
?
注意：雖然我們可以在另一個(gè)布局中嵌入一個(gè)或是多個(gè)布局來(lái)完成我們的UI設(shè)計(jì)，我們應(yīng)盡可能保持我們的布局層次結(jié)構(gòu)盡可能淺。有更少嵌套的布局在繪制時(shí)更快(寬視圖層次結(jié)構(gòu)比深度視圖層次結(jié)構(gòu)更好，a wide view hierarchy is better than a deepview hierarchy)。
圖2
(1)??線性布局(Linear Layout)
線性布局以一個(gè)單一的水平或是垂直的排列方式來(lái)組織里面的view，如果布局窗口的長(zhǎng)度超過(guò)屏幕的長(zhǎng)度，它就創(chuàng)建一個(gè)滾動(dòng)條。
?
(2)??相對(duì)布局(Relative Layout)
使我們能夠指定每個(gè)子view之間的相對(duì)位置(比如子view A在子view B左邊的相對(duì)位置)，或是相對(duì)于父view的位置(和父view的頂部對(duì)齊)。
?
(3)??網(wǎng)頁(yè)視圖(Web View)
顯示網(wǎng)頁(yè)。
?
9.?????建立適配器的布局(Building Layouts with an Adapter)
當(dāng)我們布局的內(nèi)容是動(dòng)態(tài)的或是不是預(yù)設(shè)的，我們可以使用繼承自AdapterView的布局來(lái)在運(yùn)行時(shí)填充包含有views的布局。一個(gè)AdapterView的子類(lèi)使用一個(gè)Adapter來(lái)綁定數(shù)據(jù)到它的布局中。這個(gè)Adapter表現(xiàn)為數(shù)據(jù)源和AdapterView布局的中間人，這個(gè)Adapter獲取數(shù)據(jù)(比如從一個(gè)數(shù)據(jù)或是一個(gè)數(shù)據(jù)庫(kù)查詢(xún))和將每個(gè)條目轉(zhuǎn)換為一個(gè)能被添加到AdapterView布局中的view。
?
依靠一個(gè)adapter支持的常見(jiàn)布局包括：
圖3
(1)??列表視圖(List View)
顯示一個(gè)滾動(dòng)的單一列清單。
?
(2)??網(wǎng)格視圖(Grid View)
顯示一個(gè)滾動(dòng)列和行的網(wǎng)格。
?
10.? 向一個(gè)適配器view填充數(shù)據(jù)(Filling an adapter view with data)
我們能夠通過(guò)綁定AdapterView實(shí)例到一個(gè)Adapter來(lái)填充像ListView或是GridView這樣的AdapterView，Adapter從一個(gè)外部數(shù)據(jù)源獲取數(shù)據(jù)和創(chuàng)建一個(gè)代表了每個(gè)輸入條目的view。
?
Android提供了多個(gè)Adapter子類(lèi)，這些子類(lèi)有助于獲取不同類(lèi)型的數(shù)據(jù)和為一個(gè)AdapterView建立view，兩個(gè)最常見(jiàn)的adapters如下：
(1)??ArrayAdapter(數(shù)組適配器)
當(dāng)數(shù)據(jù)源是一個(gè)數(shù)組時(shí)使用這個(gè)適配器，默認(rèn)情況，ArrayAdapter通過(guò)在每個(gè)數(shù)組項(xiàng)上調(diào)用toString()來(lái)為每個(gè)數(shù)組項(xiàng)創(chuàng)建一個(gè)view和將這些內(nèi)容保存在TextView。
?
比如，如果我們想要在ListView中顯示一個(gè)字符串?dāng)?shù)組，使用構(gòu)造函數(shù)初始化一個(gè)新的ArrayAdapter來(lái)指定每個(gè)字符串和這個(gè)字符串?dāng)?shù)據(jù)的布局：
?
ArrayAdapter adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray);這個(gè)構(gòu)造函數(shù)的參數(shù)如下：
This：我們APP的上下文(context)。
android.R.layout.simple_list_item_1：布局，包含一個(gè)TexView(文本框)中數(shù)組的每個(gè)字符串。
myStringArray：字符串?dāng)?shù)據(jù)。
?
然后簡(jiǎn)單的調(diào)用我們ListView的setAdapter()，如下：
ListView listView = (ListView) findViewById(R.id.listview); listView.setAdapter(adapter);如果要自定義每項(xiàng)的外觀，我們可以重寫(xiě)(override)我們保存在數(shù)組中的對(duì)象的toString()方法，或者，為不同于TextView的對(duì)象的每一項(xiàng)創(chuàng)建view，徐璈擴(kuò)展ArrayAdapter類(lèi)和重寫(xiě)getView()來(lái)獲得我們想要的每一項(xiàng)的view類(lèi)型。
?
(2)??SimpleCursorAdapter
當(dāng)我們從光標(biāo)處獲取數(shù)據(jù)時(shí)使用這個(gè)adapter，在使用SimpleCursorAdapter時(shí)，我們必須在光標(biāo)處為每行指定要使用布局，在光標(biāo)處的列應(yīng)該插入這個(gè)布局的views。比如，如果我們要?jiǎng)?chuàng)建一個(gè)人的名字和電話號(hào)碼列表，我們能夠執(zhí)行一個(gè)返回一個(gè)光標(biāo)的查詢(xún)，這個(gè)查詢(xún)的結(jié)果包括每個(gè)人的一行和名字與電話號(hào)碼的列。然后我們可以創(chuàng)建一個(gè)字符串?dāng)?shù)組來(lái)指定光標(biāo)處開(kāi)始的哪些列，這些列對(duì)應(yīng)于每個(gè)結(jié)果中布局的內(nèi)容，創(chuàng)建一個(gè)整數(shù)數(shù)組來(lái)指定每一列重要放置的views。
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int[] toViews = {R.id.display_name, R.id.phone_number};當(dāng)我們實(shí)例化SimpleCursorAdapter，傳遞布局用于每個(gè)結(jié)果，cursor參數(shù)包含了結(jié)果，另外兩個(gè)參數(shù)是兩個(gè)數(shù)組：
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); ListView listView = getListView(); listView.setAdapter(adapter);SimpleCursorAdapter然后在光標(biāo)處創(chuàng)建一個(gè)view，使用提供的布局R.layout.person_name_and_number將每個(gè)fromColums項(xiàng)插入到對(duì)應(yīng)的toView視圖中。
?
如果在我們APP聲明周期之內(nèi)，我們改變了由adapter讀取的底層數(shù)據(jù)，我們應(yīng)該調(diào)用notifyDataSetChanged()，這將通知這個(gè)視圖數(shù)據(jù)已經(jīng)改變，它應(yīng)該刷新自己。
?
11.? 處理點(diǎn)擊事件(Handling click events)
通過(guò)實(shí)現(xiàn)AdapterView.OnItemClickListener接口，我們可以響應(yīng)一個(gè)AdapterView每一項(xiàng)的點(diǎn)擊事件，比如：
// 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) {// Do something in response to the click} };listView.setOnItemClickListener(mMessageClickedHandler);?
?
參考鏈接：
Layouts
http://developer.android.com/guide/topics/ui/declaring-layout.html
?
XML布局
http://weimingtom.iteye.com/blog/1276406
?
android2.2官方開(kāi)發(fā)手冊(cè)(02-01)-DeclaringLayout-設(shè)計(jì)布局
http://blog.csdn.net/forlong401/article/details/6295024
?
?
總結(jié)
以上是生活随笔為你收集整理的Android用户界面布局(layouts)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 并不是所有的程序员都适合做技术管理
- 下一篇： Android XML使用的学习记录