[[412412]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

本文引言

時(shí)間：2021年7月15日08:35:27

本文包含筆者對(duì)徐文禮老師的《鴻蒙操作系統(tǒng)開(kāi)發(fā)入門(mén)經(jīng)典》的學(xué)習(xí)過(guò)程中的筆記總結(jié)、拓展思考、案例反饋、閱讀體驗(yàn)。

為尊重老師的知識(shí)產(chǎn)權(quán)和精簡(jiǎn)本文，本文不會(huì)粘貼代碼、倒置案例、機(jī)械打字。

DevEco開(kāi)發(fā)文檔

第3章 鴻蒙ACE Java 應(yīng)用框架

時(shí)間：2021年7月15日08:37:02

ACE(Ability Cross-platform Environment)，即面向元能力的跨平臺(tái)開(kāi)發(fā)運(yùn)行環(huán)境。

用來(lái)開(kāi)發(fā)鴻蒙富設(shè)備應(yīng)用程序

拓展思考：

富設(shè)備：是華為首提，相對(duì)于輕量級(jí)設(shè)備(如 Lite wearable 內(nèi)存有限、功能有限)。所謂“富設(shè)備”，指的是使用頻率高、強(qiáng)交互的設(shè)備，比如白板、投影儀、電視機(jī)、電子本等。

開(kāi)發(fā)文檔拓展(時(shí)間：2021年7月16日10:19:31)：

Java UI框架提供了一部分Component和ComponentContainer的具體子類，即創(chuàng)建用戶界面(UI)的各類組件，包括一些常用的組件(比如：文本、按鈕、圖片、列表等)和常用的布局**(比如：DirectionalLayout和DependentLayout)。**

組件和布局

用戶界面元素統(tǒng)稱為組件，組件根據(jù)一定的層級(jí)結(jié)構(gòu)進(jìn)行組合形成布局。組件在未被添加到布局中時(shí)，既無(wú)法顯示也無(wú)法交互，因此一個(gè)用戶界面至少包含一個(gè)布局。在UI框架中，具體的布局類通常以XXLayout命名，完整的用戶界面是一個(gè)布局，用戶界面中的一部分也可以是一個(gè)布局。布局中容納Component與ComponentContainer對(duì)象。

Component和ComponentContainer

• Component：提供內(nèi)容顯示，是界面中所有組件的基類，開(kāi)發(fā)者可以給Component設(shè)置事件處理回調(diào)來(lái)創(chuàng)建一個(gè)可交互的組件。Java UI框架提供了一些常用的界面元素，也可稱之為組件，組件一般直接繼承Component或它的子類，如Text、Image等。
• ComponentContainer：作為容器容納Component或ComponentContainer對(duì)象，并對(duì)它們進(jìn)行布局。Java UI框架提供了一些標(biāo)準(zhǔn)布局功能的容器，它們繼承自ComponentContainer，一般以“Layout”結(jié)尾，如DirectionalLayout、DependentLayout等。

LayoutConfig

每種布局都根據(jù)自身特點(diǎn)提供LayoutConfig供子Component設(shè)定布局屬性和參數(shù)，通過(guò)指定布局屬性可以對(duì)子Component在布局中的顯示效果進(jìn)行約束。例如：“width”、“height”是最基本的布局屬性，它們指定了組件的大小。

組件樹(shù)

布局把Component和ComponentContainer以樹(shù)狀的層級(jí)結(jié)構(gòu)進(jìn)行組織，這樣的一個(gè)布局就稱為組件樹(shù)。組件樹(shù)的特點(diǎn)是僅有一個(gè)根組件，其他組件有且僅有一個(gè)父節(jié)點(diǎn)，組件之間的關(guān)系受到父節(jié)點(diǎn)的規(guī)則約束。

3.1 ACE運(yùn)行時(shí)簡(jiǎn)介

時(shí)間：2021年7月15日09:16:30

• 除開(kāi)很多資料都有的ACE支持主流生態(tài)語(yǔ)言【Java、JS(JavaScript)】外，新知識(shí)，未來(lái)將支持華為自己的開(kāi)發(fā)語(yǔ)言**“倉(cāng)頡”**

拓展思考：

據(jù)查：華為倉(cāng)頡公司真實(shí)存在，且類別是研發(fā)設(shè)計(jì)。大華為生態(tài)下，自己的開(kāi)發(fā)語(yǔ)言勢(shì)在必行。希望倉(cāng)頡可以正兒八經(jīng)的推出、穩(wěn)穩(wěn)當(dāng)當(dāng)?shù)耐菩?。期?

• 對(duì)ACE圖的理解

 學(xué)習(xí)思考：

此圖可以提煉出一點(diǎn)，Java是命令式，JS是聲明式的。

3.1.1 ACE針對(duì)全場(chǎng)景開(kāi)發(fā)

• 老生常談1+8+N

對(duì)于這個(gè)N，要提一提，N泛指其他IoT設(shè)備

1. 富設(shè)備-Java、C++語(yǔ)言的開(kāi)發(fā)框架
2. 輕設(shè)備-JavaScript的開(kāi)發(fā)框架(可以讓IoT設(shè)備運(yùn)行鴻蒙應(yīng)用程序)

拓展學(xué)習(xí)：

IoT設(shè)備：IoT(Internet of Things)，即物聯(lián)網(wǎng)。在HMS(華為移動(dòng)服務(wù))生態(tài)下的觸控筆、智能燈、遙控板等設(shè)備也會(huì)應(yīng)用。

3.1.2 ACE 支持的兩種UI框架

學(xué)習(xí)總結(jié)：

這里的講的都是UI框架，對(duì)于其他框架層(用戶程序框架、Ability框架)還沒(méi)講。下面這兩張圖完全展示了其關(guān)系。再往外的話就是HarmonyOS四層系統(tǒng)架構(gòu)了(內(nèi)核、服務(wù)、架構(gòu)、應(yīng)用)

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

時(shí)間：2021年7月15日23:43:07

注：

今兒寫(xiě)了好多稿子**《彌憾》、《夢(mèng)蝶》、《氣沖2》，對(duì)于本書(shū)的學(xué)習(xí)就延后到了接近十二的，但沒(méi)事!把3.2學(xué)完再睡。確實(shí)是學(xué)校這邊我看到了令我特別感慨的一件事情，然后做了一個(gè)招生簡(jiǎn)章分析和鴻蒙學(xué)習(xí)路線，其次是對(duì)于原子化卡片服務(wù)，我就感覺(jué)應(yīng)該有一個(gè)大體的指引方向，就根據(jù)社區(qū)的文章進(jìn)行總結(jié)發(fā)散，最后就是李老師的智慧家居的直播實(shí)在是將得特別好，很接地氣，對(duì)于南向開(kāi)發(fā)，我就不用開(kāi)發(fā)板了(沒(méi)錢(qián))哈哈哈。在徐老師這本書(shū)的帶領(lǐng)下，把OpenHarmony**的一些基本的搞明白就行。

• 基于Java的應(yīng)用程序框架(ACE Java UI)

• 基于JavaScript的應(yīng)用開(kāi)發(fā)框架(ACE JavaScript UI)

學(xué)習(xí)思考：

JavaScript的語(yǔ)法規(guī)則基本遵循ES6的語(yǔ)法規(guī)范。

ES6:ECMAScript 6

前端開(kāi)發(fā)人員，可以使用HTML+CSS+JavaScript的形式進(jìn)行應(yīng)用的開(kāi)發(fā)

后端開(kāi)發(fā)人員，目前只能使用Java語(yǔ)言進(jìn)行開(kāi)發(fā)，所以對(duì)于JavaScript的開(kāi)發(fā)者，依然需要Java語(yǔ)言的輔助。

3.2 ACE開(kāi)發(fā)中的核心概念

時(shí)間：2021年7月16日00:13:15

對(duì)一些核心概念的介紹

3.2.1 Ability與Slice

• 書(shū)中用畫(huà)板與畫(huà)紙來(lái)舉例子，畫(huà)板是Ability，畫(huà)紙是Slice。

學(xué)習(xí)思考：

Slice是子頁(yè)面的意思。Ability是用戶程序的基本組成部分。下圖是關(guān)于Ability的一些介紹。

3.2.2 Ability的分類

兩大類

FA(Feature Ability)有界面，可交互

PA(Page Ability)無(wú)界面，提供一些應(yīng)用運(yùn)行需要的能力。對(duì)于PA有兩類模板：

• FA：元程序
• PA：元服務(wù)

Service模板(SA)：用于提供后臺(tái)運(yùn)行任務(wù)的能力

Data模板(DA)：用于對(duì)外部提供統(tǒng)一的數(shù)據(jù)訪問(wèn)能力

3.2.3 鴻蒙應(yīng)用包結(jié)構(gòu)

• 鴻蒙應(yīng)用軟件包以APP Pack(Application Package)發(fā)布，由一個(gè)或多個(gè)HAP(HarmonyOS Ability Package)以及每個(gè)HAP屬性的pack.info組成。

學(xué)習(xí)查詢：

package-info.java 包的作用

為標(biāo)注在包上的Annotation提供便利

聲明包的私有類和常量

提供包的整體注釋說(shuō)明

學(xué)習(xí)思考：

一些縮寫(xiě)的總結(jié)：

HPM(HarmonyOS Package Manager)：鴻蒙包管理器

HVD(HarmonyOS Virtual Device)：鴻蒙虛擬機(jī)

ACE(Ability Cross-Platform Environment)：Ability跨平臺(tái)環(huán)境

HAP(HarmonyOS Application Package)：鴻蒙應(yīng)用程序包

BMS(Bundle Manager Service)：Bundle管理服務(wù)

AMS(Ability Manager Service)：Ability管理服務(wù)

DMS(Distribute Manager Service)：分布式管理服務(wù)

HDF(HarmonyOS Driver Foundation)：鴻蒙驅(qū)動(dòng)框架

HMS(Huawei Mobile Service)：華為移動(dòng)服務(wù)

HAR(HarmonyOS Achieve)：鴻蒙庫(kù)

HML(HarmonyOS Markup Language)：鴻蒙標(biāo)記語(yǔ)言

HAP是Ability的部署包，HarmonyOS應(yīng)用代碼圍繞Ability組件展開(kāi)。

一個(gè)HAP是由代碼、資源、第三方庫(kù)應(yīng)用配置文件組成的模板包，分為：

• entry：應(yīng)用主模板。有且只有一個(gè)，可獨(dú)立運(yùn)行。
• feature：應(yīng)用的動(dòng)態(tài)特性模板。只有包含Ability的HAP才能獨(dú)立運(yùn)行。

3.3 創(chuàng)建一個(gè)ACE Java項(xiàng)目

時(shí)間：2021年7月16日09:35:35

• 這一節(jié)的目標(biāo)

創(chuàng)建項(xiàng)目

布局里放置文本框(顯示數(shù)字)

添加按鈕(每次單擊按鈕讓文本框的數(shù)字加1)

3.3.1 創(chuàng)建ACE項(xiàng)目

小吐槽：

不得不說(shuō)，因?yàn)轼櫭傻芸?，DevEco也變得很快，書(shū)里的用圖是以前版本的，現(xiàn)在的DevEco是如下所示。

很簡(jiǎn)單的流程不贅述，創(chuàng)建Java項(xiàng)目(first_demo),并進(jìn)行預(yù)覽。

3.3.2 編寫(xiě)布局

書(shū)中的代碼均沒(méi)有格式化!!!!!

• 在src/main/resources/base/layout/ability_main.xml文件下，添加Text組件和一個(gè)Button組件。
• 為通過(guò)Button屬性background_element引入，background_element的值**$graphic表示引用graphic文件夾**。background_ability_main是graphic文件夾下的xml文件。

學(xué)習(xí)總結(jié)：

在編寫(xiě)頁(yè)面布局的預(yù)覽的時(shí)候，發(fā)現(xiàn)一個(gè)問(wèn)題，書(shū)上給的是1080 X 2250的但現(xiàn)在模擬器上是1080 X 2340

根據(jù)組件的功能，可以將組件分為布局類、顯示類、交互類三類：

關(guān)于ACE Java中的屬性：

//DirectionalLayout 
//  對(duì)齊方式 
ohos:alignment="center" 
//子布局排列方向 
ohos:orientation="vertical" 

虛擬像素單位：vp

虛擬像素(virtual pixel)是一臺(tái)設(shè)備針對(duì)應(yīng)用而言所具有的虛擬尺寸(區(qū)別于屏幕硬件本身的像素單位)。它提供了一種靈活的方式來(lái)適應(yīng)不同屏幕密度的顯示效果。

字體像素單位：fp

字體像素(font pixel) 大小默認(rèn)情況下與 vp 相同，即默認(rèn)情況下 1 fp = 1vp。如果用戶在設(shè)置中選擇了更大的字體，字體的實(shí)際顯示大小就會(huì)在 vp 的基礎(chǔ)上乘以 scale 系數(shù)，即 1 fp = 1 vp * scale。

3.3.3 編寫(xiě)界面邏輯代碼

時(shí)間：2021年7月16日10:32:38

• 實(shí)現(xiàn)“單擊加1“的功能

時(shí)間：2021年7月16日11:55:55

3.3報(bào)錯(cuò)了

• 第二天修正繼續(xù)

時(shí)間：2021年7月17日10:51:58

• 建立了另外一個(gè)Project(demo20210717)，然后把頁(yè)面布局做了出來(lái)

對(duì)比了一下，好像這個(gè)布局才是正確的，昨天做的是按鈕居中。

然后繼續(xù)!編寫(xiě)界面邏輯

• 發(fā)現(xiàn)，，，錯(cuò)誤是標(biāo)簽無(wú)法識(shí)別。所以我就查T(mén)ext在哪個(gè)類，原來(lái)在Component。然后就AIt+enter，進(jìn)行了import。

import ohos.agp.components.Component; 

• 最后運(yùn)行結(jié)果如下：

學(xué)習(xí)體驗(yàn)：

書(shū)中沒(méi)有對(duì)Text接口進(jìn)行說(shuō)明，因?yàn)檫@里我們敲下來(lái)，需要對(duì)Text進(jìn)行import。

3.3.4 通過(guò)模擬器預(yù)覽效果

學(xué)習(xí)總結(jié)：

• Tools-HVD-Manager-install-選擇模擬器
• 現(xiàn)在可供選擇的模擬器有很多

3.3.5 日志HiLog的使用

時(shí)間：2021年7月17日11:23:29

• 場(chǎng)景：在編寫(xiě)過(guò)程中，需要通過(guò)打印一條條日志來(lái)掌握程序運(yùn)行的狀態(tài)
• 在HiLog的輔助類HiLogLabel中定義日志類型、服務(wù)域、標(biāo)記。

一般把它定義位常量并放在類的最上面

static final HiLogLabel label =new HiLogLabel(HiLog.LOG_App,Ox00201,"My_TAG"); 

三個(gè)參數(shù)：

• HiLog.LOG_App(日志類型)一般取常量，表示第三方應(yīng)用
• Ox00201(服務(wù)域)，十六進(jìn)制形式。建議前三個(gè)數(shù)表示應(yīng)用中的模塊編號(hào)，后面兩個(gè)數(shù)表示模塊中的類型
• “My_TAG”(一個(gè)字符串常量)。標(biāo)識(shí)方法調(diào)用的類或服務(wù)行為，一般情況寫(xiě)類的名字，可以用這個(gè)標(biāo)記對(duì)日志過(guò)濾。

日志的級(jí)別(從低到高)：

• debug(調(diào)試信息)
• info(普通信息)
• warn(警告信息)
• error(錯(cuò)誤信息)
• fatal(致命錯(cuò)誤信息)

高級(jí)應(yīng)用(private和public修飾符)

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

%{}表示位置，其中s是輸出內(nèi)容，輸出時(shí)不顯示內(nèi)容;d是輸出的內(nèi)容，輸出時(shí)正確顯示。

學(xué)習(xí)思考：

3.4 ACE Java 項(xiàng)目目錄結(jié)構(gòu)

時(shí)間：2021年7月17日11:41:22

3.4.1 項(xiàng)目整體結(jié)構(gòu)

• 一個(gè)應(yīng)用由一個(gè)或多個(gè)HAP包所組成，HAP包又可以分為entry和feature類型，每個(gè)HAP包由代碼、資源、第三方庫(kù)及應(yīng)用配置文件組成。

所以entry就是一個(gè)應(yīng)用的HAP包，一個(gè)entry類型的HAP包

時(shí)間：2021年7月19日08:55:02

• 項(xiàng)目整體架構(gòu)

• test是測(cè)試目錄
• libs是用來(lái)存儲(chǔ)或引用第三方包**(jar包，so包)**
• build是用來(lái)存放最終編譯后的包**(HAP包)**

3.4.2 項(xiàng)目的配置文件

時(shí)間：2021年7月19日08:57:33

配置文件為config.json主要桑模塊：

• app：表示應(yīng)用的全局配置，同APP中各個(gè)HAP中的app必須一樣
• deviceComfig：表示應(yīng)用在具體設(shè)備上的信息
• module：表示HAP包的配置信息，只對(duì)當(dāng)前HAP包生效

拓展學(xué)習(xí)(開(kāi)發(fā)文檔-開(kāi)發(fā)基礎(chǔ)知識(shí)-應(yīng)用配置文件-配置文件的元素：

json格式、順序無(wú)關(guān)、有且僅有

APP：

deviceConfig

具體內(nèi)部要使用的時(shí)候直接查就行

module：

module下的ability配置不同的主題：

在開(kāi)發(fā)文檔表十。

3.4.3 資源文件的使用方式

時(shí)間：2021年7月19日12:41:18

• 目錄中的資源文件除開(kāi)profile目錄中的文件以外其余文件會(huì)被編碼為二進(jìn)制文件，并賦予資源文件ID，可以用ResourceTable引用
• 限定目錄需要開(kāi)發(fā)者自行創(chuàng)建

目錄名稱由一個(gè)或多個(gè)表征應(yīng)用場(chǎng)景或設(shè)備特征的限定詞組合而成，包括語(yǔ)言、文字、國(guó)家或地區(qū)、橫豎屏、設(shè)備類型和設(shè)備密度等六個(gè)方面。

順序：語(yǔ)言_ 文字 _國(guó)家和地區(qū) -橫豎屏-設(shè)備類型-屏幕密度(連接方式見(jiàn)此)

說(shuō)實(shí)話這部分資源文件的引用這部分不是很懂。暫且放著吧

3.5 ACE Java UI 布局

時(shí)間：2021年7月19日12:49:01

兩種布局方式：

• XML方式聲明UI布局
• 代碼方式創(chuàng)建UI布局

系統(tǒng)默認(rèn)XML方式聲明UI布局

XML聲明式布局的方式更加簡(jiǎn)便直觀，編程創(chuàng)建布局的方式比較麻煩，需要在AbilitySlice中分別創(chuàng)建組件和布局，并將它們進(jìn)行組織關(guān)聯(lián)。

3.5.1 通過(guò)XML的方式創(chuàng)建布局

時(shí)間：2021年7月20日08:29:16

3.5.1和3.5.2中的3-4和3-5中的代碼全是開(kāi)發(fā)文檔中的代碼，書(shū)中的文字也是開(kāi)發(fā)檔案中的文字。

例子3-4

• 創(chuàng)建xml布局：entry-src-main-resources-layout-new-File-XXX.xml
• match_parent: 表示組件大小將擴(kuò)展為父組件允許的最大值，它將占據(jù)父組件方向上的剩余大小
• match_content：表示組件大小與它的內(nèi)容占據(jù)的大小范圍相適應(yīng)
• 代碼中加載XML布局，并添加為根布局或作為其他布局的字Component
• 例3-5

3.5.2 通過(guò)編碼的方式創(chuàng)建布局

時(shí)間：2021年7月20日09:28:19

3.5.1和3.5.2中的3-4和3-5中的代碼全是開(kāi)發(fā)文檔中的代碼，書(shū)中的文字也是開(kāi)發(fā)檔案中的文字。

1. 聲明布局
2. 創(chuàng)建組件
3. 編碼布局案例

• 例3-6

基于3.5.1和3.5.2的學(xué)習(xí)思考：

書(shū)上的所呈現(xiàn)的內(nèi)容令我很失望，不管是代碼，還是方法總結(jié)都是開(kāi)發(fā)文檔的內(nèi)容。缺少一點(diǎn)從初學(xué)者的角度對(duì)工程建立過(guò)程進(jìn)行引導(dǎo)，缺少一點(diǎn)從初學(xué)者的角度對(duì)為啥這么敲代碼進(jìn)行一個(gè)簡(jiǎn)單的解釋。甚至缺乏從示例代碼到示例效果圖的完整流程。

3.5.1的代碼3-5敲完以后編譯,會(huì)面臨如問(wèn)題：

當(dāng)然找不到呀，首先Layout_first_layout和Id_button根據(jù)開(kāi)發(fā)文檔的import的

別人肯定是在Myapplication創(chuàng)建了ResourceTable的。所以這里要進(jìn)行import。

//敲代碼的時(shí)候自帶的 
import ohos.global.systemres.ResourceTable; 
//改為com.hairtail.first_demo這就是自己的項(xiàng)目，可以用自己的xml 
import com.hairtail.first_demo.ResourceTable; 

自己的名目名字在那里看：

最后成功結(jié)果：

3.5.2的代碼3-6敲完以后編譯,會(huì)面臨如問(wèn)題：

會(huì)直接跳轉(zhuǎn)到之前3-1,3-2,3-3的點(diǎn)擊加一的界面，其原因肯定是MainAbility中的setMainRoute設(shè)置的不得勁。應(yīng)該設(shè)置為：

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

然后就呈現(xiàn)出效果圖了。

3.5.3 鴻蒙常見(jiàn)布局方式

時(shí)間：2021年7月20日10:26:30

• Java UI框架中，具體的布局類通常以XXLayout命名

• Java UI框架中提供的標(biāo)準(zhǔn)布局功能的容器都繼承自ComponentContainer但有些組件繼承自StackLayout并沒(méi)有以Layout結(jié)尾：ScrollView、PageSlider。ListContainer組件同樣繼承自ComponentContainer。

書(shū)上對(duì)這些東西就提一嘴，emm，學(xué)習(xí)的時(shí)候還是要保持對(duì)知識(shí)的好奇心!

學(xué)習(xí)拓展：

(from 開(kāi)發(fā)文檔)

ScrollView是一種帶滾動(dòng)功能的組件(交互類)，它采用滑動(dòng)的方式在有限的區(qū)域內(nèi)顯示更多的內(nèi)容。共有XML屬性繼承自：StackLayout

PageSlider(看了開(kāi)發(fā)文檔的示例感覺(jué)這個(gè)組件會(huì)很好用)是用于頁(yè)面之間切換的組件，它通過(guò)響應(yīng)滑動(dòng)事件完成頁(yè)面間的切換。PageSlider無(wú)自有的XML屬性，共有XML屬性繼承自：StackLayout

ListContainer是用來(lái)呈現(xiàn)連續(xù)、多行數(shù)據(jù)的組件，包含一系列相同類型的列表項(xiàng)。ListContainer的共有XML屬性繼承自：Component

**從3-7到3-17都是對(duì)布局的示例。

學(xué)習(xí)體驗(yàn)：

張榮超老師的手表開(kāi)發(fā)中也有補(bǔ)充布局這塊的知識(shí)，這次相當(dāng)于一個(gè)溫故的過(guò)程，也希望可以知新。

1.定向布局DirectionalLayout

• DirectionalLayout布局類似Android中的LinearLayout
• DirectionalLayout屬性：

學(xué)習(xí)補(bǔ)充：

• 重點(diǎn)在排列屬性、對(duì)齊屬性、權(quán)重屬性

(1)排列屬性

時(shí)間：2021年7月20日11:05:00

vertical：垂直

horizontal：水平

• 元素之間會(huì)被截取
• 示例3-7

學(xué)習(xí)提要：

為了使案例隔離，需提前創(chuàng)建demo1Slice,并在其中創(chuàng)建布局，然后在mainability中配置路由，最后就是在Layout中創(chuàng)建各種Layout啦。代碼如下(貼代碼是因?yàn)樵摯a是自己加的，不管書(shū)上的事。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()); 

學(xué)習(xí)探索：

• 創(chuàng)建偷懶小技巧：不用書(shū)中的通過(guò)File創(chuàng)建直接通過(guò)系統(tǒng)給的Layout Resource File創(chuàng)建，可以通過(guò)填寫(xiě)布局的樣式，創(chuàng)建完畢后自動(dòng)生成一些代碼，就不用從0開(kāi)始了。

•  排列屬性垂直

• 排列屬性水平且被截取

思考拓展：

• 這里被截取了，有什么處理方式可以不讓截取呢。試了試match_parent和match_content都不行。那怎么才行，就是后面的權(quán)重屬性(weight)，這塊放到后面去詳細(xì)學(xué)習(xí)。
• 這里對(duì)色塊顏色做了一個(gè)調(diào)整，因?yàn)闀?shū)上是有顏色區(qū)別的，其目的四展示三個(gè)容器之間的排列順序問(wèn)題。所以我們也要進(jìn)行顏色區(qū)別，再就是這里左邊提供了取色器，可以選擇顏色。

(2)對(duì)齊屬性

• 對(duì)齊屬性的樣式表在我之前的拓展里有
• 對(duì)齊屬性的演示

top、vertical_center、bottom屬性的展示

上面的示例是為了體驗(yàn)其寬度累加。

• vertical下的left、horizontal、right

(3)權(quán)重屬性

權(quán)重(weight)就是按比例來(lái)分配組件占用父組件的大小

• 演示1 : 2 : 1

學(xué)習(xí)探索：

嘗試3： 1 ： 2

2.依賴布局DependentLayout

時(shí)間：2021年7月20日12:29:50

• DependentLayout與DirectionalLayout相比，擁有更多的排布方式，每個(gè)組件可以指定相對(duì)于其他同級(jí)元素的位置，或者指定相對(duì)于父組件的位置。
• DependentLayout相當(dāng)于Android中的相對(duì)布局RelativeLayout

學(xué)習(xí)補(bǔ)充：

(from 開(kāi)發(fā)文檔)

DependentLayout所包含組件可支持的XML屬性表中需要注意的：

• left_of與start_of、end_of屬性有沖突，不建議一起使用。在“水平布局方向?yàn)閺淖蟮接?rdquo;時(shí)，left_of會(huì)與start_of屬性沖突;在“水平布局方向?yàn)閺挠业阶?rdquo;時(shí)，left_of會(huì)與end_of屬性沖突。
• 同時(shí)配置時(shí)，start_of、end_of優(yōu)先級(jí)高于left_of屬性。
• align_parent_left與align_parent_start、align_parent_end屬性有沖突，不建議一起使用。在“水平布局方向?yàn)閺淖蟮接?rdquo;時(shí)，align_parent_left會(huì)與align_parent_start屬性沖突;在“水平布局方向?yàn)閺挠业阶?rdquo;時(shí)，align_parent_left會(huì)與align_parent_end屬性沖突。
• 同時(shí)配置時(shí)，align_parent_start、align_parent_end優(yōu)先級(jí)高于align_parent_left屬性。

學(xué)習(xí)體驗(yàn)：

書(shū)本示例代碼==沒(méi)有代碼格式化==，導(dǎo)致敲代碼的時(shí)候，需要不停的找。這一點(diǎn)的感覺(jué)不是很好。

• 示例3-8

學(xué)習(xí)拓展：

• Text屬性italic，文本是否斜體字體，ohos:italic=“true”、ohos:italic=“$boolean:true”。
• text_front

書(shū)中的：似乎感覺(jué)是錯(cuò)的。等調(diào)試康康。

ohos:text_font="serif" 

果不其然代碼出現(xiàn)了問(wèn)題，

其一，關(guān)于text_front的用法出現(xiàn)了問(wèn)題

其二，按照示例代碼敲的效果圖如下：

其原因經(jīng)過(guò)調(diào)試發(fā)現(xiàn)，各個(gè)組件默認(rèn)從左到右排列，所以Previous的按鈕在next的左邊，被截取了。把ohos:left_of=“id:button2"改為ohos:right_of="id:button2"改為ohos:righto​f="id:button2”，效果如下：

所以為了達(dá)到書(shū)上的效果，就需要把Next按鈕放在最右邊。

也就是在Next按鈕里加上與父組件的依賴關(guān)系。

ohos:align_parent_right="true" 

時(shí)間:2021年7月20日13:24:23

我突然發(fā)掘，書(shū)上是給了源碼的，，，嘖嘖嘖，，我去看看源碼

，，我一調(diào)試發(fā)現(xiàn)是對(duì)的，我懷疑我自己是不是敲錯(cuò)了。結(jié)果我結(jié)果檢查(無(wú)語(yǔ)子)和調(diào)試發(fā)現(xiàn)，源碼是改了的。如下(因?yàn)槔蠋煹脑创a我打了碼)：

跟我的處理方式是一樣的，證實(shí)了==三個(gè)觀點(diǎn)==：

• 書(shū)中和源碼中的ohos:text_font="serif"使用都不符合現(xiàn)在的開(kāi)發(fā)文檔
• 隨著版本迭代，書(shū)中的代碼的確有問(wèn)題(但老師給的源碼是修正了的)。這跟張榮超老師關(guān)于呼吸手表開(kāi)發(fā)一書(shū)中的代碼錯(cuò)誤是一樣的。需要讀者自行調(diào)試。
• 自己對(duì)于示例3-8的解決方法是正確的，調(diào)整子組件與父組件的關(guān)系即可。

3.表格布局TableLayout

時(shí)間：2021年7月20日13:43:16

學(xué)習(xí)補(bǔ)充:

學(xué)習(xí)體驗(yàn)：

非常抱歉的說(shuō)，3-9的示例代碼跟開(kāi)發(fā)文檔是一樣的，且開(kāi)發(fā)文檔的示例更豐富一些。

• TableLayout類似于Android的TableLayout。(嘖嘖，就是一樣的嘛)
• 通過(guò)設(shè)置行數(shù)和列數(shù)來(lái)控制表格內(nèi)組件的行和列
• 示例3-9

4.位置布局PositionLayout

時(shí)間：2021年7月20日13:46:58

學(xué)習(xí)體驗(yàn)：

此頁(yè)面原創(chuàng)，且其鴻蒙TV管理系統(tǒng)頁(yè)面貼近鴻蒙，適應(yīng)主題。

學(xué)習(xí)補(bǔ)充：

對(duì)于超過(guò)布局本身大小的組件，超出部分將不顯示。

PositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。

(0, 0)為左上角;當(dāng)向下或向右移動(dòng)時(shí)，坐標(biāo)值變大;允許組件之間互相重疊。

PositionLayout開(kāi)發(fā)文檔提供的案例

本示例演示了PositionLayout的一些特性，包括子組件位置的影響和超越屏幕大小后子組件的顯示規(guī)則。

• PositionLayout為絕對(duì)布局，該布局指定了子組件在其中的具體位置(X/Y坐標(biāo))
• 布局靈活性相對(duì)較差，在沒(méi)有絕對(duì)定位的情況下相比其他類型的布局更難以維護(hù)。
• 示例3-10，示例3-11

學(xué)習(xí)體驗(yàn)：

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

下面這行關(guān)于圖片src的引用就出現(xiàn)了報(bào)錯(cuò)。源碼和書(shū)中都有問(wèn)題。

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

學(xué)習(xí)總結(jié)：

‘.’ is not a valid resource name character

“.”不是有效的資源名稱字符

Validates resource references inside Harmony XML files

驗(yàn)證XML文件中的資源引用

所以解決方式是改成如下模樣：

ohos:image_src="$media:log" 

即可。

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

學(xué)習(xí)體驗(yàn)：

• 其一，書(shū)中并沒(méi)有提醒讀者關(guān)于config.json文件的修改，在代碼和效果圖直接呈現(xiàn)的溝壑需要讀者自行跨越。這里需要大家在config.json中把"deviceType"加上“tv”注意：這里tv不能是TV。

• 其二，書(shū)中和源碼中對(duì)于image組件下image_src的使用不規(guī)范(書(shū)中和源碼中是：ohos:image_src=“media: log.png")，應(yīng)該參照開(kāi)發(fā)文檔和DevEco的提示改成ohos:image_src="media:log.png")，應(yīng)該參照開(kāi)發(fā)文檔和DevEco的提示改成ohos:images​rc="media: log”。

5.堆疊布局StackLayout

時(shí)間：2021年7月20日14:42:27

注：

很遺憾，這一塊也還是開(kāi)發(fā)文檔的示例。

學(xué)習(xí)補(bǔ)充：

• StackLayout直接在屏幕上開(kāi)辟出一片空白的區(qū)域，添加到這個(gè)布局中的視圖都是以層疊的方式顯示。
• 默認(rèn)放到左上角，第一個(gè)添加到布局中的視圖顯示在最底層，上一層的視圖會(huì)覆蓋下一層的視圖。
• StackLayout相當(dāng)于Android 中的幀布局FrameLayout
• 示例3-13

• 3-14(源代碼沒(méi)有-但這里的代碼量很少)

使用layout_alignment屬性可以指定組件在StackLayout中的相對(duì)位置(這兒是把Button添加到StackLayout的右邊)

• 3-15將子視圖從后面移到前面(同樣源代碼里么有)

3-15完全不知道寫(xiě)在那里。源代碼里也沒(méi)有找到。其實(shí)應(yīng)該在mainability中去設(shè)置setClickedListener。

6.自適應(yīng)布局AdaptiveBoxLayout

時(shí)間：2021年7月20日15:39:58

學(xué)習(xí)補(bǔ)充：

自適應(yīng)組件的開(kāi)發(fā)文檔

自適應(yīng)布局的常用方法

AdaptiveBoxLayout意為自適應(yīng)盒模式布局，是將整個(gè)UI劃分為相同寬度，但高度可能不同的行和列的盒子。

• 盒子寬度取決于布局的寬度和盒子數(shù)量
• 每個(gè)盒子的高度由其子組件的高度決定
• 子組件的排列只有在前一行被填滿后才會(huì)開(kāi)始在新一行中占位
• 每一行的高度由該行最高盒子決定
• 布局的寬度只有MATCH_PARENT或固定值
• 可以為布局黨的組件設(shè)置長(zhǎng)度、寬度和對(duì)其方式

示例3-16,3-17(源代碼里無(wú))

哥們兒稀碎!源代碼沒(méi)有ability_eight的代碼，三頁(yè)半的代碼!我的天。

敲了一半不服氣，去看了源代碼!發(fā)現(xiàn)源代碼的ability_five就是ability_eight

!!!破案了。

學(xué)習(xí)思考：

同樣的問(wèn)題

ohos:image_src="$media:icon_more" 

 

小總結(jié)

學(xué)習(xí)《鴻蒙操作系統(tǒng)開(kāi)發(fā)入門(mén)經(jīng)典-徐禮文》已經(jīng)到89/477頁(yè)了,第三章的內(nèi)容也學(xué)了一半。做一個(gè)總結(jié)。

• 其中關(guān)于有一些鴻蒙特有的概念解釋還是有一些遺漏。(富設(shè)備、IoT設(shè)備)
• 本書(shū)作者對(duì)開(kāi)發(fā)過(guò)程的一些描述有自己的看法(page和slice的關(guān)系-畫(huà)板畫(huà)布)
• 本書(shū)在示例代碼和源代碼方面有一些問(wèn)題

1.關(guān)于示例代碼在哪個(gè)文件下有些示例并未說(shuō)明

2.示例代碼與開(kāi)發(fā)文檔給的示例代碼有重疊，給讀者體驗(yàn)下降。(3-4、3-5、3-6、3-9、3-13、3-14、3-15)

3.源代碼的ability_five就是ability_eight。名稱不一樣，會(huì)給讀者帶來(lái)困擾。

4.在3-10、3-11、3-12的鴻蒙TV絕對(duì)布局的例子中，書(shū)中并沒(méi)有提醒讀者關(guān)于config.json文件的修改，需要讀者自行去跨越代碼到效果圖的溝壑。

5.書(shū)中和源碼中的ohos:text_font="serif"使用都不符合現(xiàn)在的開(kāi)發(fā)文檔

6.書(shū)中和源碼中對(duì)于image組件下image_src的使用不規(guī)范(書(shū)中和源碼中是：ohos:image_src=“media: log.png")，應(yīng)該參照開(kāi)發(fā)文檔和DevEco的提示改成ohos:image_src="media:log.png")，應(yīng)該參照開(kāi)發(fā)文檔和DevEco的提示改成ohos:images​rc="media: log”

7.著版本迭代，書(shū)中的代碼的確有問(wèn)題(但老師給的源碼是修正了的)，3-8表格布局中，這一行代碼的缺失，ohos:align_parent_right=“true”

雖然問(wèn)題還是有，但方法總比困難多，加上今天老師回帖，之后有視頻上線，也會(huì)有新的案例。

寫(xiě)筆記的初衷還是給自己的一個(gè)輸出過(guò)程，也是一種學(xué)習(xí)反饋和激勵(lì)。當(dāng)然也希望通過(guò)自己的筆記，幫助其他讀者在學(xué)習(xí)中解決遇見(jiàn)的疑惑!

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com