TableLayout 是什么

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

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

TableLayout的自有XML屬性

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

看完屬性之后練習(xí)下

demo練習(xí)TableLayout 的使用

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

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 屬性,也不知道是我理解不對還是怎么了,設(shè)置horizontal 里面的控件是垂直的,

設(shè)置vertical的時(shí)候里面控件是水平的看下面的效果圖

設(shè)置horizontal的情況

設(shè)置orientation 的情況

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

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

demo2 設(shè)置 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設(shè)置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 使用的時(shí)候要注意里面的控件,如果多余你設(shè)置的行和列的話默認(rèn)多余的一個(gè)在下面,比如我里面寫了6個(gè)控件設(shè)置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>

效果圖

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

官方文檔鏈接

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

HarmonyOS UI開發(fā) AdaptiveBoxLayout(自適應(yīng)盒子布局) 的使用

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

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

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

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

總結(jié)

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

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