1. Toy模板网首页
  2. > Toy博客

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

9月前 作者：爱吃土豆丝的打工人 分类：Toy博客 阅读(37) 违法举报

这篇具有很好参考价值的文章主要介绍了HarmonyOS学习路之开发篇—Java UI框架(TableLayout)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

TableLayout

TableLayout使用表格的方式划分子组件。

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

支持的XML属性

TableLayout的共有XML属性继承自：Component

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"

TableLayout的创建

  • 在XML中创建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"
    ohos:background_element="#87CEEB"
    ohos:padding="8vp">
</TableLayout>
  • 添加子组件

a.在graphic文件夹下创建Text的背景table_text_bg_element.xml，示例代码如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>

b.在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"
    ohos:background_element="#87CEEB"
    ohos:padding="8vp">
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>

TableLayout默认一列多行

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

 设置行列数

<TableLayout
    ...
    ohos:row_count="2"
    ohos:column_count="2">

 设置TableLayout的行为2，列为2效果

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

设置布局排列方向

在XML中设置布局排列方向，以“vertical”为例：

<TableLayout
    ...
    ohos:orientation="vertical">
    ...
</TableLayout>

设置布局排列方向为“vertical”的效果

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

设置对齐方式

TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。

  • 边距对齐方式

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_contents"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp">

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="32vp"
        ohos:padding="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="32vp"
        ohos:padding="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="5"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

边距对齐效果

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

  •  边界对齐方式

将TableLayout的对齐方式修改为边界对齐。

<TableLayout
    ...
    ohos:alignment_type="align_edges">

    ...
        
</TableLayout>

 边界对齐效果

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
</shape>

 设置子组件的行列属性

实现合并单元格的效果

TableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。

设置子组件的行列属性均为2的效果展示

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

 在XML中创建TableLayout，并添加子组件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_edges"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp"
    ohos:row_count="3">

    <Text
        ohos:id="$+id:text_one"
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="5"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

在Java代码中设置子组件的行列属性，代码如下：

    @Override
    protected void onStart(Intent intent) {
        ...
        Component component = findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        component.setLayoutConfig(tlc);
    }

    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }
  • 说明

在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

目前仅支持Java代码设置TableLayout子组件的行列属性。

在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：

    @Override
    protected void onStart(Intent intent) {
        ...
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        ...
    }

子组件的对齐方式设置为ALIGNMENT_FILL的效果

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

 设置子组件的权重

代码如下：

 @Override
    protected void onStart(Intent intent) {
        ...
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(0, vp2px(48));
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 1, 1.0f);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1);

        findComponentById(ResourceTable.Id_text_one).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_two).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_three).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_four).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_five).setLayoutConfig(tlc);
        findComponentById(ResourceTable.Id_text_six).setLayoutConfig(tlc);
    }

上述代码将子组件的宽度权重设置为1.0，每行子组件会均分TableLayout的宽度，所以需要设置TableLayout为固定宽度或match_parent。

<TableLayout
    ohos:width="match_parent"
    ...>

    <Text
        ohos:id="$+id:text_one"
        .../>

    <Text
        ohos:id="$+id:text_two"
        .../>

    <Text
        ohos:id="$+id:text_three"
        .../>

    <Text
        ohos:id="$+id:text_four"
        .../>

    <Text
        ohos:id="$+id:text_five"
        .../>

    <Text
        ohos:id="$+id:text_six"
        .../>
</TableLayout>

将子组件的宽度权重设置为1.0的效果展示

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)文章来源地址https://www.toymoban.com/news/detail-489895.html

到了这里，关于HarmonyOS学习路之开发篇—Java UI框架(TableLayout)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS学习路之方舟开发框架—方舟开发框架（ArkUI）概述

    HarmonyOS学习路之方舟开发框架—方舟开发框架（ArkUI）概述

    方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。 UI： 即用户界面。开发者可以将应用的用户界面设计为多个功能

    2024年02月16日
    浏览(45)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 一）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 一）

    ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在 TypeScript （简称 TS ）生态基础上做了进一步扩展，继承了 TS 的所有特性，是 TS 的超集。因此，在学习 ArkTS 语言之前，建议开发者具备 TS 语言开发能力。 当前， ArkTS 在 TS 的基础上主要扩展了如下能力： 基本语法：

    2024年02月16日
    浏览(66)

  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 四）

    当创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量

    2024年02月17日
    浏览(52)

  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 二）

    在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成

    2024年02月04日
    浏览(53)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 三）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 三）

    在开始之前，先明确自定义组件和页面的关系： 自定义组件： @Component 装饰的 UI 单元，可以组合多个系统组件实现 UI 的复用。 页面：即应用的 UI 页面。可以由一个或者多个自定义组件组成， @Entry 装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有

    2024年02月16日
    浏览(59)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 二）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 二）

    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。 @Prop装饰的变量和父组件建立单向的同步关系： @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。 当父组件中的数据源更改时，与之相关的@Prop装饰的变

    2024年02月14日
    浏览(45)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 六）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 六）

    AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。 和LocalStorage不同的是，LocalStorage是页面级的，通常应用于页面内的数据共享。而对于AppStorage，是应用级的全局状态共享。 AppStorage是在应用启动

    2024年02月20日
    浏览(51)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 五）

    HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 五）

    如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器@Styles。 @Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位

    2024年02月17日
    浏览(53)
  • HarmonyOS学习路之开发篇—流转

    HarmonyOS学习路之开发篇—流转

    随着全场景多设备生活方式的不断深入，用户拥有的设备越来越多，每个设备都能在适合的场景下提供良好的体验，例如：手表可以提供及时的信息查看能力，电视可以带来沉浸的观影体验。但是，每个设备也有使用场景的局限，例如：在电视上输入文本相对手机来说是非常

    2024年02月15日
    浏览(42)

  • HarmonyOS学习路之开发篇—设备管理（位置开发）

    移动终端设备已经深入人们日常生活的方方面面，如查看所在城市的天气、新闻轶事、出行打车、旅行导航、运动记录。这些习以为常的活动，都离不开定位用户终端设备的位置。 当用户处于这些丰富的使用场景中时，系统的位置能力可以提供实时准确的位置数据。对于开发

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包