初識 GUI 界面

將一份創意落實到可執行的應用程序，背後需要的是從閱讀與寫作程序碼中累積的經驗，並有堅持理念、直到完成的耐心。

表達使用者界面:

我們可以先用前幾章教的方法設定並執行模擬器，看看模擬器運作後的結果：

我們看到一個文字欄位，上面有一串文字「Hello World, Bmi! 」。這就是 android 預設程序架構的范例。 
由於才剛開始實際接觸到 android 應用程序，我們先從簡單的開始：這一節中，我們的目標是將 「Hello World, Bmi! 」 換成別的文字。

那麼，「Hello World, Bmi! 」，這串字串藏在哪裡呢？

先打開 「res/layout/main.XML 」

代碼: 
    1  <?XML version="1.0" encoding="utf-8"?>

2  <LinearLayout XMLns:android=http://schemas.android.com/apk/res/android

    3     android:orIEntation="vertical"

    4     android:layout_width="fill_parent"

    5     android:layout_height="fill_parent"

    6     >

    7      <TextVIEw

    8          android:layout_width="fill_parent"

    9          android:layout_height="wrap_content"

    10        android:text="Hello World, Bmi"

    11        />

    12 </LinearLayout>

 

原來「Hello World, Bmi! 」字串就藏在「res/layout/main.XML 」這個檔桉的第 10 行中。我們只要簡單地將第 10 行修改成如下

代碼: 
android:text="Hello World, Bmi!”

 

再執行一次模擬器，就可以得到一個相似的應用程序，只是內文變成了我們剛剛修改的內容。

既然找到了「Hello World, Bmi! 」字串，我們就試著將「android:text 」屬性值從「Hello World, Bmi! 」改成「哈喽，BMI 」，然後執行看看吧。

代碼: 
android:text=" 哈喽，BMI"

結果發現 android 模擬器中文嘛也通，字型也相當漂亮。

要開始學習 android 應用程序確實很簡單吧？不過為了顯示「Hello World, Bmi 」，也用到了許多程序碼。到底這些程序碼有什麼含意呢？

我們馬上來學習 「main.xml 」這個 XML 界面描述檔的內涵吧。

Android 平台，使用者GUI 界面都是透過 ViewGroup 或 View 類別來顯示。ViewGroup 和 VIEw 是 Android 平台上最基本的使用者界面表達單元。我們可以透過程序直接呼叫的方法，調用描繪使用者界面，將螢幕上顯示的界面元素，與構成應用程序主體的程序邏輯，溷合在一起編寫。或是，也可以將界面顯示與程序邏輯分離，照著 android 提供的這個較優雅的方式，使用 XML 描述檔，來描述界面元件的組織。

講解

我們看到的「Hello World, Bmi 」就包含在「main.xml 」 這個檔桉中。接著，我們就直接分部份來講解這個「main.XML 」的內容：

第 1 行

代碼: 
    <?XML version="1.0" encoding="utf-8"?>

XML (Extensible Markup Language) 是一種標記描述語言，不管是語法還是看起來的樣子，都相當類似網頁所使用的 Html 標記語言。XML 被廣泛地運用在 Java 程序的設定中。「main.xml 」 文件裡，第一行是每個 XML 描述檔固定的開頭內容，用來指示這個文字檔桉是以 XML 格式描述的。

第 2, 6 與 12 行

代碼: 
    <LinearLayout XMLns:android="http://schemas.android.com/apk/res/android"></LinearLayout>

接著我們看到第一個標簽，與 Html 網頁標簽相當類似。

代碼: 
    <LinearLayout></LinearLayout>

" 線性版面配置"(LinearLayout) 標簽，使用了兩個「LinearLayout 」標簽，來表示一個界面元件的區塊。後頭的標簽前加上一個「/ 」 符號來表示結束標簽。" 線性版面配置" 所指的是包含在 「LinearLayout 」標簽中，所有元件的配置方式，是將一個接一個元件由上而下排隊排下來的意思。

代碼: 
     XMLns:android="http://schemas.android.com/apk/res/android"

xmlns 開頭的這串敘述，是用來宣告這個 XML 描述檔桉的的名稱空間(NameSpace) ，後面接的URL( 網址) ，表示這個描述檔桉會參照到 Android 名稱空間提供的定義。 所有 android 版面配置檔桉的最外層標簽中，都必須包含這個屬性。

注意標簽需要兩兩對稱。一個標簽「

引用: 
<linearlayout>

」在一串敘述的前頭，另一個標簽「

引用: 
</linearlayout>

」在敘述的末尾。 如果你修改過的標簽沒有閉合( 忘了加 < 、/ 、> 等符號) ，Eclipse 畫面上也會出現小小的警示符號來提醒你。

第 3-5 行

代碼: 
android:orIEntation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"
這些包含在「

代碼: 
<linearlayout>

」 標簽中的敘述被稱為「LinearLayout 」標簽的「屬性」。Android 應用程序在 layout 目錄中的標簽，大多數的屬性前都有一個「android: 」前綴。同一個界面元件的屬性之間，是以空白做區隔，因此事實上你也能將多個屬性寫在同一行。當 然，將屬性排成多行更易於閱讀。我們應該保持這個好習慣。

界面元件都有許多共同的屬性，例如界面元件的長，寬度設定屬性。Android 界面元件的寬度、長度設定屬性分別叫做「android:layout_width 」、「android:layout_height 」。兩個都設定為「fill_parent 」參數值。「fill_parent 」 如其名，所表達的的意思就是" 填滿整個上層元件" 。預設 LinearLayout 界面元件就會充滿整個屏幕空間。

界面元件彼此間也會有一些不同的屬性，例如「LinearLayout 」( 線性版面配置) 標簽的「android:orIEntation 」( 版面走向) 屬性。在此填入「vertical 」 ( 垂直) 屬性值，表示這個界面的版面配置方式是從上而下垂直地排列其內含的界面元件。

「android.view.ViewGroup 」 是各種布局配置(layout) 和視圖(VIEw) 元件的基礎類別。常見的實現有LinearLayout( 線性版面配置) 、FrameLayout( 框架版面配置) 、TableLayout( 表格版面配置) 、AbsoluteLayout( 絕對位置版面配置) 、RelativeLayout( 相對位置版面配置) 等。

雖然有這麼多種版面配置方式可以選用，但大多數的應用程序並不需特地去改變預設的 LinearLayout 的配置，只要專注在其中填入需要的界面元件即可。所以從第 7 行之後的內容才是一般應用程序開發時較常修改之處。

第 7 和 11 行

代碼: 
<TextVIEw/>

TextVIEw ( 文字檢視) 是我們看到的第一個熟悉的界面元件。其作用是顯示文字到屏幕上。你可能注意到這個標簽結尾使用了 「/> 」 符號。「/> 」符號表示這個XML 敘述中沒有內文，亦即此界面元件描述中不再包含其他界面元件，也表示這個界面元件就是這個螢幕中最小的組成單元 了。

第 8-10 行

代碼: 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Hello World, bmi"
   

我們來看看 TextVIEw 界面元件中包含了哪些屬性。

「android: layout_width 」和「android:layout_height 」我們剛剛已經學過了，分別代表寬度跟長度。「android: layout_width 」 的 「fill_parent 」 參數值表示寬度填滿整個上層界面元件( 即 LinearLayout 界面元件) 。「android:layout_height 」則是用上一個新的參數值「wrap_content 」( 包住內容) ，亦即隨著文字欄位行數的 不同而改變這個界面元件的高度。最後的「android:text 」 屬性則是 TextVIEw 界面元件的主要屬性，亦即文字欄位中顯示的文字內容。至於「@string/hello 」這段字串所代表的意義，馬上會接著在後面章節說明。我們現在已知道是：只要將「android:text 」屬性內容替換成我們想要文字，在預覽畫面或在 模擬器中就會顯示對應的文字。

將以上的 XML 描述綜合起來，我們就可以得知「main.XML 」 想表達的界面。

 

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.Net/onewaveyanlei/archive/2010/04/09/5468441.ASPx#_Toc238891629