`

Android TableLayout

 
阅读更多

转载:http://android.blog.51cto.com/268543/314262

 

TableLayout 和我们平时在网页上见到的Table 有所不同,TableLayout 没有边框的,它是由多个TableRow 对象组成,每个TableRow 可以有0 个或多个单元格,每个单元格就是一个View 。这些TableRow ,单元格不能设置layout_width, 宽度默认是fill_parent 的,只有高度layout_height 可以自定义,默认是wrap_content

      单元格可以为empty ,并且通过android:layout_column 可以设置index 值实现跳开某些单 元格。在TableRow 之间,添加View, 设置layout_height 以及背景色,就可以实现一条间隔线。 android:layout_span 可以设置合并几个单元格

 

1.  <?xml version="1.0" encoding="utf-8"?> 

2.  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 

3.      android:layout_width="fill_parent" 

4.      android:layout_height="fill_parent"> 

5.   

6.      <TableRow> 

7.          <TextView 

8.              android:text="column1" 

9.              android:padding="3dip"  /> 

10.         <TextView 

11.             android:text="column2" 

12.             android:padding="3dip"  /> 

13.         <TextView 

14.             android:text="column3" 

15.             android:padding="3dip"  /> 

16.     </TableRow> 

17.  

18.     <TableRow> 

19.         <TextView 

20.           android:text="column11" 

21.           android:visibility= "invisible"/> //cell 不见了  

22.         <TextView 

23.             android:text=" 左边的invisible" 

24.             android:gravity="right" 

25.             android:padding="3dip" /> 

26.         <Button 

27.             android:id="@+id/go" 

28.             android:text="go"  

29.             android:padding="3dip" /> 

30.         <Button 

31.             android:text="cancel" 

32.             android:padding="3dip" /> 

33.     </TableRow> 

34.  

35.     <View                               // 间隔线 

36.         android:layout_height= "2dip" 

37.         android:background= "#F00" />  

38.  

39.     <TableRow> 

40.         <TextView 

41.             android:text=" 右边的cell empty" /> 

42.         <TextView 

43.             android:layout_column= "2"  

44.             android:text=" 跳开empty cell" 

45.             android:padding="3dip" /> 

46.     </TableRow> 

47.      

48.     <TableRow> 

49.         <TextView 

50.             android:text=" 合并3 个单元格

51.             android:layout_span= "3" 

52.             android:gravity="center_horizontal" 

53.             android:background="#FFC0C0C0" 

54.             android:textColor="#f00" 

55.             android:padding="3dip" /> 

56.     </TableRow> 

57. </TableLayout> 

没有设置收缩/ 伸展效果


     注意,原来没有添加 android:padding="3dip" 的,发现那些column 会凑在一起的,没有空白间隔!明显看到,那个cancel 按钮被挤到几乎看不见了!这时候需要使用 android:shrinkColumns=" 可收缩的column"android:stretchColumns=" 可伸展的column"

    android:shrinkColumns android:stretchColumns 的值都是以0 开始的index ,但必须是string 值,即用"1,2,5" 来表示。可以用"*" 来表示all columns 。而且同一column 可以同时设置为shrinkablestretchable

     如果使用TableLayout 类的setColumnShrinkable/setColumnStretchable (int columnIndex, boolean isShrinkable) 就麻烦些了,需要一个一个column 来设置。也可以使用TableLayoutsetShrinkAllColumns/setStretchAllColumns 来设置all columns

     判断这些column 是否shrinkablestretchable ,可以调用isColumnShrinkable/isColumnStretchable(int columnIndex)isShrinkAllColumns()/isStretchAllColumns()

 

1.  <?xml version="1.0" encoding="utf-8"?> 

2.  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 

3.      android:layout_width="fill_parent" 

4.      android:layout_height="fill_parent" 

5.      android:shrinkColumns= "0" //  设置第一个column 可收缩  

6.   

7.      <TableRow> 

8.          <TextView 

9.              android:text="column1" 

10.             android:padding="3dip"  /> 

11.         <TextView 

12.             android:text="column2" 

13.             android:padding="3dip"  /> 

14.         <TextView 

15.             android:text="column3" 

16.             android:padding="3dip"  /> 

17.     </TableRow> 

18.  

19.     <TableRow> 

20.         <TextView 

21.           android:text="column11" 

22.           android:visibility="invisible"/> 

23.         <TextView 

24.             android:text=" 左边的invisible" 

25.             android:gravity="right" 

26.             android:padding="3dip" /> 

27.         <Button 

28.             android:id="@+id/go2" 

29.             android:text="go2"  

30.             android:padding="3dip" /> 

31.         <Button 

32.             android:text="cancel" 

33.             android:padding="3dip" /> 

34.     </TableRow> 

35.  

36.     <View 

37.         android:layout_height="2dip" 

38.         android:background="#F00" /> 

39.  

40.     <TableRow> 

41.         <TextView 

42.           android:text=" 右边的cell empty" /> 

43.         <TextView 

44.             android:layout_column="2" 

45.             android:text=" 跳开empty cell" 

46.             android:padding="3dip" /> 

47.         <TextView 

48.             android:text="123456789" 

49.             android:padding="3dip" /> 

50.     </TableRow> 

51. </TableLayout> 

可收缩column 效果

     现在可以看到第一个column 为了让第4column 完整显示,而收缩得内容分为几行显示!

 

     可伸展column 的效果就是在其他column 可以完整显示时,该column 就会伸展,占最多空间:

 

1.  <?xml version="1.0" encoding="utf-8"?> 

2.  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 

3.      android:layout_width="fill_parent" 

4.      android:layout_height="fill_parent" 

5.      android:stretchColumns= "1"> //  设置第二个column 可伸展

6.   

7.     <TableRow> 

8.          <TextView 

9.              android:text="column1" 

10.             android:padding="3dip" /> 

11.         <TextView 

12.             android:text="column2" 

13.             android:gravity="right" 

14.             android:padding="3dip" /> 

15.         <TextView 

16.             android:text="column3" 

17.             android:padding="3dip"  /> 

18.     </TableRow> 

19.  

20.     <TableRow> 

21.         <TextView 

22.             android:text="column1" 

23.             android:padding="3dip" /> 

24.         <TextView 

25.             android:text="column2" 

26.             android:gravity="right" 

27.             android:padding="3dip" /> 

28.         <TextView 

29.             android:text="column3" 

30.             android:padding="3dip"  /> 

31.     </TableRow> 

32. </TableLayout> 

可伸展column 效果

 

       而动态隐藏column ,可以调用TableLayout.setColumnCollapsed (int columnIndex, boolean isCollapsed) 来指定相应的column 。另外TableLayout 类的boolean isColumnCollapsed (int columnIndex) 能够判断指定的column 是否隐藏。

 

      TableLayout 可以用来做网页上的Form 显示效果,看看官方的sample

 

1.  <?xml version="1.0" encoding="utf-8"?> 

2.  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 

3.     android:layout_width="fill_parent" 

4.     android:layout_height="fill_parent" 

5.     android:stretchColumns="1"> 

6.   

7.     <TableRow> 

8.         <TextView 

9.             android:text="@string/table_layout_10_user" 

10.            android:textStyle="bold" 

11.            android:gravity="right" 

12.            android:padding="3dip" /> 

13.  

14.        <EditText android:id="@+id/username" 

15.            android:text="@string/table_layout_10_username_text" 

16.            android:padding="3dip" 

17.            android:scrollHorizontally="true" /> 

18.    </TableRow> 

19.  

20.    <TableRow> 

21.        <TextView 

22.            android:text="@string/table_layout_10_password" 

23.            android:textStyle="bold" 

24.            android:gravity="right" 

25.            android:padding="3dip" /> 

26.  

27.        <EditText android:id="@+id/password" 

28.            android:text="@string/table_layout_10_password_text" 

29.            android:password="true" 

30.            android:padding="3dip" 

31.            android:scrollHorizontally="true" /> 

32.    </TableRow> 

33.  

34.    <TableRow 

35.        android:gravity="right"> 

36.  

37.        <Button android:id="@+id/cancel" 

38.            android:text="@string/table_layout_10_cancel" /> 

39.  

40.        <Button android:id="@+id/login" 

41.            android:text="@string/table_layout_10_login" /> 

42.    </TableRow> 

43. </TableLayout> 

Form 效果

 

  • 大小: 5.7 KB
  • 大小: 6.1 KB
  • 大小: 2.1 KB
  • 大小: 7.3 KB
分享到:
评论

相关推荐

    Android TableLayout实现边框

    在Android开发中,TableLayout是布局管理器的一种,它允许开发者以表格的形式排列视图(Views)。本教程将深入探讨如何在Android应用中使用TableLayout来实现边框效果,同时结合提供的源码进行分析。 首先,...

    Android使用TableLayout动态布局实例

    `TableLayout`是Android提供的一种用于创建表格样式的布局,尤其适合展示数据或者组织组件。本篇文章将深入探讨如何使用`TableLayout`进行动态布局,结合实例来理解其用法。 `TableLayout`是`LinearLayout`的扩展,...

    TableLayout,实现动态添加和删除行,并实现统计表格中的数据

    TableLayout是Android布局管理器中的一种,它是线性布局(LinearLayout)的扩展,主要用于构建类似电子表格的二维布局。TableLayout允许开发者创建一个由行和列组成的表格,非常适合展示数据或者创建复杂的表单。在...

    Android TableLayout数据列表的回显清空实现思路及代码

    在Android开发中,TableLayout是布局管理器的一种,常用于创建表格形式的数据展示。本文将详细探讨如何在TableLayout中实现数据列表的回显和清空,并提供相关的代码实现思路。 首先,我们要理解TableLayout的基本...

    详解Android TableLayout中stretchColumns、shrinkColumns的用法

    总的来说,`stretchColumns`和`shrinkColumns`是Android TableLayout中非常实用的属性,它们帮助开发者更好地控制表格的列宽,实现自适应的界面布局。通过合理利用这两个属性,可以创建出适应不同屏幕尺寸和内容的...

    Android入门第五篇之TableLayout (二).docx

    在Android开发中,TableLayout是一种非常实用的布局组件,用于创建类似表格的结构,它可以很好地组织和对齐多个视图。这篇文档主要介绍了如何在代码中动态地添加数据到TableLayout,从而实现更加灵活的界面构建。 ...

    用TABLELAYOUT做表格

    在Android开发中,创建用户界面是一项重要任务,而表格布局(TableLayout)是实现结构化数据展示的有效方式。本文将详细介绍如何使用TableLayout来构建一个功能完善的表格,并提供一些最佳实践和注意事项。让我们...

    android固定头部和左侧表格实现

    描述中提到,这个实现方法不依赖于`TableLayout`,这是一种原生的Android布局,虽然简单但功能有限,不支持复杂的表格布局。因此,开发者可能采用了自定义View或者使用第三方库来实现这种效果。自定义View通常需要...

    android之layout(二)RelativeLayout, TableLayout

    在Android开发中,布局管理器是构建用户界面的关键组件,它们负责组织和定位应用程序中的视图元素。本篇文章将深入探讨两种常用的布局管理器:RelativeLayout和TableLayout。 **RelativeLayout** RelativeLayout是...

    详解Android TableLayout表格布局

    在Android开发中,TableLayout是一种常用的布局方式,它允许开发者以表格的形式组织用户界面元素。TableLayout继承自LinearLayout,因此它的基本布局特性是线性的,但增加了表格的特性,使得内容可以按照行列的方式...

    android 利用TableLayout自动生成表格

    在Android开发中,TableLayout是布局管理器的一种,它允许我们创建二维的表格形式的界面。这个组件在显示数据或创建表单时非常有用。本文将深入探讨如何利用TableLayout自动生成表格,以及相关的Android开发知识。 ...

    TableLayout伸缩列

    TableLayout是Android开发中一种布局管理器,它用于在屏幕上创建表格式的布局。在这个布局中,你可以设置行和列,并让这些元素根据需要自动伸缩。TableLayout的主要优点在于其灵活性,可以方便地创建响应式界面,...

    Android UI LinearLayout权限级别与TableLayout混合使用,

    在Android UI设计中,`LinearLayout`和`TableLayout`是两种常见的布局管理器,它们各自有不同的特点和使用场景。在实际开发中,我们有时需要将它们混合使用,以实现更复杂的界面布局。本文将深入探讨`LinearLayout`...

    TableLayout数据显示

    TableLayout是Android开发中一种布局管理器,它用于在屏幕上以表格形式排列视图组件。在Android应用设计中,TableLayout常被用来构建有结构的数据展示或者创建复杂的用户界面。以下是对TableLayout的详细说明: 1. ...

    TableLayout实现gridview嵌套gridview效果

    `TableLayout`是Android提供的一种用于创建表格样式的布局,而`GridView`则是用于展示数据集的网格视图。本篇文章将详细探讨如何利用`TableLayout`实现`GridView`的嵌套效果,以此达到更复杂的界面设计需求。 `...

    用TableLayout瀑布效果(参差不齐的排版)

    `TableLayout`是Android提供的一种用于创建表格样式的布局,它可以方便地组织视图组件(View)以形成行和列的结构。在本教程中,我们将深入探讨如何使用`TableLayout`来实现一个特殊的瀑布效果,即九宫格参差不齐的...

    android -button 事件

    Android 对 Button 的三种监听 Android 对 Button 的三种监听 Android 对 Button 的三种监听 https://blog.csdn.net/nicepainkiller/article/details/85038886

    android tablayout重新排序以及拖动选择标签

    在Android开发中,TabLayout是谷歌提供的一个用于创建标签页的组件,通常与ViewPager结合使用,为用户提供一种方便的方式在多个视图之间切换。本文将深入探讨如何实现TabLayout的标签拖动选择和重新排序功能,以达到...

    Android布局之TableLayout表格布局

    在Android开发中,布局设计是构建用户...总之,TableLayout是Android布局体系中一个实用的工具,尤其适用于数据展示和组织结构化的视图。通过熟练掌握其属性和用法,开发者能够创建出适应性强、易于阅读的用户界面。

    android 点按钮添加TableRow

    在Android开发中,`Button`和`TableRow`是两种非常常见的UI组件,它们分别用于创建交互式的按钮和呈现行布局的数据。在这个特定的场景中,`Add Button`可能是一个示例项目,它演示了如何在`TableRow`中动态添加`...

Global site tag (gtag.js) - Google Analytics