鸿蒙UI中，提供了两种编写布局的方式：
①在XML中声明UI布局
②在Ability代码中直接通过Java创建布局
这两种方式创建出的布局没有本质差别，但是XML方式较为方便简单。
在XML文件中布局
与HTML+CSS的前端布局类似，通过使用不同类型的标签进行布局，而样式也通过属性来设置。具体的标签属性等可以在开发中慢慢熟悉。
创建Ability
在Ability代码中直接通过Java创建布局
(这里我们在新创建的这个SecondAbility中进行布局)
（2.1）HarmonyOS鸿蒙Ability创建，XML和Java页面布局UI
2022-12-10
194
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
（2.1）HarmonyOS鸿蒙Ability创建，XML和Java页面布局UI
相关文章
|
4天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块，动态控制不同参数（如红绿蓝三色值），并实时显示最终结果。我们将以动态颜色调节为例，展示如何结合状态管理和交互逻辑，打造一个高级的滑块控制器应用。
137
78
78
|
5天前
|
UED
|
10天前
|
存储
UED
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后，界面背景会随机变化为淡色系颜色，同时显示当前的颜色代码，页面还会展示一只猫咪图片作为装饰，提升趣味性。
62
36
36
|
7天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版，新增了计分和历史记录功能，用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
60
31
31
|
2天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色，用户可以在视觉上感受到按钮的闪烁效果，提升界面互动体验。
41
19
19
|
3天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用，支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
37
17
17
|
10天前
|
UED
开发者
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后，屏幕上的数字会以滚动动画的形式随机变动，最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
62
23
24
|
6天前
|
前端开发
UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间，启动倒计时后，应用会动态显示一个随着时间递减的环形进度条，同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
89
10
10
|
11天前
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
本篇将带你实现一个简易日历应用，显示当前月份的日期，并支持选择特定日期的功能。用户可以通过点击日期高亮选中，还可以切换上下月份，体验动态界面的交互效果。
37
12
13
|
11天前
|
存储
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择，或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。
28
3
3
热门文章
最新文章
1
遍历获取Xml子节点值
2
XmlToJson-xml对象转换为Json对象类
3
Spring源码(二-3)-XML文件的读取-factory-method的使用
4
从一个范例看XML的应用
5
FLEX程序设计--XML类
6
Error: XML response that was returned...
7
Android中Strings.xml使用占位符示例
8
如何创建一个XML文件，然后创建一个与之关联的样式表文件？
9
简单读写XML文件
10
XML(1)——shema约束之命名空间
1
Qt第一课 第一个ui界面
92
2
如何启动flowable的Flowable UI画工作流程图
127
3
Element-ui快速入门
80
4
VUE里修改element-ui的显示层次与上下间隔
131
5
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
42
6
Element-ui快速入门
95
7
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
421
8
Android UI底层绘制原理
59
9
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
196
10
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
230