AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

（2.1）HarmonyOS鸿蒙Ability创建，XML和Java页面布局UI

2022-12-10 458
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： （2.1）HarmonyOS鸿蒙Ability创建，XML和Java页面布局UI

鸿蒙UI中，提供了两种编写布局的方式：

①在XML中声明UI布局

②在Ability代码中直接通过Java创建布局


这两种方式创建出的布局没有本质差别，但是XML方式较为方便简单。


在XML文件中布局


aa7395b7d32743b2867bb58e4e6cbbf0.png


与HTML+CSS的前端布局类似，通过使用不同类型的标签进行布局，而样式也通过属性来设置。具体的标签属性等可以在开发中慢慢熟悉。


2aa488f2846a436ead8197e1629eef7e.png


创建Ability


71cd7ba22c9145679024084080a221a3.png51542e87221c451e98bd9cfa70edf800.png1e0c2d6b910149a387e4494da5b05cc0.png1b71b53667a644a4aba0fa530e9c0947.png


在Ability代码中直接通过Java创建布局

(这里我们在新创建的这个SecondAbility中进行布局)


c6c353fda53c45679f88578f71983133.png




文章标签：
Java
前端开发
数据格式
XML
aliyun2735231510-43871
目录
相关文章
varin
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法，包括通过云端API和AppStorage两种方式，并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题，添加上传进度提示，支持自动登录判断，提升用户体验。
varin
548 1
varin
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程，涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参，并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性，助力开发者高效构建稳定云端服务。
varin
1106 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
varin
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构，支持灵活的数据建模与权限管理，可通过AGC平台或本地项目初始化，实现数据的增删改查及端侧高效调用。
varin
717 1
varin
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念，并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容，同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
varin
897 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
varin
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术，涵盖@Extend、@Styles和@Builder的使用方法，并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果，结合生肖抽卡、小米轮播、回顶按钮等案例，展示实际应用技巧。
varin
316 1
varin
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局（Flex）、绝对定位、层叠布局及ArkTS语法进阶，涵盖字符串拼接、类型转换、数组操作、条件与循环语句，并结合B站视频卡、支付宝首页等案例，深入讲解点击事件、状态管理与界面交互功能。
varin
650 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
枫叶丹4
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分，涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例，如动态播放视频。性能提升方面，推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法，以优化应用性能与用户体验。
枫叶丹4
450 56
枫叶丹4
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局，详细说明了各布局的特性及使用方法，例如线性布局中的排列、拉伸与缩放，弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询，阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求，提升用户体验。
枫叶丹4
751 55
程序员潘Sir
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上，主要扩展了声明式UI开发相关的能力。
程序员潘Sir
556 1
韩曙亮
|
XML 数据格式
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件（二）
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件（二）
韩曙亮
537 0
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件（二）

热门文章

最新文章

  • 1
    鸿蒙应用开发从入门到实战（二）：DevEco Studio工具安装
  • 2
    HarmonyOS实战—Image组件的剪切和缩放
  • 3
    全平台开源即时通讯IM框架MobileIMSDK：7端+TCP/UDP/WebSocket协议，鸿蒙NEXT端已发布，5.7K Stars
  • 4
    鸿蒙开发：了解构建工具hvigorw
  • 5
    HarmonyOS NEXT实战：接入微信SDK
  • 6
    鸿蒙应用开发从入门到实战（十四）：ArkUI组件Column&Row&线性布局
  • 7
    鸿蒙开发：一文了解桌面卡片
  • 8
    HarmonyOS5云服务技术分享--账号关联开发指南
  • 9
    HarmonyOS鸿蒙开发 - 解决上下两栏白边 - 沉浸式效果
  • 10
    鸿蒙Flutter实战：08-如何调试代码
  • 1
    告别脆弱：构建稳定UI自动化测试的3个核心策略
    986
  • 2
    Playwright MCP在UI回归测试中的实战：构建AI自主测试智能体
    1647
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    1418
  • 4
    抓紧上车，别再错过啦， Github 开源后台管理平台，Naive UI ！！！
    1592
  • 5
    使用 Playwright MCP 实现 UI 自动化测试
    2431
  • 6
    Playwright极速UI自动化实战指南
    1110
  • 7
    执行决策UI：一种更快观察、定位、决策和打破竞争对手的惊人方式
    516
  • 8
    鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
    897
  • 9
    鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化
    556
  • 10
    【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
    701

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • Spring Cloud Alibaba - 重新定义 Java Cloud-Native
  • The Reactive Cloud Native Arch
  • JAVA开发手册1.5.0
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！