>>分享Android开发相关的技术 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 19082 个阅读者 刷新本主题
 * 贴子主题:  Android UI学习 - TableLayout 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2020-05-15 10:55:35     消息  查看  搜索  好友  邮件  复制  引用

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

       单元格可以为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.        < TableRow >  
  6.            < TextView  
  7.                android:text = "column1"  
  8.                android:padding = "3dip"    />  
  9.            < TextView  
  10.                android:text = "column2"  
  11.                android:padding = "3dip"    />  
  12.            < TextView  
  13.                android:text = "column3"  
  14.                android:padding = "3dip"    />  
  15.        </ TableRow >  
  16.        < TableRow >  
  17.            < TextView  
  18.              android:text = "column11"  
  19.               android:visibility= "invisible" />  //cell不见了
  20.            < TextView  
  21.                android:text = "左边的invisible"  
  22.                android:gravity = "right"  
  23.                android:padding = "3dip"   />  
  24.            < Button  
  25.                android:id = "@+id/go"  
  26.                android:text = "go"  
  27.                android:padding = "3dip"   />  
  28.            < Button  
  29.                android:text = "cancel"  
  30.                android:padding = "3dip"   />  
  31.        </ TableRow >  
  32.         < View                               //间隔线
  33.            android:layout_height= "2dip"
  34.            android:background= "#F00" />
  35.        < TableRow >  
  36.            < TextView  
  37.                android:text = "右边的cell empty"   />  
  38.            < TextView  
  39.                 android:layout_column= "2"
  40.                android:text = "跳开empty cell"  
  41.                android:padding = "3dip"   />  
  42.        </ TableRow >  
  43.        < TableRow >  
  44.            < TextView  
  45.                android:text = "合并3个单元格"  
  46.                 android:layout_span= "3"  
  47.                android:gravity = "center_horizontal"  
  48.                android:background = "#FFC0C0C0"  
  49.                android:textColor = "#f00"  
  50.                android:padding = "3dip"   />  
  51.        </ TableRow >  
  52.    </ TableLayout >  

没有设置收缩/伸展效果

     点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

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

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

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

     判断这些column是否shrinkable或stretchable,可以调用 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.        < 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.        < TableRow >  
  18.            < TextView  
  19.              android:text = "column11"  
  20.              android:visibility = "invisible" />  
  21.            < TextView  
  22.                android:text = "左边的invisible"  
  23.                android:gravity = "right"  
  24.                android:padding = "3dip"   />  
  25.            < Button  
  26.                android:id = "@+id/go2"  
  27.                android:text = "go2"  
  28.                android:padding = "3dip"   />  
  29.            < Button  
  30.                android:text = "cancel"  
  31.                android:padding = "3dip"   />  
  32.        </ TableRow >  
  33.        < View  
  34.            android:layout_height = "2dip"  
  35.            android:background = "#F00"   />  
  36.        < TableRow >  
  37.            < TextView  
  38.              android:text = "右边的cell empty"   />  
  39.            < TextView  
  40.                android:layout_column = "2"  
  41.                android:text = "跳开empty cell"  
  42.                android:padding = "3dip"   />  
  43.            < TextView  
  44.                android:text = "123456789"  
  45.                android:padding = "3dip"   />  
  46.        </ TableRow >  
  47.    </ TableLayout >  

          可收缩column效果

     点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

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

          而 可伸展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.       < TableRow >  
  7.            < TextView  
  8.                android:text = "column1"  
  9.                android:padding = "3dip"   />  
  10.            < TextView  
  11.                android:text = "column2"  
  12.                android:gravity = "right"  
  13.                android:padding = "3dip"   />  
  14.            < TextView  
  15.                android:text = "column3"  
  16.                android:padding = "3dip"    />  
  17.        </ TableRow >  
  18.        < TableRow >  
  19.            < TextView  
  20.                android:text = "column1"  
  21.                android:padding = "3dip"   />  
  22.            < TextView  
  23.                android:text = "column2"  
  24.                android:gravity = "right"  
  25.                android:padding = "3dip"   />  
  26.            < TextView  
  27.                android:text = "column3"  
  28.                android:padding = "3dip"    />  
  29.        </ TableRow >  
  30.    </ TableLayout >  

       可伸展column效果

     点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

       而动态隐藏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.       < TableRow >  
  7.           < TextView  
  8.               android:text = "@string/table_layout_10_user"  
  9.               android:textStyle = "bold"  
  10.               android:gravity = "right"  
  11.               android:padding = "3dip"   />  
  12.           < EditText   android:id = "@+id/username"  
  13.               android:text = "@string/table_layout_10_username_text"  
  14.               android:padding = "3dip"  
  15.               android:scrollHorizontally = "true"   />  
  16.       </ TableRow >  
  17.       < TableRow >  
  18.           < TextView  
  19.               android:text = "@string/table_layout_10_password"  
  20.               android:textStyle = "bold"  
  21.               android:gravity = "right"  
  22.               android:padding = "3dip"   />  
  23.           < EditText   android:id = "@+id/password"  
  24.               android:text = "@string/table_layout_10_password_text"  
  25.               android:password = "true"  
  26.               android:padding = "3dip"  
  27.               android:scrollHorizontally = "true"   />  
  28.       </ TableRow >  
  29.       < TableRow  
  30.           android:gravity = "right" >  
  31.           < Button   android:id = "@+id/cancel"  
  32.               android:text = "@string/table_layout_10_cancel"   />  
  33.           < Button   android:id = "@+id/login"  
  34.               android:text = "@string/table_layout_10_login"   />  
  35.       </ TableRow >  
  36.    </ TableLayout >  

         Form效果

     点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小



----------------------------
原文链接:https://blog.51cto.com/android/314262

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-06-04 08:26:56 重新编辑]
网站系统异常


系统异常信息
Request URL: http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=3273

java.lang.NullPointerException

如果你不知道错误发生的原因,请把上面完整的信息提交给本站管理人员