引言

上篇 可以說是一個分水嶺，它標志著我們從Android應(yīng)用程序理論進入實踐，我們拿起手術(shù)刀對默認的“Hello World！”程序進行了3個手術(shù)，我們清楚了“Hello world！”是如何實現(xiàn)顯示在屏幕上的，而且我們知道不僅可以根據(jù)布局文件main.xml來初始化屏幕，還可編程地進行。以后基本我們都會以實踐的方式來深入Android開發(fā)。我們這次深入分析Android應(yīng)用程序的布局文件，主要內(nèi)容如下：

• 1、用戶界面及視圖層次
• 2、Android中布局定義方法
• 3、編寫XML布局文件及加載XML資源
• 4、常用布局文件中元素的屬性
  • 4.1、ID屬性
  • 4.2、布局參數(shù)
• 5、布局位置&大小&補距&邊距
• 6、又是“Hello World！”
  • 6.1、又是“Hello World！”（一）
  • 6.2、又是“Hello World！”（二）
  • 6.3、又是“Hello World！”（三）

1、用戶界面及視圖層次

在通過“Hello World！”介紹Android中的布局問題之前，不得不先介紹一下Android中的用戶界面，因為布局問題也是用戶界面問題之一。在一個Android應(yīng)用程序中，用戶界面通過 View 和 ViewGroup 對象構(gòu)建。Android中有很多種Views和ViewGroups，他們都繼承自 View 類。 View 對象是Android平臺上表示用戶界面的基本單元。

View 類：

extends Object
implements Drawable.Callback ?? KeyEvent.Callback ?? AccessibilityEventSource

這個類表示用戶界面組件的基本構(gòu)建塊，一個View占據(jù)屏幕上的一個矩形區(qū)域，并負責(zé)繪圖和事件處理。 View 類是 widgets 的基類， widgets 用于創(chuàng)建交互式UI組件（buttons、text fields等）。 View 類的直接子類 ViewGroup 類是 layouts 的基類， layouts 是不可見的容器用戶保持其他Views或者其他ViewGroups和定義它們的布局屬性。

一個 View 對象是一個數(shù)據(jù)結(jié)構(gòu)，它的屬性存儲屏幕上一個特定矩形區(qū)域的 布局參數(shù) 和 內(nèi)容 。一個 View 對象處理它自己的測度、布局、繪圖、焦點改變、滾動、鍵/手勢等與屏幕上矩形區(qū)域的交互。作為用戶界面中的對象，View也是與用戶交互的一個點且交互事件接收器。

在Android平臺上，你定義活動的UI使用的View和ViewGroup節(jié)點的層次結(jié)構(gòu)如下圖所示。根據(jù)你的需要這個層次樹可以是簡單的或復(fù)雜的，并且你能使用Android預(yù)定義的 widgets 和 layouts 集合，或者使用自定義的Views。

圖1、視圖層次結(jié)構(gòu)

為了將視圖層次樹呈現(xiàn)到屏幕上，你的活動必須調(diào)用 setContentView() 方法并且傳遞到根節(jié)點對象的引用。Android系統(tǒng)接收這個引用并使用它來驗證、測度、繪制樹。層次的根節(jié)點要求它的孩子節(jié)點繪制它自己——相應(yīng)地每個試圖組節(jié)點要求調(diào)用自己的孩子視圖去繪制他們自己。子視圖可能在父視圖中請求指定的大小和位置，但是父視圖對象有最終決定權(quán)（子視圖在哪個位置及多大）。因為它們是按序繪制的，如果元素有重疊的地方，重疊部分后面繪制的將在之前繪制的上面。

2、Android中布局定義方法

布局是一個活動中的用戶界面的架構(gòu)，它定義了布局結(jié)構(gòu)且存儲所有顯示給用戶的元素。有兩種方式可以聲明布局，這個我們在上文中已經(jīng)用了（對應(yīng) 上文 的“Hello World的手術(shù)（二）”、“Hello World的手術(shù)（三）”）。我們再重溫、總結(jié)一下：

• 方法一、在XML格式的布局文件中聲明UI 。Android提供了簡易的XML詞匯表對應(yīng)視圖類和其子類，諸如 widgets 和 layouts 。
• 方法二、在運行時實例化布局元素 。可以編程地創(chuàng)建View和ViewGroup對象，并操作他們的屬性。

Android框架給我們靈活地使用這兩個方法之一或兩個聲明和管理你的應(yīng)用程序的UI。例如，你可以用XML格式的布局文件定義應(yīng)用程序默認的布局，包括將顯示在屏幕的元素和屬性。然后你可以編程地修改屏幕上對象的狀態(tài)，包括定義在XML文件中的元素。

最常用的是方法一，即用一個XML的布局文件定義自己的布局和表達層次視圖。XML提供一種直觀的布局結(jié)構(gòu)，類似HTML。XML中的每個元素是一個View或者ViewGroup對象（或繼承自他們的對象）。View對象是樹中的葉子，ViewGroup對象是樹中的分支，這點可以從上面的視圖層次樹中可以看出。

在XML布局文件中聲明UI的優(yōu)點是：使 應(yīng)用程序的界面 與 控制它行為的代碼 更好地分離了。UI描述在應(yīng)用程序代碼之外，這意味著你可以修改或調(diào)整它而不用修改你的源碼并重新編譯。例如，你可以為不同的屏幕方向、不同的屏幕大小、不同的語言創(chuàng)建XML布局文件。此外，在XML中聲明布局更易地可視化你的UI結(jié)構(gòu)，因此更容易調(diào)試問題。

一個元素XML元素的名字對應(yīng)到一個Java類，因此一個 <TextView> 元素在你的UI中創(chuàng)建一個TextView，一個 <linearLayout> 元素創(chuàng)建一個LinearLayout的視圖組。當(dāng)你加載一個布局資源時，Android系統(tǒng)初始化這些運行時對象，對應(yīng)你的布局中的元素。XML元素的屬性對應(yīng)到一個Java類的方法。

3、編寫XML布局文件及加載XML資源

使用Android的XML詞匯，我們可以快速地設(shè)計UI布局及包含的屏幕元素，就像web頁面的HTML。每個布局文件必須包含一個根元素，根元素必須是一個View或ViewGroup對象。一旦你已經(jīng)定義了根元素，你可以添加額外的 layout 對象或 widgets 作為子元素，逐步地構(gòu)建一個視圖層次定義你的布局。例如，下面的XML布局文件使用了縱向的LinearLayout保存一個TextView和一個Button。

<? 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 >

布局文件以.xml為擴展名，保存在 res/layout/ 下面，它將會被正確地編譯。我們已經(jīng)定義好了布局文件，那它是怎么被加載的呢？當(dāng)我們編譯應(yīng)用程序時，每個XML布局文件被編譯成一個View資源。我們應(yīng)該在應(yīng)用程序代碼中加載布局資源，在 Activity.onCreate() 回調(diào)中通過調(diào)用 setContentView() 實現(xiàn)，以 R.layout.layout_ file_name 形式傳遞給它布局資源的引用。例如，如果你的XML布局保存為main_layout.xml，你應(yīng)該這樣加載它：
public void onCreate(Bundle savedInstanceState) {
??? super .onCreate(savedInstanceState);
??? setContentView.(R.layout.main_layout);
}
活動中的 onCreate() 回調(diào)方法，當(dāng)你的活動啟動時被Android框架調(diào)用（詳見 Android 開發(fā)之旅：組件生命周期（一） ，詳細介紹了活動組件的生命周期）。

4、常用布局文件中元素的屬性

每個View和ViewGroup對象支持他們自己的各種XML屬性。一些屬性特定于一個View對象（例如，TextView支持textSize屬性），但是這些屬性也被繼承自這個類的任何View對象繼承。一些屬性對所有View對象可用，因為他們從根 View 類繼承（諸如id屬性）。并且，其他屬性被考慮為“布局參數(shù)”，這些屬性描述特定View對象的特定布局方向，由對象的父ViewGroup對象定義。

4.1、ID屬性

每個View對象都有一個關(guān)聯(lián)的ID，來唯一標識它。當(dāng)應(yīng)用程序被編譯時，這個ID作為一個整數(shù)引用。但是ID通常是在布局XML文件中作為字符串分配的，作為元素的id屬性。這個XML屬性對所有的View對象可用且會經(jīng)常用到。XML中的ID語法如下：

android:id=" @+id/my_button "

字符串前的 @符號表示XML解析器應(yīng)該解析和擴展剩下的ID字符串 ，并把它作為ID資源。 +符號表示這是一個新的資源名字，它必須被創(chuàng)建且加入到我們的資源 （R.java文件，R是Resource）。Android框架提供一些其他的ID資源。當(dāng)引用一個 Android資源ID時，你不需要+符號，但是你必須添加android包名字空間，如下：

android:id=" @android:id/empty "

為了創(chuàng)建視圖和從應(yīng)用程序引用他們，通常的模式是：

1. 首先在布局文件中定義一個視圖/構(gòu)件對象并分配一個唯一的ID：
   < Button android : id = "@+id/my_button"
   ??????? android : layout_width = "wrap_content"
   ??????? android : layout_height = "wrap_content"
   ??????? android : text = "@string/my_button_text" />
2. 然后創(chuàng)建一個視圖對象實例并從布局中獲取它（典型的是在 onCreate() 方法中）：
   Button myButton = (Button) findViewById(R.id.my_button);

4.2、布局參數(shù)

名為 layout_ something 的XML布局屬性，為視圖定義適合于它所駐留的ViewGroup的布局參數(shù)。每個ViewGroup類實現(xiàn)一個擴展自 ViewGroup.LayoutParams 的嵌套類。這個子類包含為每個子視圖定義 大小 和 位置 的屬性類型，以適合于該視圖組。如下圖所示，父視圖組為每個子視圖定義布局參數(shù)（包括子視圖組）。

???
圖2、布局參數(shù)

注意每個LayoutParams子類有它自己的設(shè)置值的語法。每個子元素必須定義適合于它父視圖的LayoutParams，雖然它可能也為自己的子視圖定義不同LayoutParams。

所有的視圖組包括寬帶和高度（ layout_width 和 layout_height ），并且每個視圖要求要定義它們。許多LayoutParams也包括可選的邊距和邊界。你可以指定寬度和高度的具體值，雖然你可能并不想這樣做。更多地你將告訴視圖它的大小依據(jù)它內(nèi)容要求或跟父視圖組所允許的一樣大（分別用 wrap_content 和 fill_parent 值）。

5、布局位置&大小&補距&邊距

視圖的幾何形狀是一個矩形。視圖的位置表示為一個left和top的坐標對，尺寸（dimensions）表示為寬度和高度。位置和尺寸的單位是像素（pixel）。

可以通過調(diào)用 getLeft() 和 getTop() 檢索視圖的位置。前者返回視圖矩形坐標的left或x，后者返回視圖矩形坐標的right或y。這些方法返回相對于與其父視圖的相對位置，例如當(dāng) getLeft() 返回20，即認為視圖到其直接父視圖的左邊距離為20像素。

此外，提供了一些額外的方法如 getRight() 和 getButtom() 避免不必要的計算。這些方法返回視圖坐標的右邊距和底邊距。例如，調(diào)用 getRight() 等同于下面的計算： getLeft() + getWidth() 。

視圖的大小（size）也表示為寬度和高度，但跟上面尺寸（dimensions）是區(qū)別的。上面的尺寸定義視圖想在父視圖中占多大，視圖的尺寸可以通過 getMeasureWidth() 和 getMeasureHeight() 獲得。而視圖的大小（size）則表示視圖在屏幕上的實際大小，他們的值可以跟視圖尺寸的不一樣，但也不是非得這樣。視圖的大小可以通過 getWidth() 和 getHeight() 獲得。

為了估量視圖的尺寸，必須考慮它的補距（padding，即視圖內(nèi)容與視圖邊框的距離）。補距以像素表示視圖的left、top、right和bottom部分的空白。補距可以用來按特定數(shù)量的像素偏移視圖內(nèi)容。例如，左補距是2將輸出內(nèi)容離左邊框2像素。補距可以通過 setPadding(int, int, int, int) 方法設(shè)置和通過 getPaddingLeft() 、 getPaddingRight() 、 getPaddingTop() 、 getPaddingBottom() 來查詢。雖然一個視圖可以定義補距，但是它不支持邊距（margins）。然而，視圖組支持邊距。

6、又是“Hello World！”

下面我們通過幾個實驗來驗證和加深上述關(guān)于布局文件理解。

6.1、又是“Hello World！”（一）

驗證名為 layout_ something 的XML布局屬性，用 layout_width 和 layout_height 定義Button的寬度和高度，這兩個屬性也是每個視圖對象都必須要聲明定義的。驗證wrap_content與fill_parent的區(qū)別，其實區(qū)別從他們的單詞組成就可以看出：wrap——包，包裹等而content——內(nèi)容，則wrap_content表示視圖對象的高度/寬度正好包住內(nèi)容；fill——填充等而parent——父，則fill_parent表示填滿父視圖。

實驗設(shè)置為：在布局資源文件中定義兩個Button，id分別為button1、button2，button1的寬度和高度屬性都是wrap_content，button2的寬度和高度屬性都是fill_parent。main.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" >
??? < Button android : id = "@+id/button1"
??????????? android : layout_width = "wrap_content"
??????????? android : layout_height = "wrap_content"
??????????? android : text = "Hello, I am a Button" />
??? < Button android : id = "@+id/button2"
??? android : layout_width = "fill_parent"
??? android : layout_height = "fill_parent"
??? android : text = "Hello, I am a Button"
??? />
</ LinearLayout >
而HelloWorld.java文件代碼為：
package skynet.com.cnblogs.www;

import android.app.Activity;
import android.os.Bundle;
import android.widget.*; //注意：導(dǎo)入此包，或者是android.widget.Button;

public class HelloWorld extends Activity {
??? private CharSequence text=" new Hello! ";

/** Called when the activity is first created. */
??? @Override
??? public void onCreate(Bundle savedInstanceState) {
??????? super .onCreate(savedInstanceState);
??????? setContentView(R.layout.main);
??? }
}
運行可以得到如下圖結(jié)果：

圖3、驗證 驗證名為 layout_ something 的XML布局屬性

明顯可以看出button1的大小是剛好包住內(nèi)容“Hello，I am a Button”，而button2的大小則是填滿父視圖的大小。

6.2、又是“Hello World！”（二）

接下來我們視圖對象的通用屬性ID及再次驗證定義布局的兩種方式。（關(guān)于ID屬性——首先在布局文件中定義一個視圖/構(gòu)件對象并分配一個唯一的ID，然后創(chuàng)建一個視圖對象實例并從布局中獲取它（典型的是在 onCreate() 方法中））。

屬性實驗設(shè)置為：基本跟上面一樣，但是我們要編程地修改button1的text屬性。main.xml布局文件跟上面一樣，而主要是HelloWorld.java文件不一樣，它的代碼如下：
package skynet.com.cnblogs.www;

import android.app.Activity;
import android.os.Bundle;
//import android.widget.*;
import android.widget.Button;

public class HelloWorld extends Activity {
??? private CharSequence text=" new Hello! ";

/** Called when the activity is first created. */
??? @Override
??? public void onCreate(Bundle savedInstanceState) {
??????? super .onCreate(savedInstanceState);
??????? setContentView(R.layout.main);
??????? Button myButton=(Button)findViewById(R.id.button2);
??????? myButton.setText(text);
??? }
}
上面紅色粗體的兩行代碼就是編程地改變button2的text屬性，這體現(xiàn)了Android框架給我們靈活地使用上面兩個方法之一或兩個聲明和管理你的應(yīng)用程序的UI。運行結(jié)果如下圖所示:

圖4、驗證視圖對象的通用屬性Id的常用模式及編程地改變定義在XML布局文件中的Button的屬性

6.3、又是“Hello World！”（三）

?

?

驗證視圖對象的布局位置&大小&補距，實驗設(shè)置為：在實驗一的基礎(chǔ)上在main.xml中修改button1的布局位置、大小、補距等屬性。修改后的mian.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" >
??? < Button android : id = "@+id/button1"
??????????? android : layout_width = "wrap_content"
??????????? android : layout_height = "wrap_content" ???????????
??????????? android : text = "Hello, I am a Button"
??????????? android : width = "250dp"
??????????? android : height = "80dp"
??????????? android : padding = "20dp"
??????????? android : layout_margin = "20dp"
??????????? />
??? < Button android : id = "@+id/button2"
??? android : layout_width = "fill_parent"
??? android : layout_height = "fill_parent"
??? android : text = "Hello, I am a Button"
??? />
</ LinearLayout >
運行后結(jié)果如下所示：

圖5、 驗證視圖對象的布局位置&大小&補距

NOTE：上述代碼中布局位置&大小&補距的單位（如width="250dp"）。單位可以為px、in、mm、pt、dp、sp。

• px：pixels（像素）——對應(yīng)屏幕上實際的像素
• in：inches（英寸）——基于物理屏幕的大小
• mm：millimeters（毫米）——基于物理屏幕的大小
• pt：points（點）——英寸的1/72，基于基于物理屏幕的大小
• dp：density-independent pixels（獨立于密度的像素）——一個抽象的基于物理屏幕密度的單位。這些單位是相對于一個160dpi的屏幕，所有一個dp是160dpi屏幕上的一個點。dp到px的轉(zhuǎn)換比率根據(jù)屏幕密度改變，但不一定是成正比。
• sp：scale-independent pixels（規(guī)模獨立像素）——類似于dp單位，但是它也受用戶字體大小設(shè)置的影響。當(dāng)你指定字體大小時使用它，因為他們將根據(jù)屏幕和用戶設(shè)置調(diào)整。

Android 開發(fā)之深入分析布局文件&又是“Hello World！”