HarmonyOS UI开发 TableLayout(表格布局) 的使用

TableLayout 是什么

TableLayout 是表格布局,就是使用表格的方式划分子组件,

个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和DependentLayout ,下面了解下它的属性

TableLayout的自有XML属性

属性名称	中文描述	取值	取值说明	使用案例
alignment_type	对齐方式	align_edges	表示TableLayout内的组件按边界对齐。	ohos:alignment_type="align_edges"
alignment_type	对齐方式	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"
orientation	排列方向	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(定向布局) 的使用