1. 程式人生 > >頁面的五種佈局以及巢狀

頁面的五種佈局以及巢狀

因為學習比較晚,我用的相關版本為SDK4.1、eclipse4.2,而自己看的教材都是低版本的,這造成了細節上的不同,有時候給學習造成了不小的困擾,不過這樣也好,通過解決問題獲得的知識理解更加深刻一點,這篇文章就是因為版本不同這個原因由來的。

        使用上面說的版本新建一個Android專案,然後開啟main.xml檔案,注意看程式碼:

  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <TextView
  6.         android:layout_width="wrap_content"
  7.         android:layout_height="wrap_content"
  8.         android:layout_centerHorizontal="true"
  9.         android:layout_centerVertical="true"
  10.         android:text
    ="@string/hello_world"
  11.         tools:context=".Main"/>
  12. </RelativeLayout>

        RelativeLayout,這個就是五種佈局的其中之一,而大多數教材上面講的都是LinearLayout佈局,佈局的不同造成模擬機介面顯示的不同,為了避免再次困然,先把五種佈局都瞭解一下吧。

        五個佈局物件:RelativeLayout、LinearLayout、TableLayout、FrameLayout、AbsoulteLayout。

        佈局一:

        相對佈局RelativeLayout,定義各控制元件之間的相對位置關係,通過位置屬性和各自的ID配合指定位置關係,在指定位置關係時引用的ID必須在引用之前先被定義,否則將出現異常。

        layout/main.xml的程式碼

  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <TextView
  6.         android:id="@+id/firstText"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:background="#FFFFFF"
  10.         android:text="@string/first"/>
  11.     <TextView
  12.         android:id="@+id/secondText"
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:background="#FFFF00"
  16.         android:text="@string/second"/>
  17.     <TextView
  18.         android:id="@+id/thirdText"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:background="#FF00FF"
  22.         android:text="@string/third"/>
  23.     <TextView
  24.         android:id="@+id/fourthText"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:background="#00FFFF"
  28.         android:text="@string/fourth"/>
  29. </RelativeLayout>
        定義了4個文字標籤,各自的文字值(下面幾種佈局使用同樣的strings.xml檔案)
  1. <stringname="first">First</string>
  2. <stringname="second">Second</string>
  3. <stringname="third">Third</string>
  4. <stringname="fourth">Fourth</string>

        為了清晰展示,從一到四標籤的背景顏色為白黃紅綠,注意看上面沒有定義任何相對位置屬性,結果:


        都重合到一起了,這說明在沒有定義相對位置屬性的情況下,所有標籤都是相對於螢幕左上角佈局的,現在更改一下main.xml的程式碼:

  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <TextView
  6.         android:id="@+id/firstText"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:background="#FFFFFF"
  10.         android:text="@string/first"/>
  11.     <TextView
  12.         android:id="@+id/secondText"
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:background="#FFFF00"
  16.         android:layout_below="@id/firstText"
  17.         android:text="@string/second"/>
  18.     <TextView
  19.         android:id="@+id/thirdText"
  20.         android:layout_width="wrap_content"
  21.         android:layout_height="wrap_content"
  22.         android:background="#FF00FF"
  23.         android:layout_below="@id/secondText"
  24.         android:text="@string/third"/>
  25.     <TextView
  26.         android:id="@+id/fourthText"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:background="#00FFFF"
  30.         android:layout_below="@id/thirdText"
  31.         android:text=