天干計(jì)劃（閼逢）-第四章Java UI設(shè)計(jì)與開發(fā)(4.1、4.2、4.4)

作者：HairtailofDai 2021-09-03 15:08:06

開發(fā) 后端

Java UI設(shè)計(jì)與開發(fā)這一章是高分值、高占比，且可以明顯感覺到，重點(diǎn)是Java UI框架。所以我把Java UI框架放在了天干計(jì)劃的開篇。

[[421532]]

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

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

https://harmonyos.51cto.com

一、天干計(jì)劃介紹

有所為：

打造構(gòu)建基于HCIA鴻蒙應(yīng)用開發(fā)認(rèn)證的學(xué)習(xí)路線、學(xué)習(xí)總結(jié)、學(xué)習(xí)經(jīng)驗(yàn)的系列分享。
收錄于《鴻蒙北向天干計(jì)劃》，以十干曰：閼逢、旃蒙、柔兆、強(qiáng)圉、著雍、屠維、上章、重光、玄黓、昭陽(yáng)。對(duì)應(yīng)HCIA-HarmonyOS Application Developer V1.0 認(rèn)證十大章節(jié)。
天干計(jì)劃，是我的HCIA學(xué)習(xí)認(rèn)證之路，也是各位開發(fā)者的HCIA學(xué)習(xí)認(rèn)證之鑒!

有所依：

主要參考：HCIA-HarmonyOS Application Developer V1.0 認(rèn)證考試大綱、學(xué)員用書、培訓(xùn)教材、實(shí)驗(yàn)手冊(cè)四部分文檔華為人才在線-HCIA-HarmonyOS Application Developer進(jìn)行解析。
其他參考：HarmonyOS開發(fā)文檔-鴻蒙官網(wǎng)、鴻蒙開源項(xiàng)目-Gitee。

有所旨：

與想要獲得HCIA-HarmonyOS Application Developer V1.0 認(rèn)證的開發(fā)者共同學(xué)習(xí)HarmonyOS，共同總結(jié)知識(shí)的難點(diǎn)與重點(diǎn)。
給準(zhǔn)備加入鴻蒙，學(xué)習(xí)鴻蒙，建設(shè)鴻蒙的開發(fā)者以基于認(rèn)證路線的學(xué)習(xí)思路與學(xué)習(xí)經(jīng)驗(yàn)。
扎根51CTOHarmony技術(shù)社區(qū)，幫助鴻蒙開發(fā)者生態(tài)建設(shè)，繁榮鴻蒙生態(tài)。
為中華之復(fù)興而讀書!為萬(wàn)物之互聯(lián)而編程!

二、第四章Java UI設(shè)計(jì)與開發(fā)總體把握

(一)綱領(lǐng)目張

考試大綱：第四章UI頁(yè)面設(shè)計(jì)與開發(fā)，筆試占比31%

Java UI開發(fā)
JS UI開發(fā)
UI 設(shè)計(jì)
多模輸入

培訓(xùn)教材(273頁(yè))：Java UI設(shè)計(jì)與開發(fā)(P118-P138);JS UI設(shè)計(jì)與開發(fā)(P139-P154);UI設(shè)計(jì)(P155-161);思考題與總結(jié)(p162-165)。總共占比約為17%。

學(xué)員用書(365頁(yè))：第四章Java UI設(shè)計(jì)與開發(fā)(P151-P276)，占比約34%;第五章JS UI設(shè)計(jì)與開發(fā)(P277-P301)，占比約為6%。四五兩章總頁(yè)面占比約為40%。

實(shí)驗(yàn)手冊(cè)(6個(gè)實(shí)驗(yàn))：第三個(gè)手機(jī)天氣預(yù)報(bào)界面設(shè)計(jì)，第四個(gè)手表天氣預(yù)報(bào)界面設(shè)計(jì)。第三個(gè)是Java UI設(shè)計(jì)與開發(fā)，第四個(gè)是JS UI設(shè)計(jì)與開發(fā)。

補(bǔ)充

(來(lái)源：官方文檔JS API參考)：多模輸入
(來(lái)源：官方文檔UI)：多模輸入

總結(jié)：

一句話：Java UI設(shè)計(jì)與開發(fā)這一章是高分值、高占比，且可以明顯感覺到，重點(diǎn)是Java UI框架。所以我把Java UI框架放在了天干計(jì)劃的開篇。
大綱四個(gè)大知識(shí)點(diǎn)，學(xué)員用書有Java UI開發(fā)與JS UI開發(fā)，培訓(xùn)教材有UI設(shè)計(jì)。多模輸入在補(bǔ)充那里就可以很好的學(xué)習(xí)。

(二)功成不遠(yuǎn)

第四章Java UI框架，有八個(gè)小節(jié)，我把八個(gè)小節(jié)分為三個(gè)部分。

伊始：4.1、4.2、4.4
核心：4.3、4.5
收尾：4.6、4.7、4.8

建議：

以學(xué)員用書為基礎(chǔ)學(xué)Java UI開發(fā)與JS UI開發(fā)
以培訓(xùn)教材為基礎(chǔ)學(xué)UI設(shè)計(jì)
以官方文檔為基礎(chǔ)學(xué)多模輸入
以實(shí)驗(yàn)手冊(cè)為基礎(chǔ)進(jìn)行知識(shí)串聯(lián)，代碼復(fù)現(xiàn)

三、4.1 Java UI 框架概述

四概念三描述兩圖表

四概念：

Component

中文描述：組件
概述：繪制可以交互的對(duì)象

ComponentContainer

中文描述：容器、布局
概述：可以容納組件和容器的容器

LayoutConfig

中文描述：布局配置
概述：每種布局提供，子組件使用，以設(shè)定布局的屬性和參數(shù)為目的

組件樹

概述：是一種布局，是把Component 和 ComponentContainer按樹狀結(jié)構(gòu)組織的布局。可以跟數(shù)據(jù)結(jié)構(gòu)中的樹狀結(jié)構(gòu)相結(jié)合去理解。
拿捏：(1)根節(jié)點(diǎn)唯一(2)層級(jí)結(jié)構(gòu)(3)子節(jié)點(diǎn)與父節(jié)點(diǎn)【不是結(jié)點(diǎn)與樹的前驅(qū)后驅(qū)概念相同】

三描述

用戶界面(即UI，User Interface)，用戶界面元素統(tǒng)稱為組件都是由 Component 和 ComponentContainer 對(duì)象構(gòu)成。

Component是界面中所有組件的基類，即ComponentContainer其實(shí)也是組件，布局類組件。

A special component that can contain other components (called child components).可以包含其他組件(稱為子組件)的特殊組件。

Java UI框架提供標(biāo)準(zhǔn)布局功能的容器，它們直接繼承自 ComponentContainer，間接繼承Component。布局容器一般以 Layout 結(jié)尾，但是有例外，有例外，有例外!

舉例：提供滑動(dòng)翻頁(yè)功能的PageSlider、提供內(nèi)容滾動(dòng)功能的ScrollView、提供翻轉(zhuǎn)效果的PageFlipper

兩圖表(易)

Component結(jié)構(gòu)圖
LayoutConfig圖

四、4.2 組件與布局開發(fā)指導(dǎo)

一接口兩方式三分類

一接口

setUIContent(ComponentContainer root)

接口描述：設(shè)置界面入口，root為界面組件樹根節(jié)點(diǎn)
背景知識(shí)：鴻蒙提供了Ability和AbilitySlice兩個(gè)基礎(chǔ)類,AbilitySlice承載單個(gè)頁(yè)面和邏輯實(shí)現(xiàn)的最小單位。而AbilitySlice通過(guò)此接口設(shè)置布局。
實(shí)際模樣：

兩方式(編寫布局的方式)

概述：

通過(guò)XML聲明布局
通過(guò)代碼創(chuàng)建布局

對(duì)比：

相同：加載后可修改
區(qū)別：XML聲明更便捷，代碼方式自定義自定義程度更高

示例：

三分類(組件按功能分類)

概述

布局類
顯示類
交互類

具體功能說(shuō)明及屬性設(shè)置詳見API參考。

五、4.4 組件通用 XML 屬性

概述：組件通用 XML 屬性即每個(gè)組件都可以使用的XML屬性，其中布局類組件(布局)也可以使用。

注意：

默認(rèn)尺寸的單位為px(大家需要把握f(shuō)p、px、vp)
string類型建議在string.json中設(shè)置

xml屬性分為

通用屬性
自有屬性
所包含子組件支持的屬性(對(duì)于布局類組件而言)

分類(完全的可以點(diǎn)鏈接看文檔,這里僅僅總結(jié)容易出問(wèn)題的)

基礎(chǔ)

屬性名稱：id(1)不是class
樣式：theme(1)類型是引用類型，引用pattern資源
透明度：alpha(1)區(qū)別與JS樣式opacity(2)取值0-1，0-1之外不報(bào)錯(cuò)(3)要在效果上與XML屬性visibility區(qū)分(4)就算透明度為0也要占用空間
可見性：visibility(1)在效果上與透明度alpha區(qū)分(2)visible、invisible、hide分別對(duì)應(yīng)可見，不可見但占用空間，不可見且不占空間
是否可點(diǎn)擊：clickable(1)設(shè)置點(diǎn)擊事件的先決條件
是否支持長(zhǎng)點(diǎn)擊：long_click_enabled(1)實(shí)現(xiàn)長(zhǎng)點(diǎn)擊功能的關(guān)鍵
背景圖層：background_element(1)注意Element類型的值可以設(shè)置為多種

間距(關(guān)于間距總體關(guān)注優(yōu)先級(jí)的問(wèn)題)

內(nèi)間距： padding
外邊距：margin
外邊距發(fā)生沖突時(shí)的優(yōu)先級(jí)：

內(nèi)間距發(fā)生沖突時(shí)的優(yōu)先級(jí)：

滾動(dòng)條(特色屬性)

厚度：scrollbar_thickness
起始角度：scrollbar_start_angle
掃描角度：scrollbar_sweep_angle(1)角度不同所以后面的組件中條形滾動(dòng)組件ProgressBar、與環(huán)形滾動(dòng)組件RoundProgressBar
漸隱(比較有意思的屬性)：scrollbar_fading_enabled、scrollbar_fading_delay、scrollbar_fading_duration(1)對(duì)應(yīng)是否漸隱、漸隱延遲、漸隱時(shí)間

旋轉(zhuǎn)縮放(這部分跟動(dòng)畫有關(guān))