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

旧城等待， 2022-10-09 13:25 240阅读 0赞

## TableLayout 是什么 ##

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

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

## TableLayout的自有XML属性 ##

<table> 
 <thead> 
  <tr> 
   <th> <p>属性名称</p> </th> 
   <th> <p>中文描述</p> </th> 
   <th> <p>取值</p> </th> 
   <th> <p>取值说明</p> </th> 
   <th> <p>使用案例</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>alignment_type</p> </td> 
   <td style="vertical-align:top;"> <p>对齐方式</p> </td> 
   <td style="vertical-align:top;"> <p>align_edges</p> </td> 
   <td style="vertical-align:top;"> <p>表示TableLayout内的组件按边界对齐。</p> </td> 
   <td style="vertical-align:top;"> <p>ohos:alignment_type="align_edges"</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>align_contents</p> </td> 
   <td style="vertical-align:top;"> <p>表示TableLayout内的组件按边距对齐。</p> </td> 
   <td style="vertical-align:top;"> <p>ohos:alignment_type="align_contents"</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>column_count</p> </td> 
   <td style="vertical-align:top;"> <p>列数</p> </td> 
   <td style="vertical-align:top;"> <p>integer类型</p> </td> 
   <td style="vertical-align:top;"> <p>可以直接设置整型数值，也可以引用integer资源。</p> </td> 
   <td style="vertical-align:top;"> <p>ohos:column_count="3"</p> <p>ohos:column_count="$integer:count"</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>row_count</p> </td> 
   <td style="vertical-align:top;"> <p>行数</p> </td> 
   <td style="vertical-align:top;"> <p>integer类型</p> </td> 
   <td style="vertical-align:top;"> <p>可以直接设置整型数值，也可以引用integer资源。</p> </td> 
   <td style="vertical-align:top;"> <p>ohos:row_count="2"</p> <p>ohos:row_count="$integer:count"</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>orientation</p> </td> 
   <td style="vertical-align:top;"> <p>排列方向</p> </td> 
   <td style="vertical-align:top;"> <p>horizontal</p> </td> 
   <td style="vertical-align:top;"> <p>表示水平方向布局。</p> </td> 
   <td style="vertical-align:top;"> <p>ohos:orientation="horizontal"</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>vertical</p> </td> 
   <td style="vertical-align:top;"> <p>表示垂直方向布局。</p> </td> 
   <td style="vertical-align:top;"> <p>ohos:orientation="vertical"</p> </td> 
  </tr> 
 </tbody> 
</table>

看完属性之后练习下

### demo练习TableLayout 的使用 ###

先吐槽一下,官方的文档 layout\_alignment 这个属性前面文档都没有说,这里居然写了,后来反复实现发现没有效果,大家都别想我一样傻不拉几的试了很久,再说写的编译器也不会智能提醒的,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

### demo1 TableLayout 里面不添加任何属性 ###

<?xml version="1.0" encoding="utf-8"?>
    <TableLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent">
    
        <Button
            ohos: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"/>
    
    
        <Button
            ohos: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"/>
    
    
        <Button
            ohos: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"/>
    
        <Button
            ohos: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>

看下效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

### orientation 属性 ###

试下orientation 属性,也不知道是我理解不对还是怎么了,设置horizontal 里面的控件是垂直的,

设置vertical的时候里面控件是水平的看下面的效果图

设置horizontal的情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2][]

设置orientation 的情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 3][]

反正大家知道有这个属性就行了(难受)

感觉里面最重要的就是column\_count 和 row\_count,下面看下他两的属性

### demo2 设置 2行 和2列 ###

<?xml version="1.0" encoding="utf-8"?>
    <TableLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:row_count="2"
        ohos:column_count="2">
    
        <Button
            ohos: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"/>
    
    
        <Button
            ohos: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"/>
    
    
        <Button
            ohos: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"/>
    
        <Button
            ohos: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>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 4][]

### demo3设置1行4列 ###

<?xml version="1.0" encoding="utf-8"?>
    <TableLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:row_count="1"
        ohos:column_count="4">
    
        <Button
            ohos: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"/>
    
    
        <Button
            ohos: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"/>
    
    
        <Button
            ohos: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"/>
    
        <Button
            ohos: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>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 5][]

最后说下column\_count 和 row\_count 使用的时候要注意里面的控件,如果多余你设置的行和列的话默认多余的一个在下面,比如我里面写了6个控件设置2行和2列的效果图

比如下面的

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 6][]

好了就说到这里把,使用的时候注意下就行,

[官方文档链接][Link 1]

其他的布局连接,感兴趣可以看下,

[HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用][HarmonyOS UI_ AdaptiveBoxLayout_]

[HarmonyOS UI开发 PositionLayout(位置布局) 的使用][HarmonyOS UI_ PositionLayout_]

[HarmonyOS UI开发 StackLayout(堆栈布局) 的使用][HarmonyOS UI_ StackLayout_]

[HarmonyOS UI开发 DependentLayout(依赖布局) 的使用][HarmonyOS UI_ DependentLayout_]

[HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用][HarmonyOS UI_ DirectionalLayout_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221005/2bd98680b626474c9fa8f9f5a34701fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20221005/e20fadd55ae842f2a8fb88a0f8832e96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2]: /images/20221005/97404bd0c4714f6686d85e7e6a9a0202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 3]: /images/20221005/13d7415706ae43dfa996c6f0698ea4ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 4]: /images/20221005/d13b9c85ff5d4f33911185e38572fc11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 5]: /images/20221005/a4c9bfd865914dc6bd7e0f1cd3f70869.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 6]: /images/20221005/0248ed60137243328c9aa94e866a23f9.png
[Link 1]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-tablelayout-0000001060379893
[HarmonyOS UI_ AdaptiveBoxLayout_]: https://huxiaomu.blog.csdn.net/article/details/118164657
[HarmonyOS UI_ PositionLayout_]: https://huxiaomu.blog.csdn.net/article/details/118163933
[HarmonyOS UI_ StackLayout_]: https://huxiaomu.blog.csdn.net/article/details/118095017
[HarmonyOS UI_ DependentLayout_]: https://huxiaomu.blog.csdn.net/article/details/118076995
[HarmonyOS UI_ DirectionalLayout_]: https://huxiaomu.blog.csdn.net/article/details/118075010