云雨—HarmonyOS《鸿蒙操作系统开发入门经典-徐礼文》|自学笔记|前九类UI组件

本文引言

时间：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代码中

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

• DatePicker

• DataPicker继承自StackLayout

• 使用DataPicker时，需要进行声明

• 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<String> selectedSet = new HashSet<>();**保存选中的结果
  • ComponentState.COMPONENT_STATE_CHECKED，ComponentState.COMPONENT_STATE_EMPTY，选中和取消的设置
  • 设置选中状态checkbox.setCheck（true）
  • 关于初始化CheckBox的范式需要记住(范式代码来自开发文档开发文档)

 Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3);
    checkbox3.setButtonElement(elementButtonInit());
    checkbox3.setCheckedStateChangedListener((component, state) -> {
        if (state) {
            selectedSet.add("C");
        } else {
            selectedSet.remove("C");
        }
        showAnswer();
    });

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
• 嘿嘿，大家可以关注我的专栏！！《HarmonyOS开发者修仙录》
• 革命还未成功，同志们仍需努力！为万物之互联而编程，为中华之复兴而读书！

引用自：

1.DevEco开发文档

2.《鸿蒙操作系统开发入门经典》