【ALearning】第四章 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