>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Android开发相关的技术 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Android技术专题 』 → Android UI学习 - TableLayout使用范例
发表一个新主题 开启一个新投票 回复文章 您是本文章第 19793 个阅读者 刷新本主题
 * 贴子主题:  Android UI学习 - TableLayout使用范例 回复文章 点赞(0)  收藏  
作者:Jacky    发表时间：2020-03-31 19:20:43     消息  查看  搜索  好友  邮件  复制  引用
       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" >  
  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 >  
  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 >  
  35.         < View                               //间隔线
  36.            android:layout_height= "2dip"
  37.            android:background= "#F00" />
  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 >  
  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 >  

没有设置收缩/伸展效果

     点击在新窗口中浏览原图 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可收缩
  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 >  
  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 >  
  36.        < View  
  37.            android:layout_height = "2dip"  
  38.            android:background = "#F00"   />  
  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效果

     点击在新窗口中浏览原图 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可伸展
  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 >  
  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效果

     点击在新窗口中浏览原图 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" >  
  7.       < TableRow >  
  8.           < TextView  
  9.               android:text = "@string/table_layout_10_user"  
  10.               android:textStyle = "bold"  
  11.               android:gravity = "right"  
  12.               android:padding = "3dip"   />  
  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 >  
  20.       < TableRow >  
  21.           < TextView  
  22.               android:text = "@string/table_layout_10_password"  
  23.               android:textStyle = "bold"  
  24.               android:gravity = "right"  
  25.               android:padding = "3dip"   />  
  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 >  
  34.       < TableRow  
  35.           android:gravity = "right" >  
  37.           < Button   android:id = "@+id/cancel"  
  38.               android:text = "@string/table_layout_10_cancel"   />  
  40.           < Button   android:id = "@+id/login"  
  41.               android:text = "@string/table_layout_10_login"   />  
  42.       </ TableRow >  
  43.    </ TableLayout >  

      Form效果

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



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

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



[这个贴子最后由 flybird 在 2020-04-18 18:56:51 重新编辑]
Java精品书籍推荐
Java最新视频教程推荐
  Java面向对象编程-->Java语言中的修饰符
  JavaWeb开发-->使用Session(Ⅱ)
  JSP与Hibernate开发-->映射一对多关联关系
  Java网络编程-->ServerSocket用法详解
  精通Spring-->通过Vuex进行状态管理
  Vue3开发-->CSS过渡和动画
本站其他相关文章
  Android的Service和广播的讲解
  Android之TabHost
  Android带有粘性头部的ScrollView-WelliJohn的博客
  Android Gallery实现循环显示图像
  Android的Service和广播的讲解
  Android那些事儿之LBS定位
  Android内核开发：图解Android系统的启动过程
  Roboletric+Retrofit2单元测试
  Html5调用手机摄像头并实现人脸识别
  Android 资源(Resources)管理
  Android中shape的使用-Kofi
  uniapp安卓ios百度人脸识别、活体检测、人脸采集APP原生插件
  Android 代码混淆技术
  Android中使用Activity管理类
  Android - 监听WebView加载失败的处理
  更多...
 IPIP: 已设置保密
树形列表:   
共1页 0条记录 当前第1页
发表一个新主题 开启一个新投票 回复文章

中文版权所有： JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶，分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权，请与本站管理员联系。