表格布局（TableLayout）
2017-10-06 本文已影响139人
a紫星
Tablelayout以行和列的形式对控件进行管理，每一行为一个TableRow对象。当为TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。
有多少个子控件就有多少列;当为View时，该View将独占一行。
按照国际惯例先上布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="÷" />
</TableRow>
</TableLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="×" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="back" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
</TableRow>
</TableLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
</TableRow>
</TableLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TableRow>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="0" />
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="." />
</TableRow>
</TableLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/holo_orange_dark"
android:text="=" />
</TableRow>
</TableLayout>
</RelativeLayout>
效果.png
大家也看到了，这个效果为一个计算器的布局，为什么要选择计算器的布局呢？因为使用计算器的布局能基本上把TableLayout的所有特性都表达清楚。
因为这里面既包含了行合并有包含了列合并
- 列合并的时候需要对应的列都按照合并的个数来对应书写
例如：计算器中“0”需要列合并，那么“C”和“÷”、“7”和“8”、“4”和“5”、“1”和“2”就需要写在一个TableLayout的2个TableRow里面，这样到后面“0”才会占有2个元素的空间 - 行合并时也需要对应的行都按照合并的个数来对应书写
例如：计算器中“=”需要列合并，那么“1”、“2”、“3”、“0”、“.”、“=”就需要写在一个TableRow里面，然后在横向分为3部分：
1. 第一部分 “1”、“2”、“0”
2. 第二部分 “3”、“.”
3. 第三部分 “=”
下面为布局结构简图
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableLayout ...>
<TableLayout ...>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/holo_orange_dark"
android:text="=" />
</TableRow>
TableLayout只要能熟练掌握这个计算器的布局，那么在平时开发中应该算是完全可以胜任了。
对了在design包中还有一个和TableLayout名字和读音很相似的的一个布局，TabLayout 但是用法和功能完全不同，下次详细介绍这个。
代码只会按照你所写的方式运行，不会按照你想的方式运行
