1. 程式人生 > >Android 開發:(二)安卓常用5大布局方式

Android 開發:(二)安卓常用5大布局方式

一、Android中常用的5大布局方式有以下幾種:

1.線性佈局(LinearLayout):按照垂直或者水平方向佈局的元件;
2.幀佈局(FrameLayout) :元件從螢幕左上方(0,0)佈局元件;
3.相對佈局 (RelativeLayout) :相對其它元件的佈局方式;
4.表格佈局 (TableLayout) :按照行列方式佈局元件;
5.絕對佈局 (AbsoluteLayout):按照絕對座標來佈局元件(不常用,瞭解即可)。

二、詳細介紹:
1.線性佈局(LinearLayout):

按照垂直或者水平的順序依次排列子元素,每一個子元素都位於前一個元素之後。如果是垂直排列,那麼將是一個N行單列的結構,每一行只會有一個元素,而不論這個元素的寬度為多少;如果是水平排列,那麼將是一個單行N列的結構。如果搭建兩行兩列的結構,通常的方式是先垂直排列兩個元素,每一個元素裡再包含一個LinearLayout進行水平排列。
LinearLayout中的子元素屬性android:layout_weight生效,它用於描述該子元素在剩餘空間中佔有的大小比例。加入一行只有一個文字框,那麼它的預設值就為0,如果一行中有兩個等長的文字框,那麼他們的android:layout_weight值可以是同為1。如果一行中有兩個不等長的文字框,那麼他們的android:layout_weight值分別為1和2,那麼第一個文字框將佔據剩餘空間的三分之二,第二個文字框將佔據剩餘空間中的三分之一。android:layout_weight遵循數值越小,重要度越高的原則。

 <!--線性佈局:按垂直或者水平方向佈局-->
   <LinearLayout
        android:layout_width="match_parent" 
        android:layout_height="90dp"
        android:orientation="horizontal"  //橫向佈局
        **android:layout_weight="1"**  //該屬性會平分空間,每個人1/4寬。
        android:id="@+id/lw1"
        >
        <TextView
android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="red" android:gravity="center_horizontal" android:background="#aa0000" android:layout_weight="1" />
<TextView android:layout_width
="wrap_content" android:layout_height="fill_parent" android:text="blue" android:background="#0000aa" android:gravity="center_horizontal" android:layout_weight="1"/>
<TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:background="#ffa500" android:text="orange" android:gravity="center_horizontal" android:layout_weight="1" /> <TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:background="#008080" android:text="teal" android:gravity="center_horizontal" android:layout_weight="1"/> </LinearLayout> <LinearLayout android:orientation="vertical" //縱向佈局 android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@+id/lw1" //在idlw1的控制元件下佈局,實際上該屬性是相對佈局的。 android:layout_weight="1"> <TextView android:text="row one" android:background="#aa0000" android:textSize="25sp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> <!-- --> <TextView android:text="row two" android:background="#dda0dd" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:text="row three" android:background="#008080" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> <TextView android:text="row four" android:background="#ffa500" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout>

這裡寫圖片描述

2.幀佈局(FrameLayout):

五大布局中最簡單的一個佈局,從座標(0,0)開發。在這個佈局中,整個介面被當成一塊空白備用區域,所有的子元素都不能被指定放置的位置,它們統統放於這塊區域的左上角,並且後面的子元素直接覆蓋在前面的子元素之上,將前面的子元素部分和全部遮擋。

  <!--&lt;!&ndash;幀佈局:從左上角(0,0)開始佈局&ndash;&gt;-->
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#00bfff"/>
    <TextView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="#ffc0cb"/>
    <TextView
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="#0000ff"/>
    <TextView
        android:layout_width="3dp"
        android:layout_height="3dp"
        android:background="#fa524e"/>

這裡寫圖片描述

3.相對佈局 (RelativeLayout):

按照各子元素之間的位置關係完成佈局。在此佈局中的子元素裡與位置相關的屬性將生效。
RelativeLayout用到的一些重要的屬性:

 <!--相對佈局:按照元件的相對位置來佈局-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tev"
        android:text="please type here:"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tev"
        android:id="@+id/tex"/>
    <Button
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:layout_below="@id/tex"
        android:text="確定"
        />
    <Button
        android:layout_marginLeft="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_below="@id/tex"
        android:layout_marginRight="30dp"
        android:text="取消"/>

這裡寫圖片描述

4.表格佈局 (TableLayout):

此佈局為表格佈局,適用於N行N列的佈局格式。一個TableLayout由許多TableRow組成,一個TableRow就代表TableLayout中的一行。
  TableRow是LinearLayout的子類,它的android:orientation屬性值恆為horizontal,並且它的android:layout_width和android:layout_height屬性值恆為MATCH_PARENT和WRAP_CONTENT。所以它的子元素都是橫向排列,並且寬高一致的。這樣的設計使得每個TableRow裡的子元素都相當於表格中的單元格一樣。在TableRow中,單元格可以為空,但是不能跨列。

 <!--1.表格佈局: 一個viewgroup以表格顯示它的子檢視(view)元素,
                即行和列標識一個檢視的位置-->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="100dp">
        <Button
            android:text="button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="button3"
            android:layout_width="match_parent" />
    </TableRow>
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="140dp">
        <Button
            android:text="button4"/>
        <Button
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button5"/>
    </TableRow>

這裡寫圖片描述

5.絕對佈局 (AbsoluteLayout):

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