合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1) 原创 精华

Der_带鱼
发布于 2021-7-20 17:11
浏览
5收藏

合阳—HarmonyOS《鸿蒙操作系统开发入门经典-徐礼文》|自学笔记|第二篇 基础知识篇

本文引言

时间:2021年7月15日08:35:27

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

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

DevEco开发文档

第3章 鸿蒙ACE Java 应用框架

时间:2021年7月15日08:37:02

  • ACE(Ability Cross-platform Environment),即面向元能力的跨平台开发运行环境。

用来开发鸿蒙富设备应用程序

拓展思考:

富设备:是华为首提,相对于轻量级设备(如 Lite wearable 内存有限、功能有限)。所谓“富设备”,指的是使用频率高、强交互的设备,比如白板、投影仪、电视机、电子本等。

开发文档拓展(时间:2021年7月16日10:19:31):

Java UI框架提供了一部分ComponentComponentContainer的具体子类,即创建用户界面(UI)的各类组件,包括一些常用的组件(比如:文本、按钮、图片、列表等)和常用的布局**(比如:DirectionalLayout和DependentLayout)。**

组件和布局

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

Component和ComponentContainer

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

  • ComponentContainer:作为容器容纳Component或ComponentContainer对象,并对它们进行布局。Java UI框架提供了一些标准布局功能的容器,它们继承自ComponentContainer,一般以“Layout”结尾,如DirectionalLayout、DependentLayout等。

    LayoutConfig

    每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数,通过指定布局属性可以对子Component在布局中的显示效果进行约束。例如:“width”、“height”是最基本的布局属性,它们指定了组件的大小。

    组件树

    布局把Component和ComponentContainer以树状的层级结构进行组织,这样的一个布局就称为组件树。组件树的特点是仅有一个根组件,其他组件有且仅有一个父节点,组件之间的关系受到父节点的规则约束。

3.1 ACE运行时简介

时间:2021年7月15日09:16:30

  • 除开很多资料都有的ACE支持主流生态语言【Java、JS(JavaScript)】外,新知识,未来将支持华为自己的开发语言**“仓颉”**

拓展思考:

据查:华为仓颉公司真实存在,且类别是研发设计。大华为生态下,自己的开发语言势在必行。希望仓颉可以正儿八经的推出、稳稳当当的推行。期待!

  • 对ACE图的理解

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

学习思考:

此图可以提炼出一点,Java是命令式JS是声明式的

3.1.1 ACE针对全场景开发

  • 老生常谈1+8+N

对于这个N,要提一提,N泛指其他IoT设备

    1. 富设备-Java、C++语言的开发框架
    2. 轻设备-JavaScript的开发框架(可以让IoT设备运行鸿蒙应用程序)

拓展学习:

IoT设备:IoT(Internet of Things),即物联网。在HMS(华为移动服务)生态下的触控笔、智能灯、遥控板等设备也会应用。

3.1.2 ACE 支持的两种UI框架

学习总结:

这里的讲的都是UI框架,对于其他框架层(用户程序框架、Ability框架)还没讲。下面这两张图完全展示了其关系。再往外的话就是HarmonyOS四层系统架构了(内核、服务、架构、应用

UI:(User Interface)UI 框架是基于前端框架做的框架。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

时间:2021年7月15日23:43:07

注:

今儿写了好多稿子**《弥憾》、《梦蝶》、《气冲2》,对于本书的学习就延后到了接近十二的,但没事!把3.2学完再睡。确实是学校这边我看到了令我特别感慨的一件事情,然后做了一个招生简章分析和鸿蒙学习路线,其次是对于原子化卡片服务,我就感觉应该有一个大体的指引方向,就根据社区的文章进行总结发散,最后就是李老师的智慧家居的直播实在是将得特别好,很接地气,对于南向开发,我就不用开发板了(没钱)哈哈哈。在徐老师这本书的带领下,把OpenHarmony**的一些基本的搞明白就行。

  • 基于Java的应用程序框架(ACE Java UI)

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 基于JavaScript的应用开发框架(ACE JavaScript UI)

学习思考:

JavaScript的语法规则基本遵循ES6的语法规范。

ES6:ECMAScript 6

前端开发人员,可以使用HTML+CSS+JavaScript的形式进行应用的开发

后端开发人员,目前只能使用Java语言进行开发,所以对于JavaScript的开发者,依然需要Java语言的辅助。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.2 ACE开发中的核心概念

时间:2021年7月16日00:13:15

对一些核心概念的介绍

3.2.1 Ability与Slice

  • 书中用画板与画纸来举例子,画板是Ability,画纸是Slice。

学习思考:

Slice是子页面的意思。Ability是用户程序的基本组成部分。下图是关于Ability的一些介绍。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.2.2 Ability的分类

  • 两大类

    • FA(Feature Ability)有界面,可交互

    • PA(Page Ability)无界面,提供一些应用运行需要的能力。对于PA有两类模板:

      FA:元程序

      PA:元服务

      • Service模板(SA):用于提供后台运行任务的能力
      • Data模板(DA):用于对外部提供统一的数据访问能力

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.2.3 鸿蒙应用包结构

  • 鸿蒙应用软件包以APP Pack(Application Package)发布,由一个或多个HAP(HarmonyOS Ability Package)以及每个HAP属性的pack.info组成。

学习查询:

package-info.java 包的作用

  1. 为标注在包上的Annotation提供便利

  2. 声明包的私有类和常量

  3. 提供包的整体注释说明

学习思考:

一些缩写的总结:

HPM(HarmonyOS Package Manager):鸿蒙包管理器

HVD(HarmonyOS Virtual Device):鸿蒙虚拟机

ACE(Ability Cross-Platform Environment):Ability跨平台环境

HAP(HarmonyOS Application Package):鸿蒙应用程序包

BMS(Bundle Manager Service):Bundle管理服务

AMS(Ability Manager Service):Ability管理服务

DMS(Distribute Manager Service):分布式管理服务

HDF(HarmonyOS Driver Foundation):鸿蒙驱动框架

HMS(Huawei Mobile Service):华为移动服务

HAR(HarmonyOS Achieve):鸿蒙库

HML(HarmonyOS Markup Language):鸿蒙标记语言

  • HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开。
  • 一个HAP是由代码、资源、第三方库应用配置文件组成的模板包,分为:
    • entry:应用主模板。有且只有一个,可独立运行。
    • feature:应用的动态特性模板。只有包含Ability的HAP才能独立运行。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.3 创建一个ACE Java项目

时间:2021年7月16日09:35:35

  • 这一节的目标
    • 创建项目
    • 布局里放置文本框(显示数字)
    • 添加按钮(每次单击按钮让文本框的数字加1)

3.3.1 创建ACE项目

小吐槽:

不得不说,因为鸿蒙迭代很快,DevEco也变得很快,书里的用图是以前版本的,现在的DevEco是如下所示。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

很简单的流程不赘述,创建Java项目(first_demo),并进行预览。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.3.2 编写布局

==书中的代码均没有格式化!!!!!==

  • 在src/main/resources/base/layout/ability_main.xml文件下,添加Text组件和一个Button组件。
  • 为通过Button属性background_element引入,background_element的值**$graphic表示引用graphic文件夹**。background_ability_main是graphic文件夹下的xml文件

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

学习总结:

在编写页面布局的预览的时候,发现一个问题,书上给的是1080 X 2250的但现在模拟器上是1080 X 2340

根据组件的功能,可以将组件分为==布局类、显示类、交互类==三类:

关于ACE Java中的属性:

//DirectionalLayout
//	对齐方式
ohos:alignment="center"
//子布局排列方向
ohos:orientation="vertical"

虚拟像素单位:vp

虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸(区别于屏幕硬件本身的像素单位)。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

字体像素单位:fp

字体像素(font pixel) 大小默认情况下与 vp 相同,即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体,字体的实际显示大小就会在 vp 的基础上乘以 scale 系数,即 1 fp = 1 vp * scale

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.3.3 编写界面逻辑代码

时间:2021年7月16日10:32:38

  • 实现“单击加1“的功能

时间:2021年7月16日11:55:55

3.3报错了

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 第二天修正继续

时间:2021年7月17日10:51:58

  • 建立了另外一个Project(demo20210717),然后把页面布局做了出来

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

对比了一下,好像这个布局才是正确的,昨天做的是按钮居中。

然后继续!编写界面逻辑

  • 发现,,,错误是标签无法识别。所以我就查Text在哪个类,原来在Component。然后就AIt+enter,进行了import。

  • import ohos.agp.components.Component;
    
  • 最后运行结果如下:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

学习体验:

书中没有对Text接口进行说明,因为这里我们敲下来,需要对Text进行import。

3.3.4 通过模拟器预览效果

学习总结:

  • Tools-HVD-Manager-install-选择模拟器
  • 现在可供选择的模拟器有很多

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.3.5 日志HiLog的使用

时间:2021年7月17日11:23:29

  • 场景:在编写过程中,需要通过打印一条条日志来掌握程序运行的状态
  • 在HiLog的辅助类HiLogLabel中定义日志类型、服务域、标记。

一般把它定义位常量并放在类的最上面

static final HiLogLabel label =new HiLogLabel(HiLog.LOG_App,Ox00201,"My_TAG");
  • 三个参数:

    • HiLog.LOG_App(日志类型)一般取常量,表示第三方应用

    • Ox00201(服务域),十六进制形式。建议前三个数表示应用中的模块编号,后面两个数表示模块中的类型

    • “My_TAG”(一个字符串常量)。标识方法调用的类或服务行为,一般情况写类的名字,可以用这个标记对日志过滤。

  • 日志的级别(从低到高):

    • debug(调试信息)
    • info(普通信息)
    • warn(警告信息)
    • error(错误信息)
    • fatal(致命错误信息)
  • 高级应用(private和public修饰符)

String URL=“XXX”;
    int errno=0;
    HiLog.warn(label、"Failed to visit %{private},reason:%{public}d.",URL,errno);

%{}表示位置,其中s是输出内容,输出时不显示内容;d是输出的内容,输出时正确显示。

学习思考:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.4 ACE Java 项目目录结构

时间:2021年7月17日11:41:22

3.4.1 项目整体结构

  • 一个应用由一个或多个HAP包所组成,HAP包又可以分为entryfeature类型,每个HAP包由代码、资源、第三方库及应用配置文件组成。

所以entry就是一个应用的HAP包,一个entry类型的HAP包

时间:2021年7月19日08:55:02

  • 项目整体架构

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • test是测试目录
  • libs是用来存储或引用第三方包**(jar包,so包)**
  • build是用来存放最终编译后的包**(HAP包)**

3.4.2 项目的配置文件

时间:2021年7月19日08:57:33

  • 配置文件为config.json主要桑模块:
    • app:表示应用的全局配置,同APP中各个HAP中的app必须一样
    • deviceComfig:表示应用在具体设备上的信息
    • module:表示HAP包的配置信息,只对当前HAP包生效

拓展学习(开发文档-开发基础知识-应用配置文件-配置文件的元素:

json格式、顺序无关、有且仅有

==APP:==

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

==deviceConfig==

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

具体内部要使用的时候直接查就行

==module:==

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

==module下的ability配置不同的主题:==

在开发文档表十。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.4.3 资源文件的使用方式

时间:2021年7月19日12:41:18

  • 目录中的资源文件除开profile目录中的文件以外其余文件会被编码为二进制文件,并赋予资源文件ID,可以用ResourceTable引用
  • 限定目录需要开发者自行创建

目录名称由一个或多个表征应用场景或设备特征的限定词组合而成,包括语言、文字、国家或地区、横竖屏、设备类型和设备密度等六个方面。

顺序:语言_ 文字 _国家和地区 -横竖屏-设备类型-屏幕密度(连接方式见此)

说实话这部分资源文件的引用这部分不是很懂。暂且放着吧

3.5 ACE Java UI 布局

时间:2021年7月19日12:49:01

  • 两种布局方式:
    • XML方式声明UI布局
    • 代码方式创建UI布局
  • 系统默认XML方式声明UI布局

XML声明式布局的方式更加简便直观,编程创建布局的方式比较麻烦,需要在AbilitySlice中分别创建组件和布局,并将它们进行组织关联。

3.5.1 通过XML的方式创建布局

时间:2021年7月20日08:29:16

3.5.1和3.5.2中的3-4和3-5中的代码全是开发文档中的代码,书中的文字也是开发档案中的文字。

  • 例子3-4

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 创建xml布局:entry-src-main-resources-layout-new-File-XXX.xml
  • match_parent: 表示组件大小将扩展为父组件允许的最大值,它将占据父组件方向上的剩余大小
  • match_content:表示组件大小与它的内容占据的大小范围相适应
  • 代码中加载XML布局,并添加为根布局或作为其他布局的字Component
  • 例3-5

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.5.2 通过编码的方式创建布局

时间:2021年7月20日09:28:19

3.5.1和3.5.2中的3-4和3-5中的代码全是开发文档中的代码,书中的文字也是开发档案中的文字。

  1. 声明布局
  2. 创建组件
  3. 编码布局案例
  • 例3-6

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

基于3.5.1和3.5.2的学习思考:

==书上的所呈现的内容令我很失望==,不管是代码,还是方法总结都是开发文档的内容。缺少一点从初学者的角度对工程建立过程进行引导,缺少一点从初学者的角度对为啥这么敲代码进行一个简单的解释。甚至缺乏从示例代码到示例效果图的完整流程。

3.5.1的代码3-5敲完以后编译,会面临如问题

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

当然找不到呀,首先Layout_first_layout和Id_button根据开发文档的import的

别人肯定是在Myapplication创建了ResourceTable的。所以这里要进行import。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

//敲代码的时候自带的
import ohos.global.systemres.ResourceTable;
//改为com.hairtail.first_demo这就是自己的项目,可以用自己的xml
import com.hairtail.first_demo.ResourceTable;

==自己的名目名字在那里看:==

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

最后成功结果:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

3.5.2的代码3-6敲完以后编译,会面临如问题

会直接跳转到之前3-1,3-2,3-3的点击加一的界面,其原因肯定是MainAbility中的setMainRoute设置的不得劲。应该设置为:

super.setMainRoute(ExampleAbilitySlice.class.getName());

然后就呈现出效果图了。

3.5.3 鸿蒙常见布局方式

时间:2021年7月20日10:26:30

  • Java UI框架中,具体的布局类通常以XXLayout命名

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • Java UI框架中提供的标准布局功能的容器都继承自ComponentContainer但有些组件继承自StackLayout并没有以Layout结尾:ScrollView、PageSlider。ListContainer组件同样继承自ComponentContainer。

书上对这些东西就提一嘴,emm,学习的时候还是要保持对知识的好奇心!

学习拓展:

(from 开发文档)

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • ScrollView是一种带滚动功能的组件(交互类),它采用滑动的方式在有限的区域内显示更多的内容。共有XML属性继承自:StackLayout

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • PageSlider(看了开发文档的示例感觉这个组件会很好用)是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换。PageSlider无自有的XML属性,共有XML属性继承自:StackLayout
  • ListContainer是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。ListContainer的共有XML属性继承自:Component

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • **从3-7到3-17都是对布局的示例。

学习体验:

张荣超老师的手表开发中也有补充布局这块的知识,这次相当于一个温故的过程,也希望可以知新。

1.定向布局DirectionalLayout
  • DirectionalLayout布局类似Android中的LinearLayout
  • DirectionalLayout属性:

学习补充:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 重点在==排列属性、对齐属性、权重属性==

(1)排列属性

时间:2021年7月20日11:05:00

vertical:垂直

horizontal:水平

  • 元素之间会被截取

  • 示例3-7

学习提要:

为了使案例隔离,需提前创建demo1Slice,并在其中创建布局,然后在mainability中配置路由,最后就是在Layout中创建各种Layout啦。代码如下(贴代码是因为该代码是自己加的,不管书上的事。QAQ):

//demo1Slice.java
package com.hairtail.first_demo.slice;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import com.hairtail.first_demo.ResourceTable;

public class demo1Slice extends AbilitySlice {
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_second);
    }
}
//配置路由
super.setMainRoute(demo1Slice.class.getName());

学习探索:

  • 创建偷懒小技巧:不用书中的通过File创建直接通过系统给的Layout Resource File创建,可以通过填写布局的样式,创建完毕后自动生成一些代码,就不用从0开始了。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 排列属性垂直

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 排列属性水平且被截取

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

思考拓展:

  • 这里被截取了,有什么处理方式可以不让截取呢。试了试match_parent和match_content都不行。那怎么才行,就是后面的权重属性(weight),这块放到后面去详细学习。
  • 这里对色块颜色做了一个调整,因为书上是有颜色区别的,其目的四展示三个容器之间的排列顺序问题。所以我们也要进行颜色区别,再就是这里左边提供了取色器,可以选择颜色。

(2)对齐属性

  • 对齐属性的样式表在我之前的拓展里有
  • 对齐属性的演示
    • top、vertical_center、bottom属性的展示

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

上面的示例是为了体验其宽度累加。

  • vertical下的left、horizontal、right

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

(3)权重属性

权重(weight)就是按比例来分配组件占用父组件的大小

  • 演示1 : 2 : 1

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

学习探索:

  • 尝试3: 1 : 2

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

2.依赖布局DependentLayout

时间:2021年7月20日12:29:50

  • DependentLayout与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。
  • DependentLayout相当于Android中的相对布局RelativeLayout

学习补充:

(from 开发文档)

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • DependentLayout所包含组件可支持的XML属性表中需要注意的:
  • left_of与start_of、end_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,left_of会与start_of属性冲突;在“水平布局方向为从右到左”时,left_of会与end_of属性冲突。
  • 同时配置时,start_of、end_of优先级高于left_of属性。
  • align_parent_left与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_left会与align_parent_start属性冲突;在“水平布局方向为从右到左”时,align_parent_left会与align_parent_end属性冲突。
  • 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_left属性。

学习体验:

书本示例代码==没有代码格式化==,导致敲代码的时候,需要不停的找。这一点的感觉不是很好。

  • 示例3-8

学习拓展:

  • Text属性italic,文本是否斜体字体,ohos:italic=“true”、ohos:italic=“$boolean:true”。

  • text_front

书中的:似乎感觉是错的。等调试康康。

ohos:text_font="serif"

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

果不其然代码出现了问题,

  • 其一,关于text_front的用法出现了问题
  • 其二,按照示例代码敲的效果图如下:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

其原因经过调试发现,各个组件默认从左到右排列,所以Previous的按钮在next的左边,被截取了。把ohos:left_of=“$id:button2"改为ohos:right_of=”$id:button2",效果如下:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

所以为了达到书上的效果,就需要把Next按钮放在最右边。

也就是在Next按钮里加上与父组件的依赖关系。

ohos:align_parent_right="true"

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

时间:2021年7月20日13:24:23

我突然发掘,书上是给了源码的,,,啧啧啧,,我去看看源码

,,我一调试发现是对的,我怀疑我自己是不是敲错了。结果我结果检查(无语子)和调试发现,源码是改了的。如下(因为老师的源码我打了码):

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

跟我的处理方式是一样的,证实了==三个观点==:

  • 书中和源码中的ohos:text_font="serif"使用都不符合现在的开发文档

  • 随着版本迭代,书中的代码的确有问题(但老师给的源码是修正了的)。这跟张荣超老师关于呼吸手表开发一书中的代码错误是一样的。需要读者自行调试。

  • 自己对于示例3-8的解决方法是正确的,调整子组件与父组件的关系即可。

3.表格布局TableLayout

时间:2021年7月20日13:43:16

学习补充:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

学习体验:

非常抱歉的说,3-9的示例代码跟开发文档是一样的,且开发文档的示例更丰富一些。

  • TableLayout类似于Android的TableLayout。(啧啧,就是一样的嘛)

  • 通过设置行数和列数来控制表格内组件的行和列

  • 示例3-9

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

4.位置布局PositionLayout

时间:2021年7月20日13:46:58

学习体验:

此页面原创,且其鸿蒙TV管理系统页面贴近鸿蒙,适应主题。

学习补充:

对于超过布局本身大小的组件,超出部分将不显示。

PositionLayout以坐标的形式控制组件的显示位置,允许组件相互重叠

(0, 0)为左上角;当向下或向右移动时,坐标值变大;允许组件之间互相重叠。

PositionLayout开发文档提供的案例

本示例演示了PositionLayout的一些特性,包括子组件位置的影响和超越屏幕大小后子组件的显示规则。

  • PositionLayout为绝对布局,该布局指定了子组件在其中的具体位置(X/Y坐标)
  • 布局灵活性相对较差,在没有绝对定位的情况下相比其他类型的布局更难以维护
  • 示例3-10,示例3-11

学习体验:

  • 这里的ability_five.xml是缺失的,3-10直接就是ability_six.xml。不知道怎么回事。但源码里有ability_five.xml。
  • 这里需要在源码那里把图片CV一下

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 下面这行关于图片src的引用就出现了报错。源码和书中都有问题

  • ohos:image_src="$media:log.png"
    

学习总结:

‘.’ is not a valid resource name character

“.”不是有效的资源名称字符

Validates resource references inside Harmony XML files

验证XML文件中的资源引用

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

所以解决方式是改成如下模样:

ohos:image_src="$media:log"

即可。

  • 示例3-10,3-11,3-12

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

学习体验:

  • 其一,书中并没有提醒读者关于config.json文件的修改,在代码和效果图直接呈现的沟壑需要读者自行跨越。这里需要大家在config.json中把"deviceType"加上“tv”注意:这里tv不能是TV。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 其二,书中和源码中对于image组件下image_src的使用不规范(书中和源码中是:ohos:image_src=“$media: log.png”),应该参照开发文档和DevEco的提示改成ohos:image_src=“$media: log”。
5.堆叠布局StackLayout

时间:2021年7月20日14:42:27

注:

很遗憾,这一块也还是开发文档的示例。

学习补充:

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • StackLayout直接在屏幕上开辟出一片空白的区域,添加到这个布局中的视图都是以层叠的方式显示。

  • 默认放到左上角,第一个添加到布局中的视图显示在最底层,上一层的视图会覆盖下一层的视图。

  • StackLayout相当于Android 中的帧布局FrameLayout

  • 示例3-13

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 3-14(源代码没有-但这里的代码量很少)
    • 使用layout_alignment属性可以指定组件在StackLayout中的相对位置(这儿是把Button添加到StackLayout的右边)

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 3-15将子视图从后面移到前面(同样源代码里么有)

3-15完全不知道写在那里。源代码里也没有找到。其实应该在mainability中去设置setClickedListener。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

6.自适应布局AdaptiveBoxLayout

时间:2021年7月20日15:39:58

学习补充:

  • 自适应组件的开发文档

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 自适应布局的常用方法

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • AdaptiveBoxLayout意为自适应盒模式布局,是将整个UI划分为相同宽度,但高度可能不同的行和列的盒子
    • 盒子宽度取决于布局的宽度和盒子数量
    • 每个盒子的高度由其子组件的高度决定
    • 子组件的排列只有在前一行被填满后才会开始在新一行中占位
    • 每一行的高度由该行最高盒子决定
    • 布局的宽度只有MATCH_PARENT或固定值
    • 可以为布局党的组件设置长度、宽度和对其方式
  • 示例3-16,3-17(源代码里无)

哥们儿稀碎!源代码没有ability_eight的代码,三页半的代码!我的天。

敲了一半不服气,去看了源代码!发现源代码的ability_five就是ability_eight

!!!破案了。

学习思考:

同样的问题

ohos:image_src="$media:icon_more"

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

小总结

学习《鸿蒙操作系统开发入门经典-徐礼文》已经到89/477页了,第三章的内容也学了一半。做一个总结。

  • 其中关于有一些鸿蒙特有的概念解释还是有一些遗漏。(富设备、IoT设备)
  • 本书作者对开发过程的一些描述有自己的看法(page和slice的关系-画板画布)
  • 本书在示例代码和源代码方面有一些问题
    • 1.关于示例代码在哪个文件下有些示例并未说明
    • 2.示例代码与开发文档给的示例代码有重叠,给读者体验下降。(3-4、3-5、3-6、3-9、3-13、3-14、3-15)
    • 3.源代码的ability_five就是ability_eight。名称不一样,会给读者带来困扰。
    • 4.在3-10、3-11、3-12的鸿蒙TV绝对布局的例子中,书中并没有提醒读者关于config.json文件的修改,需要读者自行去跨越代码到效果图的沟壑。
    • 5.书中和源码中的ohos:text_font="serif"使用都不符合现在的开发文档
    • 6.书中和源码中对于image组件下image_src的使用不规范(书中和源码中是:ohos:image_src=“$media: log.png”),应该参照开发文档和DevEco的提示改成ohos:image_src=“$media: log”
    • 7.着版本迭代,书中的代码的确有问题(但老师给的源码是修正了的),3-8表格布局中,这一行代码的缺失,ohos:align_parent_right=“true”
  • 虽然问题还是有,但方法总比困难多,加上今天老师回帖,之后有视频上线,也会有新的案例。

合阳-HarmonyOS《鸿蒙操作系统开发入门经典》|第二篇 第3章(1)-鸿蒙开发者社区

  • 写笔记的初衷还是给自己的一个输出过程,也是一种学习反馈和激励。当然也希望通过自己的笔记,帮助其他读者在学习中解决遇见的疑惑!

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
10
收藏 5
回复
举报
5条回复
按时间正序
/
按时间倒序
Whyalone
Whyalone

道友,你好😂😂😂😂

回复
2021-7-20 17:59:37
Anzia
Anzia

好羡慕有这么多时间hhh

1
回复
2021-7-20 20:13:16
爱吃土豆丝的打工人
爱吃土豆丝的打工人

哇  好长啊  这个可以分三大块写昂  留下精华的部分

1
回复
2021-7-21 14:51:26
Der_带鱼
Der_带鱼 回复了 爱吃土豆丝的打工人
哇 好长啊 这个可以分三大块写昂 留下精华的部分

要得,接下来的笔记会按类型进行整理发帖!谢谢哥

回复
2021-7-21 15:03:33
爱吃土豆丝的打工人
爱吃土豆丝的打工人 回复了 Der_带鱼
要得,接下来的笔记会按类型进行整理发帖!谢谢哥

额  你这太客气~  共同努力~

回复
2021-7-21 15:06:19
回复
    相关推荐