鸿蒙HarmonyOS开发实战—Java UI框架(TableLayout)

最新推荐文章于 2024-08-20 17:04:08 发布
最新推荐文章于 2024-08-20 17:04:08 发布
阅读量1k 收藏 18
点赞数 22
分类专栏： 鸿蒙 文章标签： harmonyos java 华为 前端 鸿蒙 鸿蒙系统 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/135889496
版权

TableLayout

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默认一列多行

 设置行列数

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

复制

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

设置布局排列方向

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

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

复制

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

设置对齐方式

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>

复制

边距对齐效果

  •  边界对齐方式

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

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

    ...
        
</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的效果展示

 在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的效果

 设置子组件的权重

代码如下：

 @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 4.0 视频学习资料

 需要以上视频学习资料小伙伴

请点击→纯血版全套鸿蒙HarmonyOS学习资料

《纯血版华为鸿蒙 (Harmony OS)开发手册》

这份手册涵盖了当前鸿蒙 (Harmony OS) 开发技术必掌握的核心知识点

纯血版鸿蒙 (Harmony OS)开发手册部分精彩内容

HarmonyOS 概念：

  • 系统定义
  • 技术架构
  • 技术特性
  • 系统安全

如何快速入门？

  • 基本概念
  • 构建第一个ArkTS应用
  • 构建第一个JS应用
  • ……


开发基础知识： 

  • 应用基础知识
  • 配置文件
  • 应用数据管理
  • 应用安全管理
  • 应用隐私保护
  • 三方应用调用管控机制
  • 资源分类与访问
  • 学习ArkTS语言
  • ……

基于ArkTS 开发：

  • Ability开发
  • UI开发
  • 公共事件与通知
  • 窗口管理
  • 媒体
  • 安全
  • 网络与链接
  • 电话服务
  • 数据管理
  • 后台任务(Background Task)管理
  • 设备管理
  • 设备使用信息统计
  • DFX
  • 国际化开发
  • 折叠屏系列
  • .……

获取以上文中提到的这份纯血版鸿蒙 (Harmony OS) 开发资料的小伙伴 

请点击→纯血版全套鸿蒙HarmonyOS学习资料

🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新VIP学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

蜀道山QAQ
关注
专栏目录
HarmonyOS鸿蒙基于Java开发:Java UI 常用组件TabList和Tab
sybh的博客
01-12 848
Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。
HarmonyOS鸿蒙基于Java开发: Java UI 组件与布局开发
sybh的博客
01-12 1080
HarmonyOS提供了Ability和AbilitySlice两个基础类，一个有界面的Ability可以由一个或多个AbilitySlice构成，AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元。AbilitySlice通过setUIContent为界面设置布局。接口声明接口描述设置界面入口，root为界面组件树根节点。组件需要进行组合，并添加到界面的布局中。
harmonyOS应用-TableLayout布局
Damon
12-29 297
TableLayout布局 harmonyOS官网网址：https://developer.harmonyos.com TableLayout使用表格的方式划分子组件，如下图示例 在XML文件中创建TableLayout以及添加组件 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_pa
java GUI开发采用哪个框架？
最新发布
adendean的博客
08-20 468
总的来说，Java GUI开发中Swing和JavaFX是两个重要的框架。它们各自有着独特的优缺点和适用场景。对于需要现代化界面和强大视觉效果的应用，JavaFX无疑是更好的选择；而对于传统的桌面应用开发或维护现有Swing应用，Swing则更具优势。在现代软件开发中，用户界面(UI)的重要性不断上升，对于Java开发者来说，选择适合的GUI框架至关重要。Java GUI开发主要采用的框架有。
HarmonyOS开发54：表格布局：TableLayout
GeniusAng的博客
08-27 184
ability_main.xml代码： <?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:orientation="horizontal" ohos:row_count="3" ..
HarmonyOS UI开发 TableLayout(表格布局) 的使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
06-24 603
TableLayout 是什么 TableLayout 是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和DependentLayout ,下面了解下它的属性 TableLayout的自有XML属性 属性名称 中文描述 取值 取值说明 使用案例 alignment_type 对齐方式 .
HarmonyOS之常用布局TableLayout的使用
╰つ栺尖篴夢ゞ
06-26 499
TableLayout 使用表格的方式划分子组件，如下所示： TableLayout 的共有 XML 属性继承自 Component，详情请参考我之前的博客：HarmonyOS之组件通用的XML属性总览。 TableLayout 的自有 XML 属性如下表： 属性名称 中文描述 取值 取值说明 使用案例 align.
HarmonyOS鸿蒙基于Java开发: Java UI 常用布局 TableLayout
sybh的博客
01-14 807
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_cou
java表格控件布局_HarmonyOS Java UI之TableLayout布局示例
weixin_32445333的博客
02-17 257
TableLayout简介TableLayout意为表格布局，也可以称为网格布局，允许我们使用表格的方式来排列组件，也就是行和列的方式。TableLayout提供了用于在表格中对齐和排列组件的接口。可配置表格的排列方式，行数和列数，以及组件的位置。常用属性ohos:alignment_type表示设置网格布局中的对齐方式，默认为align_contents(表示页边距对齐)，还有一个参数是alig...
华为鸿蒙HarmonyOS Java 布局开发
郭宝的博客
02-01 2839
在HarmonyOS应用中，所有的用户界面元素都是由 Component和ComponentContainer对象构成。 Component 是绘制在屏幕上的一个对象（可类比成Android的View），用户能与之交互。component 提供了内容显示，是界面中所有组件的基类，开发者可以给Component 设置事件处理回调来创建一个可交互的组件。Java UI 框架提供了一些常用的界面元素，也可以称为组件，组件一般直接继承Component 或它的子类，如 Text、Image等 C..
鸿蒙初体验——JavaUI框架的布局方式分析
duner12138的博客
06-09 1032
鸿蒙初体验——JavaUI框架的布局方式分析 上次简单地编写了一个点击按钮切换图片的鸿蒙demo 今天简单分析下鸿蒙中的几个布局方式 注意：如题我使用的是鸿蒙的JavaUI框架而非jsUI框架，这边文章只是简单地分析集中布局方式的类型并且与Android中的几种布局方式进行比较 如果想学习更详细的具体属性等知识点建议前往华为开发者联盟官网鸿蒙开发文档进行学习 xml文件绑定方式 当我们使用鸿蒙DevEcoStudio编译器创建鸿蒙应用后我们会发现默认创建的main页面MainAbility中并没有发现xml
java 图形化界面 swing框架
08-07
java图形化界面框架,java图形化界面框架java图形化界面框架java图形化界面框架java图形化界面框架
shiro安全框架
qq_44496147的博客
09-16 348
intellij idea的配置使用教程IDEA的配置intellij idea快捷键 欢迎使用intellij idea IDEA的配置 一、全局JDK设置 二、主题和字体设置 主题设置在：“File | Settings | Appearance & Behavior | Appearance“” 字体设置在："Editor"的"Font"中，分别设置编辑器字体、字号、行间距 三、3、设置控制台字体 控制台字体和编辑器字体设置一个逻辑，设置在："Editor"下"Color Scheme"的
java ui界面布局_鸿蒙 HarmonyOSJava UI之DependentLayout布局示例
weixin_31689491的博客
02-24 413
DependentLayout简介DependentLayout意为相对位置布局，与DirectionalLayout相比较有更多的排布方式，每个组件可以指定相对于其他同级组件的位置，也可以指定相对于父组件的位置。可以使用DependentLayout布局来实现更加复杂的UI界面，同时也可以和其他布局相结合组合出需要的UI界面。常用属性相对于指定组件的位置属性xmlns:ohos="http://...
鸿蒙开发入门：应用配置文件概述（二）
Android23333的博客
12-14 2058
这里整理了一份《鸿蒙零基础入门学习指南》，希望能对那些想要学习鸿蒙，但是有没有方向的人提供一点帮助。本文档适用于HarmonyOS应用开发的初学者（由于文档内容过多，因此为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的看文末有免费的获取方式！
鸿蒙开发之导航栏tabs(类似Android tablayout)
karision的博客
03-18 1285
在tabContent 添加要自定义的布局，如下代码@BuilderColumn() {})
HarmonyOS学习路之开发篇—Java UI框架(DirectionalLayout)
爱吃土豆丝的打工人的博客
06-09 1624
DirectionalLayout是Java UI中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。DirectionalLayout示意图。
鸿蒙HarmonyOS开发实战—Java UI框架(TableLayout)_鸿蒙 javaui backgroundmodes
m0_57502067的博客
04-11 485
41063)]
java swing漂亮界面框架_开源软件分享-漂亮的JavaFx GUI界面框架
weixin_39939993的博客
11-03 3307
虽然说Java目前主要的应用领域是服务端，GUI桌面端软件也有极少量的应用场景(桌面软件还是C#方便)，所以今天给大家分享一款漂亮的JavaFx GUI界面框架BootstrapFX。Java Fx 仪表UI MedusaBootStrapFXBootstrapFX 是 JavaFX的BootStrap风格的实现。它主要提供与web版本BootStrap非常相似的 CSS 样式表，同时针对 Jav...
Android开发实战：UI布局与控件案例解析
“Android开发实例大全.pdf”是一本深入讲解Android应用开发实践的书籍，共包含17个章节，涵盖了从基础的UI布局到复杂的控件使用、用户交互等多个方面的实例教程。 在这本书中，读者可以学习到如何进行Android UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值