网站内链建设锚文字建设,雇主品牌建设,菜鸟教程python在线编程,网站建设规划方案制作一、TableLayout的概述 表格布局是以行数和列数来确定位置进行排列。就像一间教室#xff0c;确定好行数与列数就能让同学有序入座。
注意#xff1a;我们需要先添加TableRow容器#xff0c;每添加一个就会多一行#xff0c;然后再往TableRow容器中添加其它组件。…一、TableLayout的概述 表格布局是以行数和列数来确定位置进行排列。就像一间教室确定好行数与列数就能让同学有序入座。
注意我们需要先添加TableRow容器每添加一个就会多一行然后再往TableRow容器中添加其它组件。
二、TableLayout的属性 2.1 、TableLayout(表格布局)的样式就像是一张表格。每个TableLayout都由多个TableRow组成每个TableRow就是一行有几个TableRow就有几行。TableLayout不会显示行号和列号也没有分割线其行数和列数都可以进行操作。 下面是 3 (行) x 3(列) 的TableLayout基本使用其xml布局文件table_layout.xml如下
?xml version1.0 encodingutf-8?
TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentTableRowButtonandroid:idid/button01android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮1 /Buttonandroid:idid/button02android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮2 /Buttonandroid:idid/button03android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮3 //TableRowTableRowButtonandroid:idid/button04android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮4 /Buttonandroid:idid/button05android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮5 /Buttonandroid:idid/button06android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮6 //TableRowTableRowButtonandroid:idid/button07android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮7 /Buttonandroid:idid/button08android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮8 /Buttonandroid:idid/button09android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮9 //TableRow
/TableLayout
效果图 2.2 、TableLayout的android:shrinkColumns属性当TableRow里边的空间布满布局的时候指定列自动延伸以填充可用部分。当TableRow里边的控件还没有布满布局时android:shrinkColumns不起作用。 下面的布局文件table_layout2.xml演示了android:shrinkColumns属性的使用
?xml version1.0 encodingutf-8?
TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:shrinkColumns2TableRowButtonandroid:idid/button01android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮1 /!-- android:text按钮1AAAAAAAAAAAAAAA --Buttonandroid:idid/button02android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮2 /!-- android:text按钮2AAAAAAAAAAAAAAA --Buttonandroid:idid/button03android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮3AAAAAAAAAAAAAAA //TableRowTableRowButtonandroid:idid/button04android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮4 /Buttonandroid:idid/button05android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮5 /Buttonandroid:idid/button06android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮6 //TableRowTableRowButtonandroid:idid/button07android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮7 /Buttonandroid:idid/button08android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮8 /Buttonandroid:idid/button09android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮9 //TableRow
/TableLayout
效果图 从上面的实际效果图片可以看到当TableLayout设置了android:shrinkColumns属性则在TableRow中的控件如果超长的话设置指定的列为可收缩的列。当可收缩的列太宽(内容过多)不会被挤出屏幕。当需要设置多列为可收缩时将列序号用逗号隔开。 2.3 、下面的布局文件table_layout3.xml演示了没有设置android:shrinkColumns属性则在TableRow中的控件超长也不会自动延伸以填充可用部分。
?xml version1.0 encodingutf-8?
TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentTableRowButtonandroid:idid/button01android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮1 /!-- android:text按钮1AAAAAAAAAAAAAAA --Buttonandroid:idid/button02android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮2AAAAAAAAAAAAAAA /!-- android:text按钮2 --Buttonandroid:idid/button03android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮3AAAAAAAAAAAAAAA //TableRowTableRowButtonandroid:idid/button04android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮4 /Buttonandroid:idid/button05android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮5 /Buttonandroid:idid/button06android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮6 //TableRowTableRowButtonandroid:idid/button07android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮7 /Buttonandroid:idid/button08android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮8 /Buttonandroid:idid/button09android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮9 //TableRow
/TableLayout
效果图 2.4、TableLayout的android:stretchColumns属性用于指定列对空白部分进行填充。 下面的布局文件table_layout4.xml演示了android:stretchColumns属性的使用
?xml version1.0 encodingutf-8?
TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:stretchColumns1TableRowButtonandroid:idid/button01android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮1/Buttonandroid:idid/button02android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮2/!-- android:text按钮2 --Buttonandroid:idid/button03android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮3//TableRowTableRowButtonandroid:idid/button04android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮4/Buttonandroid:idid/button05android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮5/Buttonandroid:idid/button06android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮6//TableRowTableRowButtonandroid:idid/button07android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮7/Buttonandroid:idid/button08android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮8/Buttonandroid:idid/button09android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text按钮9//TableRow
/TableLayout
效果图 2.5、collapseColumns(隐藏列) 流程:在TableRow中定义5个按钮后,接着在最外层的TableLayout中添加以下属性: android:collapseColumns “0,2”就是隐藏第一与第三列,代码如下:
?xml version1.0 encodingutf-8?
TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:stretchColumns1TableLayoutandroid:idid/TableLayout2android:layout_widthfill_parentandroid:layout_heightwrap_contentandroid:collapseColumns0,2TableRowButtonandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textone /Buttonandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:texttwo /Buttonandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textthree /Buttonandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textfour /Buttonandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textfive //TableRow/TableLayout
/TableLayout
效果图 三、使用实例
使用TableLayout来完成简单的登录界面,运行效果图如下:
流程解析:
1.调用gravity属性,设置为center_vertical,让布局里面的组件在竖直方向上居中 2.将TableLayout中的第一和第四列设置为可拉伸 3.在每个TableRow中添加两个TextView,用于拉伸填满该行,这样可以让表格水平居中 android:stretchColumns”0,3” 设置为0.3是为了让两边都充满,那么中间部分就可以居中了 TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:idid/TableLayout1android:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:background#FFFFFFandroid:gravitycenter_verticalandroid:stretchColumns0,3TableRowTextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text用户名: /EditTextandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:minWidth300dp //TableRowTableRowTextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text密 码: /EditTextandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:minWidth300dp //TableRowTableRowButtonandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:text登陆 /Buttonandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:text退出 //TableRow/TableLayout
效果图
