Android学习记录第二篇 (layout布局)

来源:互联网 发布:网络设计工程师 编辑:程序博客网 时间:2024/06/06 00:59

通常TableLayout由多个TableRow构成,一个TableRow即一行,定义几个TableRow就是定义几行。TableLayout不会显示行或者列或者cell的边线。TableLayout的行数是由我们自己声明的,列数也是由我们间接控制的。最长的行中的每个widget至少跨越一列,如果我们定义了三行,一行有两个widgets,一行有三个widgets,还有一个有四个,则该布局至少有四列。我们也可以通过设置属性android:layout_span来声明一个widget跨越的列数。

除了TableRow可以组成TableLayout外,其他的widgets也可以作为TableLayout的行。对于TableLayout中的非TableRowwidgetsTableLayout在安排他们位置的时候就像LinearLayout一样按照垂直方向来排列。这些widgetslayout_width也自动被设为fill_parent。我们可以利用TableLayout对这些widgets的特殊处理来生成一个分隔符,比如使用一个空白View widgets(<View android:layout_height = "2px" android:background = "0x0000FF“/>)白线分隔符。

TableLayout的每列可以根据包含的内容进行伸缩。这个是通过TableLayout的属性android:stretchColumns来设置的,该属性的值可以使单个列数,或者是由逗号分隔的列数组合。这些列自动扩展来占据行中可用的空间。相反的,我们可以通过设置android:shrinkColumnsword-wrap列包含的内容,以达到压缩列的有效宽度。我们也可以通过设置android:collapseColumns属性来控制列的可见与否,这在用户选择显示重要信息,屏蔽不重要信息的时候可以应用。

 

布局讲解:
    android:collapse="1

隐藏该TableLayout里的TableRow的列1,即第2列(从0开始计算),若要多列隐藏,用“,”隔开。
    android:stretchColumns="0,1,2"

设置列0、1、2为可伸展列。
    android:shrinkColumns="1,2"

设置列1、2为可收缩列。
    android:background="@drawable/picture_name"

设置背景图片,图片文件应该放在res文件夹下。

TableLayout经常用的属性是:

android:collapseColumns:以第0行为序,隐藏指定的列:

android:collapseColumns该属性为空时,如下图:

android:collapseColumns=0,2--------------》意思是把第0和第2列去掉,如下图:

 

android:shrinkColumns:以第0行为序,自动延伸指定的列填充可用部分:

LayoutRow里面的控件还没有布满布局时,shrinkColumns不起作用,如下图:

设置了shrinkColumns=0,1,2,布局完全没有改变,因为LayoutRow里面还剩足够的空间。

LayoutRow布满控件时,如下图:

设置设置了shrinkColumns=2,则结果如下图,控件自动向垂直方向填充空间:

 

 

android:stretchColumns:以第0行为序,尽量把指定的列填充空白部分:

设置stretchColumns=1,则结果如下图,第1列被尽量填充(Button02TextView02同时向右填充,直到TextView03被压挤到最后边)

 

修改main.xml

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"      android:stretchColumns="0"      android:id="@+id/tableLayout01" >        <!-- 3 列 -->    <TableRow        android:id="@+id/tableRow01"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="3dip">        <TextView            android:id="@+id/txtView01"            android:text="列  1"                        android:textAppearance="@android:style/TextAppearance.Large"/>               <Button            android:id="@+id/btn01"            android:text="列  2"/>        <Button            android:id="@+id/btn02"            android:text="列  3"/>        <Button            android:id="@+id/btn03"            android:text="列  4"/>    </TableRow>    <!-- 编辑框横跨  3 列  -->        <TableRow         android:id="@+id/tableRow02"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                android:padding="5dip" >                       <EditText                    android:id="@+id/edtText01"                                              android:layout_height="wrap_content"                   android:layout_span="3"                                  android:text="列 1 & 2 & 3"                    android:gravity="center_horizontal"/>    </TableRow>        <!-- 画一条紫色的线 -->    <View        android:layout_height="2dip"        android:background="@android:color/holo_purple" />     <!-- 3 列  -->    <TableRow               android:id="@+id/tableRow03"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:padding="5dip">        <TextView            android:id="@+id/txtView03"            android:text="列  1"                        android:textAppearance="@android:style/TextAppearance.Large"/>               <Button            android:id="@+id/btn04"            android:text="列  2" />         <Button            android:id="@+id/btn05"            android:text="列 3" />        <Button            android:id="@+id/btn06"            android:text="列 4" />                  </TableRow>            <!-- 显示第三列 -->    <TableRow        android:id="@+id/tableRow04"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="5dip" >         <Button            android:id="@+id/btn07"            android:layout_column="2"            android:text="列 3" />    </TableRow>    <!-- 显示第二列 -->    <TableRow        android:id="@+id/tableRow05"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="5dip" >         <Button            android:id="@+id/btn08"                        android:layout_column="1"            android:text="列 2" />    </TableRow>    </TableLayout>



运行图:

 

本文部分内容摘自:http://blog.csdn.net/hellogv/article/details/4522125