云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件 原创 精华

发布于 2021-7-22 13:49
浏览
4收藏

云雨—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命名,完整的用户界面是一个布局,用户界面中的一部分也可以是一个布局。布局中容纳ComponentComponentContainer对象。

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

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

     云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

  • ComponentContainer:作为容器容纳Component或ComponentContainer对象,并对它们进行布局。Java UI框架提供了一些标准布局功能的容器,它们继承自ComponentContainer

学习补充:

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 示例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

     云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

学习拓展:

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

  • 效果如下:

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • Textslice.xml的分析

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

3.6.4 文本输入框组件 TextField

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

  • TextField文本输入框组件用来接收用户的输入
  • 继承自Text组件

学习补充:

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 示例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

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

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

3.6.5 图片组件Image

  • 本地图片一般放在resource目录下的media文件下面
  • alpha透明度(HCIA模拟试题有考)
  • 图片缩放类型

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 书中案例演练plus

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 重点:
    • 在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较少的情况。

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 示例3-33(创建TabList组件) 、3-34 (设置默认状态和颜色)、3-35(页面效果)、
  • 示例3-36(TabList代码实现)
    • 定义Tab数组
    • 通过循环Tab组件的数组为TabList添加Tab组件
    • 监听TabList的选中事件,在某个Tab组件被选中的时候触发onSelected事件

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

学习思考:

其中的API的理解:

  • tabList.selectTabAt()

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • tabList.getSelectedTab()

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

3.6.7 Picker组件

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

学习补充:

  • Picker私有属性重要:
    • value(当前值)max_value(最大值)min_value(最小值)
    • selected_normal_text_margin_ratio(比例)
    • wheel_mode_enabled(是否循环数据)

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • Picker组件提供了滑动选择器,允许用户从预定义范围中进行选择
    • 取值范围
    • 响应选择器变化
    • 设置字符串与数字一一对应
    • DataPicker主要提供用户选择日期
    • TimePicker主要选择用户选择时间
  • picker的简单应用(开发文档)

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 设置要显示的字符串数组

    对于不直接显示数字的组件,该方法可以设置字符串与数字一一对应。字符串数组长度必须等于取值范围内的值总数。用户在使用时需要注意,该方法会覆盖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;
    

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

  • 响应日期改变

    • 在XML中添加Text显示选择日期
    • 在Java代码中响应日期改变事件
    •  云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区
  • TimePicker

  • 获取时间,响应事件

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

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();
    });

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

3.6.9 单选按钮组件 RadioButton

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

  • RadioButton组件用于多选一操作,需要搭配RadioContainer使用
  • 示例3-40 (xml实现单选)、3-41 (Java响应事件)
    • RadioButton组件需要被RadioContainer组件包裹
    • 可以通过orientation来设置横纵布局

 云雨—HarmonyOS《鸿蒙操作系统开发入门经典》|前九类UI组件-开源基础软件社区

小总结

  • 笔者将ACE Java UI框架组件的学习分为两贴,每一贴学习50%,本文是前50%。==学习每个组件自己均在DevEco上演练、分析、总结过的==。
  • 《鸿蒙操作系统开发入门经典》书中对于组件的讲解跟开发文档有很多雷同,但不影响学习。且其中创新部分,令人也有学习动力。
  • 经过这段时间的学习,对Ability-Page-XML三者关系、设置默认路由、页面生命周期、部分API、组件部分属性、组件对应响应事件的掌握,都有了系统性的提升。
  • 各个觉得需要重复练习的组件
    • TextField
    • TabList和Tab
    • CheckBox和RadioButton-RadioContainer
  • 嘿嘿,大家可以关注我的专栏!!《HarmonyOS开发者修仙录》
  • 革命还未成功,同志们仍需努力!为万物之互联而编程,为中华之复兴而读书!

引用自:

1.DevEco开发文档

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
3
收藏 4
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐