1. 程式人生 > >淺談Android五大布局

淺談Android五大布局

Android的介面是有佈局和元件協同完成的,佈局好比是建築裡的框架,而元件則相當於建築裡的磚瓦。元件按照佈局的要求依次排列,就組成了使用者所看見的介面。Android的五大布局分別是LinearLayout(線性佈局)、FrameLayout(單幀佈局)、RelativeLayout(相對佈局)、AbsoluteLayout(絕對佈局)和TableLayout(表格佈局)。

  1. LinearLayout

  LinearLayout按照垂直或者水平的順序依次排列子元素,每一個子元素都位於前一個元素之後。如果是垂直排列,那麼將是一個N行單列的結構,每一行只會有一個元素,而不論這個元素的寬度為多少;如果是水平排列,那麼將是一個單行N列的結構。如果搭建兩行兩列的結構,通常的方式是先垂直排列兩個元素,每一個元素裡再包含一個LinearLayout進行水平排列。

  LinearLayout中的子元素屬性android:layout_weight生效,它用於描述該子元素在剩餘空間中佔有的大小比例。加入一行只有一個文字框,那麼它的預設值就為0,如果一行中有兩個等長的文字框,那麼他們的android:layout_weight值可以是同為1。如果一行中有兩個不等長的文字框,那麼他們的android:layout_weight值分別為1和2,那麼第一個文字框將佔據剩餘空間的三分之二,第二個文字框將佔據剩餘空間中的三分之一。android:layout_weight遵循數值越小,重要度越高的原則。顯示效果如下:


<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff000000" android:text="@string/hello"/>
     <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
         <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ff654321" android:layout_weight="1" android:text="1"/>
         <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#fffedcba" android:layout_weight="2"  android:text="2"/>
     </LinearLayout>
 </LinearLayout>

     2. FrameLayout

  FrameLayout是五大布局中最簡單的一個佈局,在這個佈局中,整個介面被當成一塊空白備用區域,所有的子元素都不能被指定放置的位置,它們統統放於這塊區域的左上角,並且後面的子元素直接覆蓋在前面的子元素之上,將前面的子元素部分和全部遮擋。顯示效果如下,第一個TextView被第二個TextView完全遮擋,第三個TextView遮擋了第二個TextView的部分位置。


 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff000000" android:gravity="center" android:text="1"/>
     <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff654321" android:gravity="center" android:text="2"/>
     <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:text="3"/>
 </FrameLayout>

     3. AbsoluteLayout

  AbsoluteLayout是絕對位置佈局。在此佈局中的子元素的android:layout_x和android:layout_y屬性將生效,用於描述該子元素的座標位置。螢幕左上角為座標原點(0,0),第一個0代表橫座標,向右移動此值增大,第二個0代表縱座標,向下移動,此值增大。在此佈局中的子元素可以相互重疊。在實際開發中,通常不採用此佈局格式,因為它的介面程式碼過於剛性,以至於有可能不能很好的適配各種終端。顯示效果如下:


 <?xml version="1.0" encoding="utf-8"?>
 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#ffffffff" android:gravity="center" android:layout_x="50dp" android:layout_y="50dp" android:text="1"/>
     <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#ff654321" android:gravity="center" android:layout_x="25dp" android:layout_y="25dp" android:text="2"/>
     <TextView  android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:layout_x="125dp" android:layout_y="125dp" android:text="3"/>
 </AbsoluteLayout>

     4. RelativeLayout

  RelativeLayout按照各子元素之間的位置關係完成佈局。在此佈局中的子元素裡與位置相關的屬性將生效。例如android:layout_below, android:layout_above等。子元素就通過這些屬性和各自的ID配合指定位置關係。注意在指定位置關係時,引用的ID必須在引用之前,先被定義,否則將出現異常。

  RelativeLayout裡常用的位置屬性如下:
    android:layout_toLeftOf —— 該元件位於引用元件的左方
    android:layout_toRightOf —— 該元件位於引用元件的右方
    android:layout_above —— 該元件位於引用元件的上方
    android:layout_below —— 該元件位於引用元件的下方
       android:layout_alignParentLeft —— 該元件是否對齊父元件的左端
       android:layout_alignParentRight —— 該元件是否齊其父元件的右端
       android:layout_alignParentTop —— 該元件是否對齊父元件的頂部
       android:layout_alignParentBottom —— 該元件是否對齊父元件的底部
    android:layout_centerInParent —— 該元件是否相對於父元件居中
    android:layout_centerHorizontal —— 該元件是否橫向居中
    android:layout_centerVertical —— 該元件是否垂直居中

  RelativeLayout是Android五大布局結構中最靈活的一種佈局結構,比較適合一些複雜介面的佈局。下面示例就展示這麼一個情況,第一個文字框與父元件的底部對齊,第二個文字框位於第一個文字框的上方,並且第三個文字框位於第二個文字框的左方。


 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TextView android:id="@+id/text_01" android:layout_width="50dp" android:layout_height="50dp" android:background="#ffffffff" android:gravity="center" android:layout_alignParentBottom="true" android:text="1"/>
     <TextView android:id="@+id/text_02" android:layout_width="50dp" android:layout_height="50dp" android:background="#ff654321" android:gravity="center" android:layout_above="@id/text_01" android:layout_centerHorizontal="true" android:text="2"/>
     <TextView android:id="@+id/text_03" android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:layout_toLeftOf="@id/text_02" android:layout_above="@id/text_01" android:text="3"/>
 </RelativeLayout>

     5. TableLayout

TableLayout顧名思義,此佈局為表格佈局,適用於N行N列的佈局格式。一個TableLayout由許多TableRow組成,一個TableRow就代表TableLayout中的一行。

  TableRow是LinearLayout的子類,它的android:orientation屬性值恆為horizontal,並且它的android:layout_width和android:layout_height屬性值恆為MATCH_PARENT和WRAP_CONTENT。所以它的子元素都是橫向排列,並且寬高一致的。這樣的設計使得每個TableRow裡的子元素都相當於表格中的單元格一樣。在TableRow中,單元格可以為空,但是不能跨列。

  下面示例演示了一個TableLayout的佈局結構,其中第二行只有兩個單元格,而其餘行都是三個單元格。


 <?xml version="1.0" encoding="utf-8"?>
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
         <TextView  android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/>
         <TextView android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/>
         <TextView  android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>
     </TableRow>
     <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
         <TextView  android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/>
         <TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>        
     </TableRow>
     <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
         <TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/>
         <TextView  android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/>
         <TextView  android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/>        
     </TableRow>
 </TableLayout>