android五種布局模式

baopbird2005

Android布局是應(yīng)用界面開發(fā)的重要一環(huán)，在Android中，共有五種布局方式，分別是：LinearLayout （線性布局），F(xiàn)rameLayout（框架布
局），AbsoluteLayout（絕對(duì)布局），RelativeLayout（相對(duì)布局），TableLayout（表格布局）。

在windows下有預(yù)覽功能，可以在xml中查看布局的樣式，在linux中無。

一、LinearLayout
      線性布局，這個(gè)東西，從外框上可以理解為一個(gè)div，他首先是一個(gè)一個(gè)從上往下羅列在屏幕上。每一個(gè)LinearLayout里面又可分為垂直布局（androidrientation="vertical"）和水平布局（androidrientation="horizontal" ）。當(dāng)垂直布局時(shí)，每一行就只有一個(gè)元素，多個(gè)元素依次垂直往下；水平布局時(shí)，只有一行，每一個(gè)元素依次向右排列。
  linearLayout中有一個(gè)重要的屬性 android:layout_weight="1"，這個(gè)weight在垂直布局時(shí)，代表行距；水平的時(shí)候代表列寬；weight值越大就越大。

線形布局中預(yù)覽和真機(jī)中完全一樣。

TextView占一定的空間，沒有賦值也有一定的寬高，要特別注意。
二、FrameLayout
      FrameLayout是最簡單的一個(gè)布局對(duì)象。它被定制為你屏幕上的一個(gè)空白備用區(qū)域，之后你可以在其中填充一個(gè)單一對(duì)象 — 比如，一張你要發(fā)布的圖片。所有的子元素將會(huì)固定在屏幕的左上角；你不能為FrameLayout中的一個(gè)子元素指定一個(gè)位置。后一個(gè)子元素將會(huì)直接在前一個(gè)子元素之上進(jìn)行覆蓋填充，把它們部份或全部擋�。ǔ�非后一個(gè)子元素是透明的）。   
三、AbsoluteLayout
　　 AbsoluteLayout 這個(gè)布局方式很簡單，主要屬性就兩個(gè) layout_x 和 layout_y 分別定義 這個(gè)組件的絕對(duì)位置。 即，以屏幕左上角為（0，0）的坐標(biāo)軸的x，y值，當(dāng)向下或向右移動(dòng)時(shí)，坐標(biāo)值將變大。AbsoluteLayout 沒有頁邊框，允許元素之間互相重疊（盡管不推薦）。我們通常不推薦使用 AbsoluteLayout ，除非你有正當(dāng)理由要使用它，因?yàn)樗�使界面代碼太過剛性，以至于在不同的設(shè)備上可能不能很好地工作。

四、RelativeLayout
    相對(duì)布局可以理解為某一個(gè)元素為參照物，來定位的布局方式。

                android：layout_方向 = id  表示 在這個(gè)id對(duì)應(yīng)的控件的方向上（上|下）

                android：layout_align方向  = id 表示和這個(gè)控件的（上下左右）對(duì)齊

                android： layout_to方向Of  = id 表示在這個(gè)控件的 左或者右
eg:

                　　android:layout_below="@id/la1"/>
                將當(dāng)前控件放置于id為la1 的控件下方。
                         android:layout_alignParentRight="true"
                使當(dāng)前控件的右端和父控件的右端對(duì)齊。這里屬性值只能為true或false，默認(rèn)false。
                 android:layout_marginLeft="10dip"
                使當(dāng)前控件左邊空出相應(yīng)的空間。
                         android:layout_toLeftOf="@id/true"
                使當(dāng)前控件置于id為true的控件的左邊。
                         android:layout_alignTop="@id/ok"
                使當(dāng)前控件與id為ok的控件上端對(duì)齊。

        五、TableLayout

       表格布局類似Html里面的Table。每一個(gè)TableLayout里面有表格行TableRow，TableRow里面可以具體定義每一個(gè)元素。每個(gè)TableRow 都會(huì)定義一個(gè) row （事實(shí)上，你可以定義其它的子對(duì)象，這在下面會(huì)解釋到）。TableLayout 容器不會(huì)顯示row 、cloumns 或cell 的邊框線。每個(gè) row 擁有0個(gè)或多個(gè)的cell ；每個(gè)cell 擁有一個(gè)View 對(duì)象。表格由列和行組成許多的單元格。表格允許單元格為空。單元格不能跨列，這與HTML 中的不一樣。

TabRow只論行，不論列（列自定義）。

  每一個(gè)布局都有自己適合的方式，另外，這五個(gè)布局元素可以相互嵌套應(yīng)用，做出美觀的界面。

例子：


1 線性布局（LinearLayout）


描述：最簡單布局方式，依次向下進(jìn)行排列。

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.     <Button android:text="Up"
   
7.         android:id="@+id/Button03"
   
8.         android:layout_width="fill_parent"
   
9.         android:layout_height="wrap_content"></Button>
   
10.         
    
11.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
12.         android:orientation="horizontal"
    
13.         android:layout_width="fill_parent"
    
14.         android:layout_height="fill_parent">        
    
15.     <Button android:text="left"
    
16.         android:id="@+id/Button01"
    
17.         android:width="120px"
    
18.         android:layout_width="wrap_content"
    
19.         android:layout_height="wrap_content"></Button>   
    
20.     <Button
    
21.         android:text="right"
    
22.         android:id="@+id/Button02"
    
23.         android:width="120px"
    
24.         android:layout_width="wrap_content"
    
25.         android:layout_height="wrap_content"></Button>
    
26.     </LinearLayout>
    
27. </LinearLayout>

復(fù)制代碼

baopbird2005

2、 表格布局（TableLayout）


描述：類似于HTML table ，在其中間添加View 或是<TableRow></TableRow>控件。

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <TableLayout
   
3.     xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     android:id="@+id/TableLayout01"
   
5.     android:layout_width="fill_parent" android:layout_height="fill_parent">
   
6.     <TableRow android:gravity="center">
   
7.       <Button
   
8.             android:text="@+id/Button01"
   
9.             android:id="@+id/Button01"
   
10.             android:layout_width="wrap_content"
    
11.             android:layout_height="wrap_content">
    
12.        </Button>
    
13.     </TableRow>
    
14.     <TableRow android:gravity="center">
    
15.         <TextView android:text="第一行第0列"
    
16.                   android:layout_width="wrap_content"
    
17.                   android:layout_height="wrap_content"></TextView>
    
18.         <TextView android:text="第一行第1列"
    
19.                   android:layout_width="wrap_content"
    
20.                   android:layout_height="wrap_content"></TextView>
    
21.     </TableRow>
    
22.      <TableRow android:gravity="center">
    
23.         <TextView android:text="第二行第0列"
    
24.                   android:layout_width="wrap_content"
    
25.                   android:layout_height="wrap_content"></TextView>
    
26.         <TextView android:text="第二行第1列"
    
27.                   android:layout_width="wrap_content"
    
28.                   android:layout_height="wrap_content"></TextView>
    
29.     </TableRow>
    
30. </TableLayout>

復(fù)制代碼

baopbird2005

3、 單幀布局（FrameLayout）


描述：類似于HTML層疊

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <FrameLayout
   
3.     xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     android:layout_width="wrap_content"
   
5.     android:layout_height="wrap_content">
   
6.     <ImageView
   
7.         android:id="@+id/ImageView01"
   
8.         android:src="@drawable/circle_blue"
   
9.         android:layout_width="wrap_content"
   
10.         android:layout_height="wrap_content">
    
11.     </ImageView>
    
12.     <ImageView
    
13.         android:id="@+id/ImageView02"
    
14.         android:src="@drawable/circle_green"
    
15.         android:layout_width="wrap_content"
    
16.         android:layout_height="wrap_content">
    
17.     </ImageView>
    
18.     <ImageView
    
19.         android:id="@+id/ImageView03"
    
20.         android:src="@drawable/circle_red"
    
21.         android:layout_width="wrap_content"
    
22.         android:layout_height="wrap_content">
    
23.     </ImageView>
    
24.    
    
25. </FrameLayout>

復(fù)制代碼

baopbird2005

4、 相對(duì)布局（RelativeLayout）


描述：取決于對(duì)參照控件進(jìn)行布局，父控件和子控件均可

常用屬性：android:layout_centerInParent=”true/false”        

          android:layout_above, android:layout_below

　　　　android:layout_alignleft, android:layout_alignright.

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="fill_parent" android:layout_height="fill_parent">
   
4.      <Button
   
5.           android:id="@+id/btnmiddle"
   
6.           android:text="MiddleButton"
   
7.           android:layout_width="200px"
   
8.           android:layout_height="wrap_content"
   
9.           android:layout_centerInParent="true">     
   
10.      </Button>
    
11.       <Button
    
12.           android:id="@+id/btnup"
    
13.           android:text="UpButton"
    
14.           android:layout_width="100px"
    
15.           android:layout_height="wrap_content"         
    
16.           android:layout_above="@id/btnmiddle"
    
17.           android:layout_alignLeft="@id/btnmiddle">     
    
18.      </Button>
    
19.       <Button
    
20.           android:id="@+id/btndown"
    
21.           android:text="downButton"
    
22.           android:layout_width="100px"
    
23.           android:layout_height="wrap_content"         
    
24.           android:layout_below="@id/btnmiddle"
    
25.           android:layout_alignRight="@id/btnmiddle">     
    
26.      </Button>
    
27. </RelativeLayout>

復(fù)制代碼

baopbird2005

5、 坐標(biāo)布局（AbsoluteLayout）



描述：對(duì)其控件進(jìn)行直接定位，增加靈活性。

常用屬性：android:layout_x,android:layout_y.

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <AbsoluteLayout
   
3.   xmlns:android="http://schemas.android.com/apk/res/android"
   
4.   android:layout_width="wrap_content"
   
5.   android:layout_height="wrap_content">
   
6.   
   
7.   <TextView
   
8.        android:layout_width="wrap_content"
   
9.        android:text="UserName:"
   
10.        android:layout_height="wrap_content"
    
11.        android:id="@+id/tvName"
    
12.        android:layout_y="20dip"
    
13.        android:layout_x="50dip">
    
14.        </TextView>
    
15.    <TextView
    
16.        android:layout_width="wrap_content"
    
17.        android:text="Password:"
    
18.        android:layout_height="wrap_content"
    
19.        android:id="@+id/tvPassword"
    
20.        android:layout_y="100dip"
    
21.        android:layout_x="55dip">
    
22.        </TextView>
    
23.       
    
24.    <EditText
    
25.        android:layout_width="150px"
    
26.        android:layout_height="wrap_content"
    
27.        android:id="@+id/tvPassword"
    
28.        android:layout_y="10dip"
    
29.        android:layout_x="120dip">
    
30.        </EditText>
    
31.    <EditText
    
32.        android:layout_width="150px"
    
33.        android:layout_height="wrap_content"
    
34.        android:id="@+id/tvPassword"
    
35.        android:layout_y="90dip"
    
36.        android:layout_x="120dip">
    
37.        </EditText>
    
38. </AbsoluteLayout>

復(fù)制代碼

baopbird2005

建議大家使用相對(duì)布局，首先它的方法屬性是最強(qiáng)大的其次它基本可以實(shí)現(xiàn)其它4大布局的效果，當(dāng)然這里說的不是全部 有時(shí)候還是須要使用其他布局