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

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

2022-12-10 449
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： （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
530 1
varin
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程，涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参，并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性，助力开发者高效构建稳定云端服务。
varin
1077 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
varin
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构，支持灵活的数据建模与权限管理，可通过AGC平台或本地项目初始化，实现数据的增删改查及端侧高效调用。
varin
692 1
varin
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念，并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容，同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
varin
846 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
varin
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术，涵盖@Extend、@Styles和@Builder的使用方法，并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果，结合生肖抽卡、小米轮播、回顶按钮等案例，展示实际应用技巧。
varin
305 1
varin
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局（Flex）、绝对定位、层叠布局及ArkTS语法进阶，涵盖字符串拼接、类型转换、数组操作、条件与循环语句，并结合B站视频卡、支付宝首页等案例，深入讲解点击事件、状态管理与界面交互功能。
varin
622 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
枫叶丹4
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发一
本文介绍了方舟开发框架（ArkUI）及其两种开发范式：基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架，提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言，以组件、动画和状态管理为核心，适合复杂团队协作；类Web开发范式采用HML、CSS、JavaScript三段式开发，适用于简单界面应用，贴近Web开发者习惯。文中还概述了两者的架构和基础能力，帮助开发者选择合适的范式进行高效开发。
枫叶丹4
558 15
枫叶丹4
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法，涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分，详细讲解了如何通过Circle组件为食物成分表添加圆形标签，以及使用Path组件结合SVG命令绘制自定义图形（如应用Logo）。动画效果部分则展示了如何利用animateTo实现闪屏动画，包括渐出、放大效果，并设置页面跳转；同时介绍了页面间共享元素转场动画的实现方式。最后，文章列举了声明式开发范式中的各类组件及其功能，帮助开发者快速上手构建复杂交互页面。
枫叶丹4
539 11
卓伊凡
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
卓伊凡
1270 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
枫叶丹4
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分，涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例，如动态播放视频。性能提升方面，推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法，以优化应用性能与用户体验。
枫叶丹4
440 56

热门文章

最新文章

  • 1
    【HIMI转载推荐之三】基于Cocos2dx引擎UI扩展引擎包[cocos2d-x-3c] 转载xiaominghimi
  • 2
    Android UI基本测验“.NET研究”：线性布局
  • 3
    Android官方开发文档Training系列课程中文版：高效显示位图之在UI中展示位图
  • 4
    iOS开发UI篇—UITableview控件基本使用
  • 5
    Android VSYNC （Choreographer）与UI刷新原理分析
  • 6
    Android UI开发详解之Fragment
  • 7
    RISC-V大赛开发套件详解（四）：D1哪吒开发板Haas-UI语音AI
  • 8
    Android UI设计： 请解释LinearLayout、RelativeLayout和ConstraintLayout的区别。
  • 9
    《Android UI基础教程》——导读
  • 10
    如何使用 Draggable 和 DragTarget 在 Flutter 中创建拖放 UI 元素？
  • 1
    Java 设计模式之策略模式：灵活切换算法的艺术
    2901
  • 2
    Java 设计模式之观察者模式：构建松耦合的事件响应系统
    827
  • 3
    Java 设计模式之状态模式：让对象的行为随状态优雅变化
    1215
  • 4
    java零基础学习者入门课程
    881
  • 5
    Java 设计模式之责任链模式：优雅处理请求的艺术
    1174
  • 6
    【Azure Storage Account】Java Code访问Storage Account File Share的上传和下载代码示例
    745
  • 7
    百宝箱开放平台 ✖️ Java SDK
    1947
  • 8
    《深入理解Spring》：现代Java开发的核心框架
    1263
  • 9
    用Java语言实现一个自定义的ArrayList类
    536
  • 10
    从混沌到秩序：Java共享内存模型如何通过显式约束驯服并发？
    486

    • 相关课程

    更多
  • 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 记忆互通！