HarmonyOS《鸿蒙操作系统开发入门经典》之前九类UI组件

开发 OpenHarmony
本文亮点:Component示例全面解析(开源代码)、GIF动图展示、开发文档中文档和示例代码的补充学习、ACE Java UI组件中的部分组件(50%)。

[[413470]]

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

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

https://harmonyos.51cto.com

本文引言

时间:2021年7月21日13:21:30

本文亮点:Component示例全面解析(开源代码)、GIF动图展示、开发文档中文档和示例代码的补充学习、ACE Java UI组件中的部分组件(50%)

本文包含笔者对徐文礼老师的《鸿蒙操作系统开发入门经典》的学习过程中的笔记总结、拓展思考、案例反馈、阅读体验。

为尊重老师的知识产权和精简本文,本文不会粘贴代码、倒置案例、机械打字。

第3章 鸿蒙 ACE Java 应用架构(2)

3.6 ACE Java UI 基础组件

3.6.1 组件与组件容器

时间:2021年7月21日13:25:12

  • 用户界面元素统称为组件,组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时,既无法显示也无法交互,因此一个用户界面至少包含一个布局。在UI框架中,具体的布局类通常以XXLayout命名,完整的用户界面是一个布局,用户界面中的一部分也可以是一个布局。布局中容纳Component与ComponentContainer对象。

应用的Ability在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容。

应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象,用户能与之交互。ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。

  • Component:提供内容显示,是界面中所有组件的基类,开发者可以给Component设置事件处理回调来创建一个可交互的组件。Java UI框架提供了一些常用的界面元素,也可称之为组件,组件一般直接继承Component或它的子类,如Text、Image等。
  • ComponentContainer:作为容器容纳Component或ComponentContainer对象,并对它们进行布局。Java UI框架提供了一些标准布局功能的容器,它们继承自ComponentContainer。

学习补充:

开发文档给的两个示例。CommonLayout、Components

下面是自己在本机上跑出来的演示:

示例3-18(为组件添加对应的布局属性)很简单就没敲了。

3.6.2 文本组件 Text

时间:2021年7月21日14:41:37

  • Text是用来显示字符串的组件,在界面上显示为一块文本区域(有很多拓展)
  • Text组件继承自Component类
  • Text组件可以通过background_element设置背景(背景放在graphic下)
  • 3-19 (文本背景xml)、 3-20 (文本对齐方式xml)、 3-21(换行和最大显示行数xml) 、3-22 (设置自动换行、最大行数、自动调节字体大小xml)、3-23 (自动调整规则java)、3-24(跑马灯效果xml) 、3-25(跑马灯java)

示例从文件类型上分为两类:xml、java

示例从功能效果上分为三类:基础、自动、跑马灯

3.6.3 按钮组件 Button

  • Button是一种常见的组件,单击可以触发相应的操作,通常由文本或图标组成,也可以由图标和文本共同组成。
  • 是一种特殊的Text组件
  • 按照按钮的形状可以分为: 普通、椭圆、胶囊、圆形

学习补充:

Button无自有的XML属性,共有XML属性继承自Text

  • 3-26 (创建按钮的xml)-就是很简单的创建一个xml
  • 3-27 (自定义按钮的形状)这里有一个很重要的知识点就是==以图片为按钮==

SVG转XML

选择需要导入的svg文件,DevEco会自动把SVG文件导出为xml

通过element_XXX调整图片相对于文字的位置

学习拓展:

因为3.62和3.63其中所要讲解的**Component示例(开源代码)(代码来自开发文档开发文档)**中都有所以现在对Component.entry做一个全方位解析:

效果如下:

工程文件目录的呈现和介绍:

以mainability为例子分析代码和几者的关系:

Textslice.xml的分析

3.6.4 文本输入框组件 TextField

时间:2021年7月21日16:34:14

TextField文本输入框组件用来接收用户的输入

继承自Text组件

学习补充:

示例3-28 (TextField的基本用法)

  • 设置光标自定义气泡Bubble
  • 举了一个矩形的自定义气泡(shape=“rectangle”)
  • 内边距、输入类型、多行显示(multiple_lines)
  • 控制文本框是否可用(Enable-当为false时无法在文本框输入)

示例3-29 、3-30 、3-31 、3-32四个示例做了一个网页登录页面(原创大赞)

3个文本框

  • 第一个填手机号或邮箱信息
  • 第二个用来填写密码
  • 第三个填写短信验证码

时间:2021年7月22日09:35:15

源代码找不到,只有手敲!累累累

3.6.5 图片组件Image

本地图片一般放在resource目录下的media文件下面

alpha透明度(HCIA模拟试题有考)

图片缩放类型

书中案例演练plus

重点:

在config.json中添加网络权限

配置网络文明访问白名单

在XML布局文件中添加Image组件,然后通过ID设置网络的图片

  • 需要定义一个加载图片的方法(loadNetImageURL-try-catch)
  • 需要在onStart方法中开启新的线程

3.6.6 TabList和Tab组件

时间:2021年7月22日09:57:39

学习补充:

  • Tablist私有属性着重关注:
  • tab_indicator_type
  • orientation
  • 设置fixedMode

默认为false,该模式下TabList的总宽度是各Tab宽度的总和,若固定了TabList的宽度,当超出可视区域,则可以通过滑动TabList来显示。如果设置为true,TabList的总宽度将与可视区域相同,各个Tab的宽度也会根据TabList的宽度而平均分配,该模式适用于Tab较少的情况。

  • TabList可以实现多个页签栏的切换,Tab为某个标签。子页签通常放在内容区上方,用于展示不同分类。
  • TabList常用接口:

示例3-33(创建TabList组件) 、3-34 (设置默认状态和颜色)、3-35(页面效果)、

示例3-36(TabList代码实现)

  • 定义Tab数组
  • 通过循环Tab组件的数组为TabList添加Tab组件
  • 监听TabList的选中事件,在某个Tab组件被选中的时候触发onSelected事件

学习思考:

其中的API的理解:

tabList.selectTabAt()

tabList.getSelectedTab()

3.6.7 Picker组件

时间:2021年7月22日10:47:11

学习补充:

Picker私有属性重要:

  • value(当前值)max_value(最大值)min_value(最小值)
  • selected_normal_text_margin_ratio(比例)
  • wheel_mode_enabled(是否循环数据)

Picker组件提供了滑动选择器,允许用户从预定义范围中进行选择

  • 取值范围
  • 响应选择器变化
  • 设置字符串与数字一一对应
  • DataPicker主要提供用户选择日期
  • TimePicker主要选择用户选择时间

picker的简单应用(开发文档)

picker.setFormatter(Formatter formatter)方法,修改为特定格式

设置要显示的字符串数组

对于不直接显示数字的组件,该方法可以设置字符串与数字一一对应。字符串数组长度必须等于取值范围内的值总数。用户在使用时需要注意,该方法会覆盖picker.setFormatter(Formatter formatter)方法。

Java代码中

  1. picker.setDisplayedData(new String[]{"Mon""Tue""Wed""Thu""Fri""Sat""Sun"}); 

DatePicker

  • DataPicker继承自StackLayout
  • 使用DataPicker时,需要进行声明
  1. import ohos.agp.components.DatePicker; 

响应日期改变

  • 在XML中添加Text显示选择日期
  • 在Java代码中响应日期改变事件

  • TimePicker
  • 获取时间,响应事件

3.6.8 复选框组件CheckBox

时间:2021年7月22日11:57:55

CheckBox可以实现选中和取消选中功能

示例3-37 (选中和取消选中)、3-38 (页面效果)、3-39(事件监听)

  • 需要用**private Set selectedSet = new HashSet<>();**保存选中的结果
  • ComponentState.COMPONENT_STATE_CHECKED,ComponentState.COMPONENT_STATE_EMPTY,选中和取消的设置
  • 设置选中状态checkbox.setCheck(true)
  • 关于初始化CheckBox的范式需要记住(范式代码来自开发文档开发文档)
  1. Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3); 
  2.    checkbox3.setButtonElement(elementButtonInit()); 
  3.    checkbox3.setCheckedStateChangedListener((component, state) -> { 
  4.        if (state) { 
  5.            selectedSet.add("C"); 
  6.        } else { 
  7.            selectedSet.remove("C"); 
  8.        } 
  9.        showAnswer(); 
  10.    }); 

3.6.9 单选按钮组件 RadioButton

时间:2021年7月22日13:11:38

RadioButton组件用于多选一操作,需要搭配RadioContainer使用

示例3-40 (xml实现单选)、3-41 (Java响应事件)

  • RadioButton组件需要被RadioContainer组件包裹
  • 可以通过orientation来设置横纵布局

小总结

笔者将ACE Java UI框架组件的学习分为两贴,每一贴学习50%,本文是前50%。学习每个组件自己均在DevEco上演练、分析、总结过的。

《鸿蒙操作系统开发入门经典》书中对于组件的讲解跟开发文档有很多雷同,但不影响学习。且其中创新部分,令人也有学习动力。

经过这段时间的学习,对Ability-Page-XML三者关系、设置默认路由、页面生命周期、部分API、组件部分属性、组件对应响应事件的掌握,都有了系统性的提升。

各个觉得需要重复练习的组件

  • TextField
  • TabList和Tab
  • CheckBox和RadioButton-RadioContainer

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

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

https://harmonyos.51cto.com

 

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

2021-07-29 09:55:59

鸿蒙HarmonyOS应用

2021-07-21 15:33:03

鸿蒙HarmonyOS应用

2010-05-07 17:31:42

Unix类操作系统

2010-08-24 15:26:32

SolarisUnix

2021-05-19 08:41:11

鸿蒙HarmonyOS应用

2021-05-17 14:37:02

鸿蒙HarmonyOS应用

2011-06-23 09:40:32

操作系统开源

2021-06-09 15:15:10

鸿蒙HarmonyOS应用

2009-07-10 09:40:16

Google操作系统Chrome市场

2021-10-14 15:14:36

鸿蒙HarmonyOS应用

2020-11-11 11:56:05

HarmonyOS

2020-12-10 09:48:15

鸿蒙Linux开发

2010-04-23 09:23:25

Aix操作系统

2010-05-04 17:17:46

Unix类

2020-12-24 12:01:16

鸿蒙HarmonyOS应用开发

2013-01-10 13:50:25

Android开发组件

2020-11-17 11:48:44

HarmonyOS

2012-09-03 11:11:29

WebOS开源

2021-01-18 09:52:20

鸿蒙HarmonyOS开发

2021-02-04 09:45:19

鸿蒙HarmonyOS应用开发
点赞
收藏

51CTO技术栈公众号