Android精通：TableLayout布局，GridLayo

标题图

在Android中提供了几个常用布局：

1. LinearLayout线性布局
2. RelativeLayout相对布局
3. FrameLayout帧布局
4. AbsoluteLayout绝对布局
5. TableLayout表格布局
6. GridLayout网格布局

---

TableLayout表格布局

TableLayout表格布局.png

TableLayout的介绍

TableLayout是将子类向分别排列成行和列的布局视图容器，TableLayout是由许多TableRow对象组成的，表格布局以行列的形式管理子控件，每一个单元是一个TableRow或者View对象。

在TableLayout中可以通过setConlumnShrinkable()或setConlumnStretchable()方法来指定某些列为可以缩小或可伸缩，列是从0开始计数的，第一列为0。

属性

常用的几种属性：

stretchColumns为设置运行被拉伸的列的序号，如android:stretchColumns="2,3"表示在第三列的和第四列的一起填补空白，如果要所有列一起填补空白，则用“*”符号，列号都是从0开始算的。

shrinkColumns为设置被收缩的列的序号，收缩是用于在一行中列太多或者某列的内容文本过长，会导致某列的内容会被挤出屏幕，这个属性是可以帮助某列的内容进行收缩，用于防止被挤出的。

android:collapseColumns为设置需要被隐藏的列的序号，使用该属性可以隐藏某列。

android:layout_column为为该子类控件显示在第几列。android:layout_column="2"表示跳过第二个，直接显示在第三个单元格内。

android:layout_span为为该子类控件占据第几列。android:layout_span="3"表示合并3个单元格，就是这个组件将占据3个单元格。

collapseColumns隐藏列

效果如图：

tablelayout

android:collapseColumns = "0,2"，用于隐藏第一列和第三列，代码如下:

<TableLayout
  android:id="@+id/TableLayout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:collapseColumns="0,2" >
 <TableRow>

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="one" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="two" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="three" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="four" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="five" />
  </TableRow>
</TableLayout>

stretchColumns拉伸列

android:stretchColumns = “1”，设置为第二列为可拉伸列的列，让该列填满这一行所有的剩余空间，也就是在整个父宽度的情况在，放几个按钮，剩下的空间宽度将用第二列填满，代码如下:

tablelayout

<TableLayout
  android:id="@+id/TableLayout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:stretchColumns="1" >

  <TableRow>

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="one" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="two" />

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="three" />

  </TableRow>
</TableLayout>

shrinkColumns收缩列

android:shrinkColumns="1"表示将第二列的内容进行收缩，如果屏幕的额宽度包容不下的话，就会拿第二列进行收缩，就是压扁，拉长。如同上代码进行修改即可，多加些内容，让其文本内容超出屏幕吧！

GridLayout网格布局

GridLayout网格布局是在Android 4.0以后引入的一种新的布局模式，和表格布局是有点类似的，但比表格布局的好，功能也是很强大的，它可以设置布局有多少行和有多少列，也可以设置布局中的组件的排列方式，也可以设置组件的位置，横跨多少行，多少列。

属性的那点东西

android:orientation用于设置vertical竖直或horizontal水平。

android:layout_gravity为设置对齐方式，可以设置center,right,left等。

android:rowCount为可以设置行数，要多少行设置多少行，如android:rowCount="2"为设置网格布局有2行。

android:columnCount为可以设置列数，要多少列设置多少列，如android:columnCount="2"为设置网格布局有2列。

android:layout_row为设置组件位于第几行，从0开始计数的，如android:layout_row="1"为设置组件在第2行。

android:layout_column为设置组件位于第几列，从0开始计数的，如android:layout_column="1"为设置组件在第2列。

android:layout_rowSpan为设置组件横跨几行，如android:layout_rowSpan="2"为纵向横跨2行。

android:layout_columnSpan为设置组件横跨几列，如android:layout_columnSpan="2"为橫向横跨2列。

注意事项：低版本sdk是如何使用GridLayout的呢？要导入v7包的gridlayout包即可，因为GirdLayout是4.0后才推出的，标签代码。

<android.support.v7.widget.GridLayout>

FrameLayout帧布局

FrameLayout帧布局是什么样的呢？所有子控件都放在左上角且后面元素都是直接覆盖在前面元素之上一种布局模式。

常用属性：

android:foreground为设置改帧布局容器的前景图像，什么是前景图像，前景图像是永远处于帧布局容器的最上面的图像，就是不会被覆盖的图片。

android:foregroundGravity为设置前景图像显示的位置。

列子代码

FrameLayout

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/FrameLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:background="#FF6143" />
  <TextView
  android:layout_width="150dp"
  android:layout_height="150dp"
  android:background="#7BFE00" />
  <TextView
  android:layout_width="100dp"
  android:layout_height="100dp"
  android:background="#FFFF00" />

</FrameLayout>

用帧布局可以做出霓虹灯的效果，即为每个TextVeiw设置layout_gravity="center"即可，即可以看到不一样的效果。

效果

AbsoluteLayout绝对布局

AbsoluteLayout绝对布局是通过x,y位置来为子控件设置位置的，即android:layout_x和android:layout_y属性。

四大控制属性.png

由于绝对布局不常见，不常用，因为在不同大小的适配屏幕上的位置直观上会变化，适应能力差，所以不建议使用。

RelativeLayout相对布局

RelativeLayout是一个相对布局的视图组，用来显示相对位置的子视图类，在默认情况下，所有子视图对会分布在左上角。

这里简单温习一下相关属性即可：

android:layout_below 为位于某控件下方，以id为标记
android:layout_above 为位于某控件上方，以id为标记
android:layout_toLeftOf 为位于某控件左方，以id为标记
android:layout_toRightOf为位于某控件右方，以id为标记

android:layout_alignBottom 为与某控件底部对齐，以id为标记
android:layout_alignTop 为与某控件顶部对齐，以id为标记
android:layout_alignLeft 为与某控件左边缘对齐，以id为标记
android:layout_alignRight为与某控件右边缘对齐，以id为标记

android:layout_alignBaseline 为与某控件的文本内容在一条直线上

android:layout_alignParentBottom 为在父容器最下，为true或false
android:layout_alignParentTop 为在父容器最上，为true或false
android:layout_alignParentLeft为在父容器最左，为true或false
android:layout_alignParentRight为在父容器最右，为true或false

android:layout_marginTop 为和父容器上端的距离，单位为dp
android:layout_marginBottom 为和父容器下端的距离，单位为dp
android:layout_marginLeft 为和父容器左端的距离，单位为dp
android:layout_marginRight 为和父容器右端的距离，单位为dp
android:layout_margin为和父容器四周的距离，单位为dp

android:layout_centerVertical 为在父类的垂直居中，为true或false
android:layout_centerHorizontal为在父类的水平居中，为true或false
android:layout_centerInParent 为在父类的水平垂直居中

结论

线性布局：
指子控件以水平或垂直方式排列。

相对布局：
指子控件以控件之间的相对位置或子控件相对于父容器的位置排列。

帧布局：
指所有子控件均放在左上角且后面元素直接覆盖在前面元素之上。

绝对布局：
指子控件通过绝对定位x，y位置来决定其位置摆放。

表格布局：
指以行列的形式放置子控件，每一行是一个TableRow对象或者View对象。

结语

• 本文主要讲解 Android精通：TableLayout布局，GridLayout网格布局，FrameLayout帧布局，AbsoluteLayout绝对布局，RelativeLayout相对布局
• 下面我将继续对Java、 Android中的其他知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞

送❤