Android開發入門教程--4.用戶界面之Layout(一)

上一節說到Activity是Android程序的表示層，程序的每一個顯示屏幕就是一個Activity。但是Activity是不能直接顯示在屏幕上的，直接顯示在屏幕上的是Layout文件中放置的各種View(Button,TextView...)控件，學習過.Net開發的就會感覺很像WebForm，Activity相當於頁面的后台.cs代碼，而Layout就相當於前台的.aspx頁面。通常在一個Layout文件中放置多個控件之前，我們需要先定義這個Layout所用的布局方式，布局方式的定義在Layouts內包含的控件中：

 

這些Layouts布局控件全部繼承於ViewGroup這個抽象類，同時View也繼承於ViewGroup。ViewGroup的功能就是裝載和管理下一層的View對象或ViewGroup對象，也就說它是一個容納其它元素的的容器。ViewGroup中，還定義了一個內部類ViewGroup.LayoutParams。這個類定義了對象的位置、大小等屬性，View通過LayoutParams中的這些屬性值來告訴父級，它們將如何放置。

1.幀布局 FrameLayout：

FrameLayout是最簡單的布局對象。在它里面的的所有顯示對象都將固定在屏幕的左上角，不能指定位置，后一個會直接覆蓋在前一個之上顯示：

 

如圖所示第二個TextView直接覆蓋在了第一個TextView上面。

2.線性布局 LinearLayout：

LinearLayout是最常用的布局之一，也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls類的父類，它里面所有顯示的對象都以垂直或水平的方式排列（通過設置LinearLayout的Orentation屬性來設置排列方式）：

 

3.相對布局 RelativeLayout：

RelativeLayout 允許子元素指定它們相對於其父元素或兄弟元素的位置，是實際布局中最常用的布局方式之一。它靈活性大、屬性也多，操作難度比較大，屬性之間產生沖突的的可能性也大，使用相對布局時需要多做測試。

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:src="@drawable/test" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/imageView1"
            android:layout_centerHorizontal="true"
            android:text="在imageView1下方"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/textView1"
            android:layout_centerHorizontal="true"
            android:text="在testView1下方"
            android:textSize="15sp" />

    </RelativeLayout>

RelativeLayout用到的一些重要的屬性：
第一類:屬性值為true或false
android:layout_centerHrizontal -------------------------------水平居中
android:layout_centerVertical ---------------------------------垂直居中
android:layout_centerInparent --------------------------------相對於父元素完全居中
android:layout_alignParentBottom ----------------------------貼緊父元素的下邊緣
android:layout_alignParentLeft --------------------------------貼緊父元素的左邊緣
android:layout_alignParentRight ------------------------------貼緊父元素的右邊緣
android:layout_alignParentTop --------------------------------貼緊父元素的上邊緣
android:layout_alignWithParentIfMissing ----------------------如果對應的兄弟元素找不到的話就以父元素做參照物
第二類：屬性值必須為id的引用名“@id/id-name”
android:layout_below -----------------------------------------在某元素的下方
android:layout_above ----------------------------------------在某元素的的上方
android:layout_toLeftOf --------------------------------------在某元素的左邊
android:layout_toRightOf -------------------------------------在某元素的右邊
android:layout_alignTop --------------------------------------本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft --------------------------------------本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom ----------------------------------本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight -------------------------------------本元素的右邊緣和某元素的的右邊緣對齊
第三類：屬性值為具體的像素值，如30dip，40px
android:layout_marginBottom --------------------------------離某元素底邊緣的距離
android:layout_marginLeft ------------------------------------離某元素左邊緣的距離
android:layout_marginRight ----------------------------------離某元素右邊緣的距離
android:layout_marginTop ------------------------------------離某元素上邊緣的距離

 4.表格布局 TableLayout：

TableLayout以行列的形式管理子元素，每一行是一個TableRow布局對象，當然也可以是普通的View對象，TableRow離每放一個元素就是一列，總列數由列數最多的那一行決定。

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="*" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_span="2"
                android:text="第一行合並兩列居中"
                android:textSize="20sp" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第一行第一列" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第一行第二列" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第二行第一列" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第二行第二列" />

        </TableRow>

    </TableLayout>

android:layout_span="2"是設置該TextView占據2列（我在界面設計器里面沒找到TextView的Span屬性，所以是在xml文件里面直接添加的），android:stretchColumns="*"是設置該TableLayout的所有列都自動擴展，如果不設置自動擴展每行列寬會根據顯示的內容改變。

TableLayout的幾個重要屬性：

collapseColumns -----------------------------設置隱藏那些列，列ID從0開始，多個列的話用”,”分隔
stretchColumns ------------------------------設置自動伸展那些列，列ID從0開始，多個列的話用”,”分隔
shrinkColumns -------------------------------設置自動收縮那些列，列ID從0開始，多個列的話用”,”分隔

可以用”*”來表示所有列，同一列可以同時設置為shrinkable和stretchable。