TableLayout 是什么

TableLayout? 是表格布局,就是使用表格的方式劃分子組件,

個人感覺應該也不是常用的布局,常用的還是選擇DirectionalLayout和DependentLayout ,下面了解下它的屬性

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"

看完屬性之后練習下

demo練習TableLayout 的使用

先吐槽一下,官方的文檔 layout_alignment 這個屬性前面文檔都沒有說,這里居然寫了,后來反復實現發現沒有效果,大家都別想我一樣傻不拉幾的試了很久,再說寫的編譯器也不會智能提醒的,

demo1 TableLayout 里面不添加任何屬性

<?xml version="1.0" encoding="utf-8"?>
<TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:padding="10vp"ohos:background_element="#FF1493"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button2"ohos:padding="10vp"ohos:background_element="#FF00FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button3"ohos:padding="10vp"ohos:background_element="#0000FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button4"ohos:padding="10vp"ohos:background_element="#00FFFF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/></TableLayout>

看下效果

orientation 屬性

試下orientation 屬性,也不知道是我理解不對還是怎么了,設置horizontal 里面的控件是垂直的,

設置vertical的時候里面控件是水平的看下面的效果圖

設置horizontal的情況

設置orientation 的情況

反正大家知道有這個屬性就行了(難受)

感覺里面最重要的就是column_count 和 row_count,下面看下他兩的屬性

demo2 設置 2行 和2列

<?xml version="1.0" encoding="utf-8"?>
<TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:row_count="2"ohos:column_count="2"><Buttonohos:id="$+id:button1"ohos:padding="10vp"ohos:background_element="#FF1493"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button2"ohos:padding="10vp"ohos:background_element="#FF00FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button3"ohos:padding="10vp"ohos:background_element="#0000FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button4"ohos:padding="10vp"ohos:background_element="#00FFFF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/></TableLayout>

效果圖

demo3設置1行4列

<?xml version="1.0" encoding="utf-8"?>
<TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:row_count="1"ohos:column_count="4"><Buttonohos:id="$+id:button1"ohos:padding="10vp"ohos:background_element="#FF1493"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button2"ohos:padding="10vp"ohos:background_element="#FF00FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button3"ohos:padding="10vp"ohos:background_element="#0000FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button4"ohos:padding="10vp"ohos:background_element="#00FFFF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/></TableLayout>

效果圖

最后說下column_count 和 row_count 使用的時候要注意里面的控件,如果多余你設置的行和列的話默認多余的一個在下面,比如我里面寫了6個控件設置2行和2列的效果圖

比如下面的

<?xml version="1.0" encoding="utf-8"?>
<TableLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:row_count="2"ohos:column_count="2"><Buttonohos:id="$+id:button1"ohos:padding="10vp"ohos:background_element="#FF1493"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button2"ohos:padding="10vp"ohos:background_element="#FF00FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button3"ohos:padding="10vp"ohos:background_element="#0000FF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button4"ohos:padding="10vp"ohos:background_element="#00FFFF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button5"ohos:padding="10vp"ohos:background_element="#00FFFF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/><Buttonohos:id="$+id:button6"ohos:padding="10vp"ohos:background_element="#00FFFF"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_size="22fp"ohos:text="java"/></TableLayout>

效果圖

好了就說到這里把,使用的時候注意下就行,

官方文檔鏈接

其他的布局連接,感興趣可以看下,

HarmonyOS UI開發 AdaptiveBoxLayout(自適應盒子布局) 的使用

HarmonyOS UI開發 PositionLayout(位置布局) 的使用

HarmonyOS UI開發 StackLayout(堆棧布局) 的使用

HarmonyOS UI開發 DependentLayout(依賴布局) 的使用

HarmonyOS UI開發 DirectionalLayout(定向布局) 的使用

總結

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

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