#2020征文-TV# 第三章 “颜控”时代下鸿蒙如何构建UI界面

系统
原本是以碎片化的方式将HarmonyOS应用开发快速掌握,但是在准备六大布局组合复杂UI界面Demo时,很多组件之前都没有应用

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

 为什么是第三章,前面两章呢?

原本是以碎片化的方式将HarmonyOS应用开发快速掌握,但是在准备六大布局组合复杂UI界面Demo时,很多组件之前都没有应用。因此准备将知识体系进行细化,以章节的形式希望能够将整个HarmonyOS应用开发简单化,降低学习复杂度。为什么是从第三章开始?因为前两章是一些理论性的知识,后续会抽时间整理发文。

1、本章主要内容


一款优秀的app,不仅仅在于它提供的业务功能,还要有新颖的、美观的、易操作的UI界面,能够给用户全新的,直观的可视化操作,因此app UI界面的美观和功能同等重要。

对于程序员来说,一般注重的是应用本身的功能要点,这个功能是如何实现的,那个功能很有特色,但是用户群体并不仅仅是程序员,对于大众用户而言,他们所关注的仅仅是界面美不美,交互操作是否流畅,操作流程是否简单,能不能达到所期望的效果。所以用户只关注的是UI界面。

UI界面是呈现在用户面前,显示屏上的图形,用于给用户展示信息或者提供可交互方式。UI界面是由一个或者多个元素构成,如HelloWorld示例,显示Hello World字样的界面是由Text组件构成,我们可以说这个UI界面是由一个元素构成。再比如我们的登录 页面,由用户账号输入框、密码输入框、验证码输入框、以及登录 按钮,虽然它的UI界面上有两种类型的组件,但我们不能说它是由两个元素构成,它是由四个元素构成,元素的数量不能因为种类的重复而减少。

因此我们在本章节需要掌握构成页面的元素。UI界面的元素被统称为组件,组件根据一定的层级结构组合在一起形成布局。组件在没有添加到任何的布局时,既无法显示也无法交互,因此一个UI界面至少要包含一个显示状态的布局。所以在接下来的小节中我们将详细的说明构成UI界面的布局和组件。

2、HarmonyOS应用中的布局和组件

HarmonyOS应用的Ability在屏幕上将显示一个UI界面,这个界面用来显示可被用户查看和交互的内容。在HarmonyOS应用中UI界面是由Component(组件)和ComponentContainer(组件容器,也可称为布局)构成。组件是绘制在屏幕上的对象(也可称为元素),分为两类,一类是显示类,另一类是交互类。布局时容纳其他布局和组件的容器,可以管理组件的排列方式等属性,也可以通过复杂的组合来实现复杂的UI界面。

在HarmonyOS应用中,ComponentContainer是Component类子类,也就是说组件容器可以看做特殊的组件,只不过它是由一个或多个布局或组件构成。

Component是UI界面中所有组件的基类,UI界面中的组件一般直接继承或间接继承Component类或者它的子类,开发者可以给Component设置事件处理回调来创建一个可交互的组件,存在哪些监听函数,我们在后面小节来详细了解。

ComponentContainer作为容器容纳Component(组件)或ComponentContainer(组件容器)对象,并对它进行布局。

UI界面中,先有组件容器(布局),在组件容器中容纳一个或多个组件或者组件容器,对它们进行样式定义,即完善UI界面。

 

Component结构(引自官文)

3、公共的布局属性和参数

每种布局都根据自身特点提供LayoutConfig内部类,这个内部类继承ComponentContainer.LayoutConfig类,其功能是供子组件设定布局属性和参数,通过指定布局属性可以约束子组件在布局中的显示效果。例如:设置布局宽高为MATCH_PARENT(占满整个屏幕),设置子组件Text宽高为MATCH_CONTENT(按照内容大小呈现),同时你也可以给定固定的宽高值。在六大布局中,宽高都是共有的属性,同时也为不同场景的布局提供了特殊的属性,比如DirectionalLayout(线性布局)中提供了weight属性,用于设置权重,而其他布局中就没有权重的说法。

4、创建和声明布局

HarmonyOS提供了Ability和AbilitySlice两个基础类。Ability可以理解为用户交互行为发生后,需要渲染指定的视图进行响应。AbilitySlice可以理解为绘制UI界面和实现具体的逻辑,如按钮在点击事件等,它是应用显示、运行、跳转的最小单元。AbilitySlice通过setUIContent()为界面设置布局。

组件需要组合并添加到布局中,HarmonyOS Java UI提供了两种方式,一种是直接在代码中创建布局,并在布局中添加组件,通过设置它们的属性来控制UI界面显示效果。另一种是在XML中声明布局。这两种方式创建的布局没有本质区别,在XML中声明的布局可以在加载后对布局进行修改,需要设置布局和组件的唯一标识。组件的监听事件及业务逻辑需要在获取指定的组件后进行编写。根据组件的功能分为三种,布局类(放置在布局中的布局就是组件,是一种特殊的组件),显示类和交互类。接下来我将对常用的组件进行详细阐述。

章节前述暂到这里,本前述是我们了解UI界面中组件和布局的理论性知识,从下节开始我们将详细来说说各类组件和布局。

声明:码字不易,转载请注明出处,系列图文仅供学习使用,不可用于商用。因转载作品引发的知识产权或其他法律纠纷的,转载人须自行承担一切后果,与本人无关!

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2020-12-09 11:53:24

鸿蒙开发HelloWord

2020-12-04 12:42:59

组件鸿蒙Text

2012-02-16 09:56:29

2014-01-16 14:30:43

storm安装部署

2011-07-20 11:29:48

jQuery Mobi手机新闻浏览器

2020-12-28 11:19:06

鸿蒙HarmonyOSPage Abilit

2010-12-08 10:36:34

系统架构设计师

2023-03-02 20:59:41

特斯拉机器人

2020-12-23 11:45:27

鸿蒙HarmonyOSTextField组件

2020-12-17 12:06:49

鸿蒙应用鸿蒙开发

2017-12-06 14:46:41

计算机技术等级考试

2020-12-28 10:15:18

鸿蒙HarmonyOSListContain

2009-07-09 00:25:00

ScalaListTuple

2009-07-09 00:25:00

Scala参数化

2020-11-19 10:41:59

APT攻击网络攻击网络安全

2014-04-16 00:21:48

Office 365微软公有云

2012-03-13 16:16:39

AdobeAIR for TV

2020-11-15 19:25:34

Windows 10Windows操作系统

2009-06-11 14:00:34

jBPM用户指南jBPM范例

2020-12-11 09:58:45

ShapeElemenXML自定义组件样式
点赞
收藏

51CTO技术栈公众号