Android開發-之五大布局

在html中大家都知道布局是什么意思了，簡單來說就是將頁面劃分模塊，比如html中的div、table等。那么Android中也是這樣的。Android五大布局讓界面更加美化，開發起來也更加方便。當然布局方式不一樣應用的地方也不一樣，當然了有的布局方式也是可以相互轉換和嵌套使用的。它們都各有各的優缺點，具體頁面要怎么布局還是得看開發需求，但是用的最多的還是相對布局、線性布局以及相對布局和線性布局的嵌套使用。當然，我說的是安卓，并沒有指定是安卓手機，比如平板、智能家居（電視...）很多都是Android系統。那么下面我們就具體來講Android開發中的五大布局，我以一個簡單的撥號器為例。

一、Android五大布局分類

1、相對布局

2、絕對布局

3、線性布局

4、表格布局

5、幀布局

二、具體布局的使用

1、相對布局（RelativeLayout）

在我們創建Android項目時，默認的activity_main.xml這個文件默認的布局方式就是RelativeLayout相對布局。那么相對布局就是按照各子元素之間的位置關系完成布局。在此布局中的子元素里與位置相關的屬性將生效。可以這樣理解：在安卓屏幕中的父元素就是整個屏幕，而子元素就是那些按鈕、文本框之類的東西。

相對布局是Android布局中最為常用的布局之一，也是最強大的布局：

1）它可以設置的屬性非常的多

2）可以做的事情最多

3）安卓屏幕的分辨率大小不一，所以想到屏幕的自適應性，開發中建議大家去使用相對布局。

4）相對于元素來說，比較容易定位

a、以下是相對布局的XML代碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.fivelayout.MainActivity" >



    <!-- 默認RelativeLayout相對布局 -->

       <TextView 
           android:id="@+id/tv_number"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="請輸入電話號碼："
           />

       <EditText 
           android:id="@+id/et_number"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="輸入電話號碼"
           android:layout_below="@id/tv_number"
           />

       <Button 
           android:id="@+id/btn_call"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="call"
           android:layout_below="@id/et_number"

           />

       <Button 
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="call"
           android:layout_below="@id/et_number"
           android:layout_toRightOf="@id/btn_call"
           />



</RelativeLayout>

b、部分標簽屬性說明

        TextView：顯示的文本內容

        EditText：類似輸入框

        android:id：給元素指定一個唯一ID標識

        android:text：顯示的文本內容

        android:layout_below：相對于上邊子元素的下面

        android:layout_toRightOf：相對于左邊子元素的右邊

        android:layout_width：子元素的橫向填充方式

        android:layout_width：子元素的縱向填充方式

c、效果

2、絕對布局

在這里打一個比方：我們手機斗地主，三個玩家的位置是固定在三個角落的，那么用相對布局就不容易實現。那么我們就可以用絕對布局（AbsoluteLayout）就比較容易去實現這個功能。

但是在實際開發中：

1）通常不采用此布局格式

2）它的界面代碼過于剛性

3）有可能不能很好的適配各種終端

所以絕對布局的方式已經被Google公司的Android開發團隊舍棄了。在此布局中的子元素的android:layout_x和android:layout_y屬性將生效，用于描述該子元素的坐標位置。屏幕左上角為坐標原點（0,0），第一個0代表橫坐標，向右移動此值增大，第二個0代表縱坐標，向下移動，此值增大。在此布局中的子元素可以相互重疊。

a、一下是絕對布局的xml實現代碼

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 絕對布局AbsoluteLayout -->

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="22dp"
        android:layout_y="33dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="141dp"
        android:layout_y="103dp"
        android:text="Button" />

</AbsoluteLayout>

b、部分標簽屬性說明：

        android:layout_x：絕對于屏幕左上角的角落橫向的距離

        android:layout_y：絕對于屏幕左上角的角落縱向的距離

c、效果

3、線性布局（LinearLayout）

線性布局就好像我們串羊肉串一樣，是一條直線連接起來的。這里呢又分為橫向和縱向。

線性布局按照垂直或者水平的順序依次排列子元素，每一個子元素都位于前一個元素之后。

1）垂直排列，那么將是一個N行單列的結構，每一行只會有一個元素，而不論這個元素的寬度為多少；

2）水平排列，那么將是一個單行N列的結構。

3）搭建兩行兩列的結構，通常的方式是先垂直排列兩個元素，每一個元素里再包含一個LinearLayout進行水平排列

也就是說縱向和橫向還是可以相互嵌套使用的哦，可以實現表格布局的效果。

a、以下是線性布局的XML實現代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 線性布局LinearLayout -->

    <TextView 
        android:id="@+id/tv_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:textSize="18sp"
        android:text="請輸入電話號碼："        
        />

    <EditText 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="請輸入電話號碼"
        />

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="撥打"
        />

</LinearLayout>

b、部分標簽屬性說明

        android:layout_marginLeft：標簽外部離屏幕的左邊距

        android:layout_marginTop：標簽外部離屏幕的上邊距

        android:textSize：字體顯示的大小  注意：單位是sp

c、效果

4、表格布局

相比大家對于表格都有很大的了解，比如我們常用到的Excel表格，再比如我們html中用到的table標簽，其實在Android中的表格布局也是類似的，所以當需要像表格一樣布 局，那么推薦使用表格布局

表格布局適用于多行多列的布局格式。一個TableLayout由許多TableRow組成，一個TableRow就代表TableLayout中的一行。

1）TableRow是LinearLayout的子類，ablelLayout并不需要明確地聲明包含多少行、多少列，而是通過TableRow，以及其他組件來控制表格的行數和列數，

2）TableRow就好比是table中的tr，它是一個容器，因此可以向TableRow里面添加其他組件也就是我們常說的標簽屬性，每添加一個組件該表格就增加一列。如果想TableLayout里面添加組件，那么該組件就直接占用一行。

3）在表格布局中，列的寬度由該列中最寬的單元格決定，整個表格布局的寬度取決于父容器的寬度，默認是占滿父容器本身的，這里的父容器就相當于我們的整個屏幕。

a、一下是表格布局的xml實現代碼

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 表格布局tablelayout -->
    <!-- tablerow代表一行，行里面有多少個標簽內容就代表多少列 -->
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1行1列"
            android:textSize="18sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1行2列"
            android:textSize="18sp"
            android:layout_marginLeft="20dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1行3列"
            android:textSize="18sp"
            android:layout_marginLeft="20dp"
            />

    </TableRow>

    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行1列"
            android:textSize="18sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行2列"
            android:textSize="18sp"
            android:layout_marginLeft="20dp"
            />

     </TableRow>

</TableLayout>

b、部分標簽屬性說明

TableRow：行

c、效果

5、幀布局（框架布局）

幀布局有的地方也稱之為框架布局，是最簡單的布局形式，所以在實際開發中用得比較少。所有添加到這個布局中的視圖都以層疊的方式顯示。第一個添加的控件被放在最底層，最后一個添加到框架布局中的視圖顯示在最頂層，上一層的控件會覆蓋下一層的控件。這種顯示方式有些類似于堆棧。

a、以下是幀布局xml的實現代碼

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 幀布局FrameLayout -->

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="幀布局..."
        />

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="點擊"
        />

</FrameLayout>

b、部分標簽說明

發現這里沒有啥標簽好說明噠~~哈哈哈，那我就當做是已經省略了……

c、效果

PS:以上的效果也許大家看得不是很理解，那么久需要大家自己去實踐啦，把那些標簽一個一個的去調試看一下~最后才會發現原來效果相差這么大，對就是這么大~~~

三、總結

1、在實際開發中，各各布局不是獨立存在的，而是可以相互嵌套使用的，就好比html中div嵌套表格，然后表格再嵌套div一樣

2、具體使用哪一個布局得看某個頁面要用怎樣的布局才更方便快捷的實現，也更方便的去維護這方面去思考

3、雖說絕對布局被舍棄了，但是在具體的開發中還是有可能用到的，大家也只要理解一下就好啦

4、布局不僅能夠方便快捷便于維護，還能帶來更好的頁面美觀效果

5、部分布局與布局之間可以可以替換使用，比如相對布局與線性布局與表格布局的相互替換使用等

6、還有很多布局的屬性，那么聰明的大家也許都看出來規律了，跟我們學的CSS是不是很熟悉呢，大家可以自己去學習哈……

 

來自：http://www.cnblogs.com/xiao-chuan/p/6086828.html