• TableLayout 使用表格的方式劃分子組件，如下所示：

• TableLayout 的共有 XML 屬性繼承自 Component，詳情請參考我之前的博客：HarmonyOS之組件通用的XML屬性總覽。
• 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"?><TableLayoutxmlns: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"><cornersohos:radius="5vp"/><strokeohos:width="1vp"ohos:color="gray"/><solidohos:color="#00BFFF"/></shape>

• • 在 TableLayout 布局中添加組件：

<?xml version="1.0" encoding="utf-8"?><TableLayoutxmlns: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"><Textohos: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"/><Textohos: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"/><Textohos: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"/><Textohos: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>

• • TableLayout 默認一列多行，如下：

• 設置行數和列數：

<TableLayout...ohos:row_count="2"ohos:column_count="2">

• 設置 TableLayout 的行為 2，列為 2 效果，如下所示：

• 設置對齊方式
• • TableLayout 提供兩種對齊方式，邊距對齊“align_contents”、邊界對齊“align_edges”，默認為邊距對齊。
• • 邊距對齊效果：

• • 代碼如下：

<?xml version="1.0" encoding="utf-8"?><TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_content"ohos:alignment_type="align_contents"ohos:background_element="$graphic:layout_borderline"ohos:column_count="3"ohos:padding="8vp"><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="8vp"ohos:padding="8vp"ohos:text="1"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="2"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="32vp"ohos:padding="8vp"ohos:text="3"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="32vp"ohos:padding="8vp"ohos:text="4"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="5"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="8vp"ohos:padding="8vp"ohos:text="6"ohos:text_alignment="center"ohos:text_size="14fp"/></TableLayout>

• • 如上代碼，將 TableLayout 的對齊方式修改為邊界對齊：

<TableLayout...ohos:alignment_type="align_edges">...</TableLayout>

• • 邊界對齊效果：
    
• • 引用背景資源文件如下：layout_borderline.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:radius="5vp"/><strokeohos:width="1vp"ohos:color="gray"/></shape>

• 設置子組件的行列屬性
• • TableLayout 的合并單元格的功能可以通過設置子組件的行列屬性來實現。
• • 設置子組件的行列屬性均為2的效果展示：

• • 在 XML 中創建 TableLayout，并添加子組件，代碼如下：

<?xml version="1.0" encoding="utf-8"?><TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_content"ohos:alignment_type="align_edges"ohos:background_element="$graphic:layout_borderline"ohos:column_count="3"ohos:padding="8vp"ohos:row_count="3"><Textohos:id="$+id:text_one"ohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="1"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="2"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="3"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="4"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="5"ohos:text_alignment="center"ohos:text_size="14fp"/><Textohos:height="48vp"ohos:width="48vp"ohos:background_element="$graphic:table_text_bg_element"ohos:margin="16vp"ohos:padding="8vp"ohos:text="6"ohos:text_alignment="center"ohos:text_size="14fp"/></TableLayout>

• • 在 Java 代碼中設置子組件的行列屬性，代碼如下：

@Overrideprotected void onStart(Intent intent) {...Component component = findComponentById(ResourceTable.Id_text_one);TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);component.setLayoutConfig(tlc);}private int vp2px(float vp) {return AttrHelper.vp2px(vp, getContext());}

• • 注意：在設置子組件的行列屬性時，TableLayout 剩余的行數和列數必須大于等于該子組件所設置的行數和列數。
• • 在創建子組件的行列屬性時，可設置子組件的對齊方式，修改上述 Java 代碼如下：

@Overrideprotected void onStart(Intent intent) {...tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);...}

• • 將子組件的對齊方式設置為 ALIGNMENT_FILL 的效果展示：

總結

以上是生活随笔為你收集整理的HarmonyOS之常用布局TableLayout的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。