现在的位置: 首页 > 综合 > 正文

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

2014年02月26日 ⁄ 综合 ⁄ 共 3543字 ⁄ 字号 评论关闭

通常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

 

抱歉!评论已关闭.