Android實戰簡易教程-第十三槍（五大布局研究），android五大

Android實戰簡易教程-第十三槍（五大布局研究），android五大
 我們知道Android系統應用程式一般是由多個Activity組成，而這些Activity以視圖的形式展現在我們面前， 視圖都是由一個一個的組件構成的。組件就是我們常見的Button、TextEdit等等。那麼我們平時看到的Android手機中那些漂亮的介面是怎麼顯示出來的呢？這就要用到Android的布局管理器了，網上有人比喻的很好：布局好比是建築裡的架構，組件按照布局的要求依次排列，就組成了用於看見的漂亮介面了。

      在分析布局之前，我們首先看看控制項：Android中任何可視化的控制項都是從android.veiw.View繼承而來的，系統提供了兩種方法來設定視圖：第一種也是我們最常用的的使用XML檔案來配置View的相關屬性，然後在程式啟動時系統根據設定檔來建立相應的View視圖。第二種是我們在代碼中直接使用相應的類來建立視圖。

      如何使用XML檔案定義視圖：

      每個Android項目的源碼目錄下都有個res/layout目錄，這個目錄就是用來存放布局檔案的。布局檔案一般以對應activity的名字命名，以 .xml 為尾碼。在xml中為建立組件時，需要為組件指定id,如：android:id="@+id/名字"系統會自動在gen目錄下建立相應的R資源類變數。 

    如何在代碼中使用視圖：   

      在代碼中建立每個Activity時，一般是在onCreate()方法中，調用setContentView()來載入指定的xml布局檔案，然後就可以通過findViewById()來獲得在布局檔案中建立的相應id的控制項了，如Button等。

 如：

private Button btnSndMag;public void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.main);// 載入main.xml布局檔案  btnSndMag = (Button)this.findViewById(R.id.btnSndMag); // 通過id找到對於的Button組件  ....}

下面我們來介紹Android系統中為我們提供的五大布局：LinearLayout(線性布局)、FrameLayout(單幀布局)、AbsoluteLayout(絕對布局)、TablelLayout(表格布局)、RelativeLayout(相對布局)。其中最常用的的是LinearLayout、TablelLayout和RelativeLayout。這些布局都可以嵌套使用。

（1）LinearLayout 線性布局

  線性布局是按照水平或垂直的順序將子項目(可以是控制項或布局)依次按照順序排列，每一個元素都位於前面一個元素之後。線性布局分為兩種：水平方向和垂直方向的布局。分別通過屬性android:orientation="vertical" 和 android:orientation="horizontal"來設定。

 android:layout_weight 表示子項目佔據的空間大小的比例，有人說這個值大小和佔據空間成正比，有人說反比。我在實際應用中設定和網上資料顯示的剛好相反，這個問題後面會專門寫一篇文章來分析。現在我們只需要按照正比例來設定就可以。 

例如下面我們實現一個的簡易計算機介面：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#FFFFFF"    tools:context=".MainActivity" ><!--   // 這裡第一行顯示標籤為一個水平布局 -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <EditText            android:id="@+id/msg"            android:inputType="number"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="">        </EditText>        </LinearLayout>     <!--  // 第二行為 mc m+ m- mr 四個Button構成一個水平布局 -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="mc" android:layout_weight="1">     </Button>     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="m+" android:layout_weight="1">     </Button>     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="m-" android:layout_weight="1">     </Button>     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="mr" android:layout_weight="1">     </Button>  </LinearLayout>      <!-- // 同上 C +/-  / * 四個Button構成一個水平布局 -->      <LinearLayout          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:orientation="horizontal" >          <Button              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:layout_weight="1"              android:text="C" >          </Button>          <Button              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:layout_weight="1"              android:text="+/-" >          </Button>          <Button              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:layout_weight="1"              android:text="/" >          </Button>          <Button              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:layout_weight="1"              android:text="*" >          </Button>      </LinearLayout>          <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="7" android:layout_weight="1">     </Button>     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="8" android:layout_weight="1">     </Button>     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="9" android:layout_weight="1">     </Button>     <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="-" android:layout_weight="1">     </Button>  </LinearLayout>      <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="4" >        </Button>        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="5" >        </Button>        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="6" >        </Button>        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="+" >        </Button>    </LinearLayout>      <!-- // 最外層是一個水平布局，由左邊上面一行1 2 3三個Button,下面一行的0 . 兩個Button 和 右邊的=構成 -->     <LinearLayout android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content">    <!-- // 這裡 1 2 3 和 下面的 0 . 構成一個垂直布局 -->        <LinearLayout android:orientation="vertical"        android:layout_weight="3"        android:layout_width="wrap_content"        android:layout_height="wrap_content">      <!-- // 這裡的 1 2 3 構成一個水平布局 -->     <LinearLayout android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="1"></Button>        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="2"></Button>        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="3"></Button>     </LinearLayout>      <!-- // 這裡的 0 和 . 構成一個水平布局，注意這裡的android_weight參數設定 -->     <LinearLayout android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <Button            android:layout_width="0px"            android:layout_height="wrap_content"            android:layout_weight="2"            android:text="0"></Button>        <Button            android:layout_width="0px"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="."></Button>        </LinearLayout>     </LinearLayout>    <!-- // 這裡一個單獨Button構成的垂直布局 -->    <LinearLayout android:orientation="vertical"        android:layout_weight="1"        android:layout_width="wrap_content"        android:layout_height="match_parent">     <Button         android:layout_width="match_parent"         android:layout_height="match_parent"        android:text="="></Button>      </LinearLayout>     </LinearLayout>   </LinearLayout>

（2）TableLayout 表格布局

         表格布局，適用於多行多列的布局格式，每個TableLayout是由多個TableRow組成，一個TableRow就表示TableLayout中的每一行，這一行可以由多個子項目組成。實際上TableLayout和TableRow都是LineLayout線性布局的子類。但是TableRow的參數android:orientation屬性值固定為horizontal，且android:layout_width=MATCH_PARENT，android:layout_height=WRAP_CONTENT。所以TableRow實際是一個橫向的線性布局，且所以子項目寬度和高度一致。

       注意：在TableLayout中，單元格可以為空白，但是不能跨列，意思是只能不能有相鄰的單元格為空白。

        在TableLayout布局中，一列的寬度由該列中最寬的那個單元格指定，而該表格的寬度由父容器指定。可以為每一列設定以下屬性：

     Shrinkable  表示該列的寬度可以進行收縮，以使表格能夠適應父容器的大小

     Stretchable 表示該列的寬度可以進行展開，以使能夠填滿表格中的空閑空間

     Collapsed  表示該列會被隱藏

TableLayout中的特有屬性：

android:collapseColumns

        android:shrinkColumns

        android:stretchColumns = "0,1,2,3"

Demo：我們想設計一個如下所以的一個三行三列的表格，但是第二行我們只想顯示2個表格：

 

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:shrinkColumns="0,1,2"  // 設定三列都可以收縮      android:stretchColumns="0,1,2" // 設定三列都可以展開 如果不設定這個，那個顯示的表格將不能填慢整個螢幕    android:layout_width="fill_parent"    android:layout_height="fill_parent" >        <TableRow android:layout_width="fill_parent"        android:layout_height="wrap_content">        <Button android:gravity="center"            android:padding="10dp"            android:text="Button1">        </Button>              <Button android:gravity="center"            android:padding="10dp"            android:text="Button2">        </Button>        <Button android:gravity="center"            android:padding="10dp"            android:text="Button3">        </Button>    </TableRow>    <TableRow android:layout_width="fill_parent"        android:layout_height="wrap_content">        <Button android:gravity="center"            android:padding="10dp"            android:text="Button4">        </Button>              <Button android:gravity="center"            android:padding="10dp"            android:text="Button5">        </Button>    </TableRow>    <TableRow android:layout_width="fill_parent"        android:layout_height="wrap_content">        <Button android:gravity="center"            android:padding="10dp"            android:text="Button6">        </Button>             <Button android:gravity="center"            android:padding="10dp"            android:text="Button7">        </Button>        <Button android:gravity="center"            android:padding="10dp"            android:text="Button8">        </Button>    </TableRow></TableLayout>

（3）RelativeLayout 相對布局

   RelativeLayout繼承於android.widget.ViewGroup，其按照子項目之間的位置關係完成布局的，作為Android系統五大布局中最靈活也是最常用的一種布局方式，非常適合於一些比較複雜的介面設計。

   注意：在引用其他子項目之前，引用的ID必須已經存在，否則將出現異常。

常用的位置屬性：

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   該組件是否垂直置中

例子：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <Button        android:id="@+id/btn1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_centerInParent="true"        android:text="Button1" >    </Button>    <Button        android:id="@+id/btn2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/btn1"        android:layout_toLeftOf="@id/btn1"        android:text="Button2" >    </Button>    <Button        android:id="@+id/btn3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/btn1"        android:layout_toRightOf="@id/btn1"        android:text="Button3" >    </Button>    <Button        android:id="@+id/btn4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/btn2"        android:layout_toLeftOf="@id/btn3"        android:layout_toRightOf="@id/btn2"        android:text="Button4" >    </Button></RelativeLayout>

（4）FrameLayout 架構布局

 將所有的子項目放在整個介面的左上方，後面的子項目直接覆蓋前面的子項目，所以用的比較少。

（5） AbsoluteLayou 絕對布局

   絕對布局中將所有的子項目通過設定android:layout_x 和 android:layout_y屬性，將子項目的座標位置固定下來，即座標(android:layout_x, android:layout_y) ，layout_x用來表示橫座標，layout_y用來表示縱座標。螢幕左上方為座標(0,0)，橫嚮往右為正方，縱嚮往下為正方。實際應用中，這種布局用的比較少，因為Android終端一般機型比較多，各自的螢幕大小。解析度等可能都不一樣，如果用絕對布局，可能導致在有的終端上顯示不全等。

除上面講過之外常用的幾個布局的屬性：
(1)layout_margin 
用於設定控制項邊緣相對於父控制項的邊距
android:layout_marginLeft 
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom

(2) layout_padding 
用於設定控制項內容相對於控制項邊緣的邊距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom

(3) layout_width/height
用於設定控制項的高度和寬度
wrap_content 內容包裹，表示這個控制項的裡面文字大小填充
fill_parent 跟隨父視窗
match_parent

(4) gravity 
用於設定View組件裡面內容的對齊
top bottom left   right  center等

(5) android:layout_gravity  
用於設定Container組件的對齊
android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊