鸿蒙HarmonyOS开发实战—Java UI框架(PositionLayout&&AdaptiveBoxLayout)

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

PositionLayout

在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。

PositionLayout示意图

布局方式

PositionLayout以坐标的形式控制组件的显示位置，允许组件相互重叠。

  • 在layout目录下的XML文件中创建PositionLayout并添加多个组件，并通过position_x和position_y属性设置子组件的坐标。

使用PositionLayout的布局效果

 示例代码：

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:position"
    ohos:height="match_parent"
    ohos:width="300vp"
    ohos:background_element="#3387CEFA">

    <Text
        ohos:id="$+id:position_text_1"
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="50vp"
        ohos:position_y="8vp"
        ohos:text="Title"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:position_text_2"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="8vp"
        ohos:position_y="64vp"
        ohos:text="Content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:position_text_3"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="92vp"
        ohos:position_y="188vp"
        ohos:text="Content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>

复制

设置子组件的坐标时（position_x和position_y属性），除了上述示例中的XML方式，还可以在对应的AbilitySlice中通过setPosition(int x, int y)接口设置，Java示例代码如下：

        Text title = (Text)findComponentById(ResourceTable.Id_position_text_1);
        Text content1 = (Text)findComponentById(ResourceTable.Id_position_text_2);
        Text content2 = (Text)findComponentById(ResourceTable.Id_position_text_3);
        
        title.setPosition(vp2px(50), vp2px(8));
        content1.setPosition(vp2px(8), vp2px(64));
        content2.setPosition(vp2px(92), vp2px(188));

复制

单位转换的方法如下：

    private int vp2px(float vp){
        return AttrHelper.vp2px(vp,this);
    }

复制

  • 对于超过布局本身大小的组件，超出部分将不显示。

Right组件右侧超出部分将不显示

 示例代码：

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    ...>

    ...

    <Text
        ohos:id="$+id:position_text_4"
        ohos:height="120vp"
        ohos:width="120vp"
        ohos:background_element="#9987CEFA"
        ohos:position_x="212vp"
        ohos:position_y="64vp"
        ohos:text="Right"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>

复制

AdaptiveBoxLayout

AdaptiveBoxLayout是自适应盒子布局，该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。

  1. 该布局中的每个子组件都用一个单独的“盒子”装起来，子组件设置的布局参数都是以盒子作为父布局生效，不以整个自适应布局为生效范围。
  2. 该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数，高度为match_content，每一行中的所有盒子按高度最高的进行对齐。
  3. 该布局水平方向是自动分块，因此水平方向不支持match_content，布局水平宽度仅支持match_parent或固定宽度。
  4. 自适应仅在水平方向进行了自动分块，纵向没有做限制，因此如果某个子组件的高设置为match_parent类型，可能导致后续行无法显示。

AdaptiveBoxLayout示意图

常用方法

AdaptiveBoxLayout布局常用方法如下。

方法

功能

addAdaptiveRule(int minWidth, int maxWidth, int columns)

添加一个自适应盒子布局规则。

removeAdaptiveRule(int minWidth, int maxWidth, int columns)

移除一个自适应盒子布局规则。

clearAdaptiveRules()

移除所有自适应盒子布局规则。

场景示例

在AdaptiveBoxLayout中添加和删除自适应盒子布局规则的效果对比如下。

 XML布局示例代码：

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <AdaptiveBoxLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:id="$+id:adaptive_box_layout">

        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 1"
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 2"
            ohos:text_size="18fp" />

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:multiple_lines="true"
            ohos:text="AdaptiveBoxLayout, where a number of boxes with the same width but varied heights are laid out. The height of a row is determined by the highest box."
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 4"
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="Add"
            ohos:text_size="18fp" />



        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 5"
            ohos:text_size="18fp" />

        <Text
            ohos:height="160vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 6"
            ohos:text_size="18fp" />
    </AdaptiveBoxLayout>

    <Button
        ohos:id="$+id:add_rule_btn"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="10vp"
        ohos:padding="10vp"
        ohos:background_element="#A9CFF0"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="22fp"
        ohos:text="adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);"/>

    <Button
        ohos:id="$+id:remove_rule_btn"
        ohos:padding="10vp"
        ohos:top_margin="10vp"
        ohos:layout_alignment="horizontal_center"
        ohos:bottom_margin="10vp"
        ohos:background_element="#D5D5D5"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="22fp"
        ohos:text="adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);"/>

</DirectionalLayout>

复制

Java关键代码：

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);

findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
    // 添加规则
    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));

findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
    // 移除规则
    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));

为了能够让大家跟上互联网时代的技术迭代，赶上互联网开发人员寒冬期间一波红利，在这里跟大家分享一下我自己近期学习心得以及参考网上资料整理出的一份最新版的鸿蒙学习提升资料，有需要的小伙伴自行领取，限时开源，先到先得~~~~

纯血版鸿蒙 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
关注
  • 22
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
12.鸿蒙HarmonyOS App(JAVA) page的隐式跳转demo.rar
12-24
鸿蒙HarmonyOS App(JAVA) page的隐式跳转demo.rar" 涉及的是华为推出的开源操作系统鸿蒙HarmonyOS中，关于Java开发App时页面的隐式跳转实践。在鸿蒙系统中，页面跳转是应用交互的重要组成部分，而隐式跳转则是一种...
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程2.4G
最新发布
06-16
鸿蒙应用开发实战教程视频教程2.4G涵盖了从基础到进阶的全面内容，帮助开发者掌握在HarmonyOS上构建应用的核心技能。 在本教程中，你将学习到以下几个重要的知识点： 1. **HarmonyOS概述**：了解HarmonyOS的设计...
鸿蒙HarmonyOS开发实战—Java UI框架(PositionLayout&amp；&amp；AdaptiveBoxLayout)_positionlayout 鸿蒙
2301_79099434的博客
04-16 1085
为了能够让大家跟上互联网时代的技术迭代，赶上互联网开发人员寒冬期间一波红利，在这里跟大家分享一下我自己近期学习心得以及参考网上资料整理出的一份最新版的鸿蒙学习提升资料，有需要的小伙伴自行领取，限时开源，先到先得~~~~AdaptiveBoxLayout是自适应盒子布局，该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。在AdaptiveBoxLayout中添加和删除自适应盒子布局规则的效果对比如下。Right组件右侧超出部分将不显示。
鸿蒙HarmonyOS开发实战—Java UI框架(PositionLayout&amp；&amp；AdaptiveBoxLayout)_positionlayout 鸿蒙(1)
2401_84164546的博客
04-12 961
习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**
HarmonyOS鸿蒙最全鸿蒙ArkTS实战开发：XML解析(6)，移动端页面布局
2401_84870960的博客
05-10 858
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙应用开发 | 6大布局之 位置布局(PositionLayout)！
06-21 1118
大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，会写一些文章分享给大家，希望多多提意见。 上一篇原创文章解读了鸿蒙开发布局的 表格布局(TableLayout)，表格布局非常简单，就是一个大小和样式一样的表格。 今天来解读一下 位置布局（坐标布局），这种布局使用起来更简单，但是适用场景比较少。6大布局已经基本要完成了，各位小伙伴需要尽快学习一下之前的几种布局，布局了解了，后面做界面效果 就非常简单了。 简介： 在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕...
鸿蒙开发者社区入口,【鸿蒙应用开发】使用确切位置布局（PositionLayout）实现登录页面...
weixin_28957683的博客
06-01 380
上一节我们了解了PositionLayout(确切位置布局，我更倾向于称为绝对布局)，虽然应用场景稀少、维护不方便，但是该有的示例还是不能少。UI图拆解及代码实现这个界面我们是不是很熟悉，打开浏览器，很多网站登录界面就是如此，一个用户账号输入框、一个密码输入框，及一个登录按钮，最多再来一个验证码输入框。作为开发者，很多时候我们拿到的就是这样一张上面标注很多参数的UI图，而我们需要以代码的方式将其实...
【ArkTS】鸿蒙开发 绝对定位position（）和相对定位offse（）的区别和用法
m0_66128366的博客
03-28 1234
绝对定位position（）和相对定位offse（）的区别和用法
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程
06-16
在编程语言方面，HarmonyOS支持Java、JS和C++，其中JS FLutter是推荐的开发方式，它结合了JavaScript的灵活性和Flutter的高性能，使得开发更加便捷。此外，HarmonyOS还提供了Ability组件模型，允许开发者构建可复用...
华为鸿蒙HarmonyOS开发者资料大全.7z
08-12
华为鸿蒙HarmonyOS开发者资料大全是一份专为想要学习和深入理解鸿蒙操作系统开发的初学者准备的综合资源包。这份7z压缩文件包含了丰富的教程、文档、示例代码和工具，旨在帮助开发者快速掌握鸿蒙系统的开发技能。...
自学鸿蒙应用开发（35）- 计算UI组件相对于客户区的坐标
面向对象思考
08-30 642
自定义UI组件需要处理触控操作时，需要接受触控操作的位置坐标并判断这个坐标和UI组件的位置关系。例如下图中的三个绿色正方形组件： 如果使用对应组件的getLeft和getTop方法得到的坐标时该组件相对于上一级布局的坐标。而响应的触控事件的坐标则是相对整个客户区： public boolean onTouchEvent(Component component, TouchEvent touchEvent) { switch (touchEvent.getAction()) {
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)
爱吃土豆丝的打工人的博客
06-15 2747
当Java UI框架提供的组件无法满足设计需求时，可以创建自定义组件，根据设计需求添加绘制任务，并定义组件的属性及事件响应，完成组件的自定义。下面以自定义圆环组件为例，介绍自定义组件的通用配置方法：在屏幕中绘制圆环，并实现点击改变圆环颜色的功能。在界面中显示的自定义圆环组件1. 创建自定义组件的类，并继承Component或其子类，添加构造方法。示例代码如下//如需支持xml创建自定义组件，必须添加该构造方法。
两个案例五分钟轻松入门Harmony（鸿蒙）开发，2024年最新android软件开发前景
2401_84103875的博客
04-10 606
三、使用Java语言开发打开编辑器DevEco Studio创建一个工程，选择File -> New -> New Project在Choose your abilitu template 页面选择**Empty Ability(Java)，**然后点击Next配置项目的相关信息，包括Project Name、Project Type、Package Name、Save Location、Device Type等信息，最后点击Next即可。
HarmonyOS 组件通用属性之位置设置
weixin_45966674的博客
01-05 2555
这个markAnchor 它是相对于自己去移动的 说个词 相对定位 当然 它不会留自己原来的位置 但是 它是相对自己原来的位置 移动的 而且 它的 x y是反的 x 正值向左 负值向右 y正值向上 负值向下。我们还是 在元素下面 加上 .direction(Direction.) 就会弹出它的属性提示了。鸿蒙的 position也是定位语法 他是 x y两个轴方向控制 针对自己的父元素。就会弹出对齐方式的提示。然后 从第三个可以看出 我们这个是可以用百分比的。
零基础学鸿蒙编程-UI控件_PositionLayout
蓝不蓝编程
11-03 1573
什么是PositionLayout PositionLayout又称准确位置布局,或绝对定位布局，子控件会指定精确的位置. 这种布局方式一般很少使用，因为屏幕大小千奇百怪，一般都不能指定绝对的位置，否则会很难看。 基础样例 效果图 代码 <?xml version="1.0" encoding="utf-8"?> <PositionLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="mat
2.6【HarmonyOS鸿蒙开发】定位布局PositionLayout
hanru723的博客
06-25 1661
7、定位布局PositionLayout 作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。 一、支持的XML属性 PositionLayout的共有XML属性继承自：Component 属性名称 中文描述 取值 取值说明 使用案例 id 控件identity，用以识别不同控件对象，每个控件唯一 integer类型 仅
HarmonyOS UI开发 PositionLayout(位置布局) 的使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
06-23 731
PositionLayout 是什么 PositionLayout 是位置布局，在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。看到这个描述感觉实际开发中应该很少用到这个布局，本着学习的态度，简单的了解它的使用 PositionLayout 的属性 ohos:position_x 控制x 轴方向的位置 ohos:position_y 控制y轴方向的位置 x轴，y轴在屏幕的右上角，具体如下..
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
12-29 2802
一、创建 XML 布局文件、 二、XML 布局文件中添加子组件、 三、创建 Ability、 四、配置 Ability、 五、Ability 加载布局文件、 六、完整代码及效果展示、 四、GitHub 地址、
HarmonyOS JS UI前端开发
02-19
随着移动端开发技术的不断发展， 传统的复杂代码开发（ Java、 C） 方式已经无 法满足现今的快速代码开发和迭代的需求， 而JavaScript做为一种轻量级， 解释 型的即时编译型的编程语言在移动应用开发中得到了开发者的青睐， 其在微信 小程序开发和uni-App开发中得到了较多使用。 不同与小程序， HarmonyOS JS 框架拥有独特的代码优化模式， JS代码可以在HarmonyOS系统中快速运行。 通过本章的学习， 您能够掌握利用JS UI开发HarmonyOS前端界面的方法， 包 括开发复杂页面布局， 掌握常用组件、 容器组件和自定义组件的用法， 学会使 用JS FA访问PA的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值