TableLayout
TableLayout使用表格的方式划分子组件。
图1 表格布局示意图
支持的XML属性
TableLayout的共有XML属性继承自：Component
TableLayout的自有XML属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| alignment_type | 对齐方式 | align_edges | 表示TableLayout内的组件按边界对齐。 | ohos:alignment_type="align_edges" |
| align_contents | 表示TableLayout内的组件按边距对齐。 | ohos:alignment_type="align_contents" | ||
| column_count | 列数 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 | ohos:column_count="3"ohos:column_count="$integer:count" |
| row_count | 行数 | integer类型 | 可以直接设置整型数值，也可以引用integer资源。 | ohos:row_count="2"ohos:row_count="$integer:count" |
| orientation | 排列方向 | horizontal | 表示水平方向布局。 | ohos:orientation="horizontal" |
| vertical | 表示垂直方向布局。 | ohos:orientation="vertical" |
在XML文件中创建TableLayout
<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#87CEEB" ohos:layout_alignment="horizontal_center" ohos:padding="8vp"></TableLayout>添加组件
在XML创建Text的背景table_text_bg_element.xml。
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="5vp"/> <stroke ohos:width="1vp" ohos:color="gray"/> <solid ohos:color="#00BFFF"/></shape>在TableLayout布局中添加组件。
<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#87CEEB" ohos:layout_alignment="horizontal_center" ohos:padding="8vp"> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:table_text_bg_element" ohos:margin="8vp" ohos:text="1" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:table_text_bg_element" ohos:margin="8vp" ohos:text="2" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:table_text_bg_element" ohos:margin="8vp" ohos:text="3" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:height="60vp" ohos:width="60vp" ohos:background_element="$graphic:table_text_bg_element" ohos:margin="8vp" ohos:text="4" ohos:text_alignment="center" ohos:text_size="20fp"/></TableLayout>图2 TableLayout默认一列多行
设置行数和列数
<TableLayout ... ohos:row_count="2" ohos:column_count="2">图3 设置TableLayout的行为2，列为2效果
设置对齐方式
在XML中设置对齐方式，以”align_contents“为例：
<TableLayout ... ohos:alignment_type="align_contents"> ...</TableLayout>