鸿蒙系统中的TableLayout网格布局

文章目录

  • 前言
  • 前期准备
    • 创建页面
  • tableLayout的使用
    • 定义布局
    • 定义text组件的样式
    • 定义text组件
    • 模拟器显示如下:
    • 设置行数和列数

前言

TableLayout是使用表格的方式划分子组件
TableLayout的自有XML属性见下表
鸿蒙系统中的TableLayout网格布局_第1张图片
参考文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-tablelayout-0000001060379893
下面我们就以案例来展示其应用

前期准备

我们还是使用上一篇文章中使用到的demo2项目来进行测试

创建页面

我们在右键点击新建线性布局页面的文件夹,然后new->Ability->Empty Page Ability(java)
鸿蒙系统中的TableLayout网格布局_第2张图片
弹出页面填写相应的页面名称等信息,点击finish
鸿蒙系统中的TableLayout网格布局_第3张图片
TableLayoutSlice中引入样式文件如下:
TableLayoutSlice.java:

@Override
    public void onStart(Intent intent) {
     
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_table_layout);
    }

MainAbility中使用这个slice
MainAbility.java:

public class MainAbility extends Ability {
     
    @Override
    public void onStart(Intent intent) {
     
        super.onStart(intent);
        super.setMainRoute(TableLayoutSlice.class.getName());
    }
}

tableLayout的使用

定义布局

首先我们在TableLayoutSlice的布局文件ability_table_layout中声明布局用TableLayout
在这里插入图片描述

ability_table_layout.xml:


<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:padding="8px">
TableLayout>

该布局组件长宽为父组件的长宽,颜色为#87CEEB,外间距8px

定义text组件的样式

我们在graphic文件夹下新建text组件的样式文件table_text_bg_element.xml.xml
鸿蒙系统中的TableLayout网格布局_第4张图片
代码如下
table_text_bg_element.xml


<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5px"/>
    <stroke
        ohos:width="1px"
        ohos:color="gray"/>
    <solid
        ohos:color="#00BFFF"/>
shape>

定义text组件

我们在布局文件中,定义四个text组件,代码如下:
在这里插入图片描述
ability_table_layout.xml:


<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:padding="40px">
    <Text
        ohos:height="300px"
        ohos:width="300px"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="40px"
        ohos:text="5"
        ohos:text_alignment="center"
        ohos:text_size="100px"/>

    <Text
        ohos:height="300px"
        ohos:width="300px"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="40px"
        ohos:text="10"
        ohos:text_alignment="center"
        ohos:text_size="100px"/>

    <Text
        ohos:height="300px"
        ohos:width="300px"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="40px"
        ohos:text="20"
        ohos:text_alignment="center"
        ohos:text_size="100px"/>

    <Text
        ohos:height="300px"
        ohos:width="300px"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="40px"
        ohos:text="30"
        ohos:text_alignment="center"
        ohos:text_size="100px"/>
TableLayout>

代码中,我们使用ohos:background_element="$graphic:table_text_bg_element"来引入table_text_bg_element.xml中定义的组件样式,然后属性分别是:
ohos:height:高
ohos:width:宽
ohos:margin:内边距
ohos:text:字内容
ohos:text_alignment:字对其方式
ohos:text_size:字大小

模拟器显示如下:

鸿蒙系统中的TableLayout网格布局_第5张图片
这样显示一列多行的布局,如果我们想要实现多行多列可以使用ohos:row_count和ohos:column_count

设置行数和列数

我们在布局文件中使用ohos:row_count和ohos:column_count
ability_table_layout.xml:
鸿蒙系统中的TableLayout网格布局_第6张图片
模拟器显示如下:
鸿蒙系统中的TableLayout网格布局_第7张图片

你可能感兴趣的:(鸿蒙,HarmonyOS,前端)