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

• TableLayout 的共有 XML 屬性繼承自 Component，詳情請(qǐng)參考我之前的博客：HarmonyOS之組件通用的XML屬性總覽。
• TableLayout 的自有 XML 屬性如下表：

屬性名稱(chēng)中文描述取值取值說(shuō)明使用案例alignment_type對(duì)齊方式align_edges表示TableLayout內(nèi)的組件按邊界對(duì)齊ohos:alignment_type="align_edges"align_contents表示TableLayout內(nèi)的組件按邊距對(duì)齊ohos:alignment_type="align_contents"column_count列數(shù)integer類(lèi)型可以直接設(shè)置整型數(shù)值，也可以引用integer資ohos:column_count="3" ohos:column_count="$integer:count"row_count行數(shù)integer類(lèi)型可以直接設(shè)置整型數(shù)值，也可以引用integer資源ohos:row_count="2" ohos:row_count="$integer:count"orientation排列方向horizontal表示水平方向布局ohos:orientation="horizontal"vertical表示垂直方向布局ohos:orientation="vertical"

• 在 XML 文件中創(chuàng)建 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 創(chuàng)建 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 默認(rèn)一列多行，如下：

• 設(shè)置行數(shù)和列數(shù)：

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

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

• 設(shè)置對(duì)齊方式
• • TableLayout 提供兩種對(duì)齊方式，邊距對(duì)齊“align_contents”、邊界對(duì)齊“align_edges”，默認(rèn)為邊距對(duì)齊。
• • 邊距對(duì)齊效果：

• • 代碼如下：

<?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 的對(duì)齊方式修改為邊界對(duì)齊：

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

• • 邊界對(duì)齊效果：
    
• • 引用背景資源文件如下：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>

• 設(shè)置子組件的行列屬性
• • TableLayout 的合并單元格的功能可以通過(guò)設(shè)置子組件的行列屬性來(lái)實(shí)現(xiàn)。
• • 設(shè)置子組件的行列屬性均為2的效果展示：

• • 在 XML 中創(chuàng)建 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 代碼中設(shè)置子組件的行列屬性，代碼如下：

@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());}

• • 注意：在設(shè)置子組件的行列屬性時(shí)，TableLayout 剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。
• • 在創(chuàng)建子組件的行列屬性時(shí)，可設(shè)置子組件的對(duì)齊方式，修改上述 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);...}

• • 將子組件的對(duì)齊方式設(shè)置為 ALIGNMENT_FILL 的效果展示：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。