![Hello HarmonyOS!:鸿蒙应用开发从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/437/43738437/b_43738437.jpg)
2.2.4 TableLayout
TableLayout是一种表格布局,将页面分为多个单元格,以行、列单元格的形 式 来 管 理 子 组 件,其 最 基 本 的 两 个 属 性 是 ohos:row_count 和ohos:column_count,分别代表行数和列数。图2-23所示为ohos:row_count=3,ohos:column_count=3 的表格布局。在 TableLayout 中,组件的排列方向ohos:orientation属性指定了组件在排列时,是按垂直方向排列还是按水平方向排列。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_109_1.jpg?sign=1739275094-MJ7Zyv5rIxVl9sjzdvwDWxYntPNsyfrI-0-ad810d9b29fbdb8c593de939ea78bea4)
图2-23 表格布局示意图
TableLayout有以下特有的属性,见表2-4。
表2-4 TableLayout的属性
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_109_2.jpg?sign=1739275094-SEUIQLLlMHNSoRH71adqwaoM5816dniJ-0-c4874905c719e57192a87357cb4d5796)
下面来看一些具体问题,首先设置表格的属性。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_109_3.jpg?sign=1739275094-BOyrPIsPF41hEN3R449GvWDsXSeqALlK-0-4d75a662d105dee987b159e26d472860)
在上述代码中,表格设置的是水平排列,column_count 设置为 1,表示TableLayout只有一列,然后在TableLayout中添加3个组件。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_110_1.jpg?sign=1739275094-M5wQHBeKFGTAwp9w0MwsxeMllsFhKnth-0-678d879bf5f8e41c830b963171d96a2f)
页面的预览效果如图2-24所示。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_110_2.jpg?sign=1739275094-7RhJvIrJBpR1idRXCIXLMy78tgpxHfM8-0-05af9c8567a5ed2a1995844551cc3c51)
图2-24 表格布局的单列演示
虽然TableLayout的排列方向设置为水平,但实际效果是组件排成一列。虽然设置了水平排列,B 组件的位置应该在 A 组件的右侧,但由于TableLayout 设置的列数为 1,意思是每一行只有一列。所以,A组件的右侧已经没有位置了,B组件只能被绘制到第二行。同理,C组件的位置也是这样确定的。
现在把列数设置为2,在TableLayout中放入5个组件。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_111_1.jpg?sign=1739275094-wVvSUn9IUgvqKGTEMa7h3AsOsMvs0ZIx-0-141ae364ccc058381ec9bc3e3b7fcffe)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_112_1.jpg?sign=1739275094-V1EiXwAK5ln43uBl66OHN94MY7HZSZsJ-0-574ff8e7fe74892d3ae094a06423c5ca)
页面的预览效果如图2-25所示。
设置 ohos:column_count="2"的含义是,每一行最多可以放两个组件,多的组件只能放到下一行,比如在上述例子中,组件的第一行分别是A、B组件,C组件排到了第二行。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_112_2.jpg?sign=1739275094-p5ceTvweRUT89ctKzr9DSAtWh0zAyFli-0-c2feda82d821f5f6f89d3ccca0f7b2c4)
图2-25 表格布局的多列演示
细心的读者可能发现,在TableLayout的属性中,还加入了 ohos:row_count="2",声明了TableLayout 有两行,但很明显,这个属性值并未起作用,因为第五个组件 E被放到了第三行,可以理解为,当表格的方向设置为水平时,它的ohos:row_count 属性不起作用。根据对偶性,当表格的方向设置为垂直时,ohos:column_count属性不起作用。TableLayout的排列方向默认为水平。
TableLayout还有另一个属性alignment_type,它有两个子属性:边距对齐“align_contents”、边界对齐“align_edges”,默认为“align_contents”。下面来测试这两个属性的效果。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_112_3.jpg?sign=1739275094-QmgjBRsACP9icXRuCwoLxp5ZnhDei34A-0-9bf1748e2e3bd9573145eb79edb56925)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_113_1.jpg?sign=1739275094-FvmDy5jqWwY11v4xUcBxHMe4g21kJVsN-0-e7dec6bf3c6d802271099af1c634035a)
在TableLayout中摆放三个组件,对齐方式为边距对齐“align_contents”。其中,A组件加了外边距20vp,B组件和C组件都没有加外边距。页面的预览效果如图2-26所示。
我们可以很清晰地看到A组件四周的外边距。B组件由于没有外边距,紧贴着 A 组件右侧外边距的位置和屏幕顶部来绘制。C 组件紧贴屏幕左侧和 A组件下侧外边距来绘制。但是当给C组件一个比A组件大的外边距时,B组件左侧的参考位置就发生了变化。我们看一下下面的例子。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_113_2.jpg?sign=1739275094-zv0j3YesxIOdxl3sVqOHsqyv92Yk8gwi-0-b743c09e0ec297d59d7b275159e13d5f)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_114_1.jpg?sign=1739275094-YBGwZFsY9vFcWg0WtcPfKpMxWSSDGiWp-0-700eb460f2dd4c03976f272593f8e5e7)
这个案例和上面案例的不同点在于,C组件的外边距被设置为50vp,明显比A组件的外边距20vp要大。那么在绘制B组件时,B组件左侧紧贴的不再是 A 组件右侧的外边距,而是边距更大的 C 组件右侧的外边距,页面的预览效果如图 2-27 所示,这就是边距对齐的含义。在这种方式下,组件的边距值确定了组件所占的矩形区域大小。对于表格布局,上下排列的表格大小是一样的,如果下方表格比上方表格大,那么自然就会把上方的表格撑开,在垂直方向上也是一样的。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_114_2.jpg?sign=1739275094-F8h9xlLc7fKM5wBu6kmYIJkBuSaGnV1x-0-0c1dd37b6e274c89de356df4e279ac4e)
图2-26 表格布局的边距对齐“align_contents”的效果
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_114_3.jpg?sign=1739275094-q9c1CvUWhVFBATpadeA3Fg7EuO5BX9an-0-335fce0d25f3234001455c5666b2e030)
图2-27 表格布局的修改组件的边距效果
把TableLayout的对齐方式改为align_edges,其他都不做改动。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_115_1.jpg?sign=1739275094-D3aeTsirQ7ySTudmnoDbD9amGVPyQxWR-0-4df7958a7a1e365b9b588c35f1dad618)
页面的预览效果如图2-28所示。
在边界对齐的方式下,B组件虽然没有边距,但B组件的上边界和A组件的上边界对齐了,A组件的左边界也和C组件的左边界对齐了,在行和列两个方向上取外边距最大的组件的外边距作为其他组件绘制时的外边距,从而将边界进行“对齐”。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_115_2.jpg?sign=1739275094-bOTsrMAgRq9yBxa3iY1LQnO0GntKDyGW-0-6cce90e1e57d38f8880a3f3415f76c6a)
图2-28 表格布局的边界对齐“align_edges”的效果
实现TableLayout的Java代码如下。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_115_3.jpg?sign=1739275094-ERN7h6DLDMXhPrfsnBFKJ0x1JwINNWOo-0-b605ca0016da0c5441ce030eb4962d46)
Button 通 过 TableLayout.LayoutConfig 的Specification 对象来为行和列进行设置,其中TableLayout.specification包含多个重载方法。
TableLayout.Specification specification(int start,float weight)
TableLayout.Specification specification(int start,int size)
TableLayout.Specification specification(int start,int size,float weight)
TableLayout.Specification specification(int start,int size,int alignment)
TableLayout.Specification specification(int start,int size,int alignment,float weight)
其中,start为起始行(列)的索引,从0开始计数。size是跨行(列)的数量,如果为 1,那么代表不跨行(列)。weight 为组件所在位置的权重值。alignment是组件的对齐方式。