【ALearning】第四章 Android Layout組件布局(二)

標籤：android   布局   layout   

       前面我們分別介紹和學習了LinearLayout（線性布局）、FrameLayout（單幀布局）和AbsoluteLayout（絕對布局）。這次我們要進行RelativeLayout（相對布局）和TableLayout（表格布局）的學習。這部分是很重要的知識點。RelativeLayout是開發過程中強烈建議使用的，而TableLayout是滿足一些特定需求時(常見表格顯示，但不局限於此)需要使用。

【部落格專欄：http://blog.csdn.net/column/details/alearning.html】

RelativeLayout（相對布局）       前面介紹的LinearLayout(現象布局)與即將介紹的RelativeLayout(相對布局)，是實際開發中較常使用的，也是開發過程中強烈建議的使用。下面我們來開始瞭解RelativeLayout布局。
       相對布局，顧名思義就是以“相對”位置/對齊為基礎的布局方式。
本例拓展的屬性配置是：

• android:id   指定該控制項唯一標誌的ID值;
• android:layout_above    指定該控制項的底部置於給定ID的控制項之上;
• android:layout_below    指定該控制項的底部置於給定ID的控制項之下;
• android:layout_toLeftOf  指定該控制項的右邊緣與給定ID的控制項左邊緣對齊;
• android:layout_toRightOf 指定該控制項的左邊緣與給定ID的控制項右邊緣對齊;
• android:layout_alignBaseline 指定該控制項的baseline與給定ID的baseline對齊;
• android:layout_alignTop     指定該控制項的頂部邊緣與給定ID的頂部邊緣對齊;
• android:layout_alignBottom  指定該控制項的底部邊緣與給定ID的底部邊緣對齊;
• android:layout_alignLeft     指定該控制項的左邊緣與給定ID的左邊緣對齊;
• android:layout_alignRight    指定該控制項的右邊緣與給定ID的右邊緣對齊;
• android:layout_alignParentTop指定該控制項的頂部與其父控制項的頂部對齊;
• android:layout_alignParentBottom 指定該控制項的底部與其父控制項的底部對齊;
• android:layout_alignParentLeft    指定該控制項的左部與其父控制項的左部對齊;
• android:layout_alignParentRight   指定該控制項的右部與其父控制項的右部對齊;

註：相對布局的屬相設定較多，在實際的開發中需要不斷的補充與拓展。
【布局檔案】activity_relativelayout.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <!-- 該控制項位於介面中部 -->    <TextView        android:id="@+id/red"        android:layout_width="70dp"        android:layout_height="70dp"        android:layout_centerInParent="true"        android:background="#CD2E57"        android:gravity="center"        android:text="Red" />        <!-- 該控制項的左邊緣與給定id為red控制項的左邊緣對齊 -->    <TextView        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_alignLeft="@id/red"        android:background="#64DB99"        android:gravity="center"        android:text="Green" />    <!-- 該控制項位於介面底部 同時 位於給定id為red控制項的下邊/右邊(即右下位置) -->    <TextView        android:layout_width="50dp"        android:layout_height="50dp"        android:layout_below="@id/red"        android:layout_centerInParent="true"        android:layout_marginTop="20dp"        android:layout_toRightOf="@id/red"        android:background="#FFFA78"        android:gravity="center"        android:text="Yellow" />    <!-- 該控制項位於給定id為red控制項的左邊 -->    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_alignParentBottom="true"        android:layout_toLeftOf="@id/red"        android:background="#148CFF"        android:gravity="center"        android:text="Blue" /></RelativeLayout>

效果：

TableLayout（表格布局）       TableLayout表格布局，表格布局類似Html裡面的Table。每一個TableLayout裡面有表格行TableRow(類似於Html中Table裡的tr)，TableRow裡面可以具體定義每一個元素，例如TextView，設定他的對齊android:gravity="center"。
本例拓展的屬性配置是：

• android:stretchColumns    指定可伸展的列。該列可以向行方向伸展，最多可佔據一整行。
• android:shrinkColumns     指定可收縮的列。當該列子控制項的內容太多，已經擠滿所在行，那麼該子控制項的內容將往列方向顯示。
• android:collapseColumns  指定要隱藏的列。

樣本：
android:stretchColumns="0"           第0列可伸展
android:shrinkColumns="1,2"         第1,2列皆可收縮
android:collapseColumns="*"         隱藏所有行
註：列可以同時具備stretchColumns及shrinkColumns屬性，若此，那麼當該列的內容N多時，將“多行”顯示其內容。（這裡不是真正的多行，而是系統根據需要自動調節該行的layout_height）。

• android:layout_column    指定該單元格在第幾列顯示
• android:layout_span      指定該單元格佔據的列數（未指定時，為1）

樣本：
android:layout_column="1"    該控制項顯示在第1列
android:layout_span="2"        該控制項佔據2列
說明：一個控制項也可以同時具備這兩個特性。
【布局檔案】activity_relativelayout.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"    android:stretchColumns="0,1,2" >    <TableRow        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:background="#6495ED"            android:padding="2dp"            android:text="文本1-1" />        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:background="#B0C4DE"            android:padding="2dp"            android:text="文本1-2" />        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:background="#32CD32"            android:padding="2dp"            android:text="文本1-3" />        <TextView            android:layout_width="wrap_content"            android:layout_height="40dp"            android:background="#FFD700"            android:padding="2dp"            android:text="文本1-4" />    </TableRow>    <TableRow        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <TextView            android:layout_height="40dp"            android:layout_column="1"            android:layout_span="2"            android:background="#FF8C00"            android:text="跨列文本2-2,3跨2到3列" />    </TableRow>    <TableRow        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <TextView            android:layout_height="40dp"            android:layout_column="0"            android:layout_span="2"            android:background="#FF69B4"            android:text="跨列文本3-1,2跨1到2列" />    </TableRow>    <!--  -->    <TableLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:collapseColumns="2"         android:shrinkColumns="1"        android:stretchColumns="0" >        <TableRow            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <TextView                android:background="#696969"                 android:textColor="@android:color/white"                android:text="行方向伸展文本，可自行增長文本查看效果！" />            <TextView                 android:textColor="@android:color/white"                android:background="#800000"                android:text="列方向伸展文本，可自行增長文本查看效果！" />        </TableRow>    </TableLayout></TableLayout>

效果：

        到此，基於XML配置的五種常用的布局，已經全部講解完成。但是布局的設計方式不止一種，還有一種是基於Java(Android)開發語言的設定。這部分，將會在接下來的不斷的學習中瞭解與使用。敬請各位看官的繼續關注！

參考資料4、http://blog.sina.com.cn/s/blog_63c66eb60100u29p.html
5、http://blog.csdn.net/beyond0525/article/details/8841139