天干計劃（閼逢）-第四章Java UI設(shè)計與開發(fā)(4.1、4.2、4.4)
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
一、天干計劃介紹
有所為：
- 打造構(gòu)建基于HCIA鴻蒙應(yīng)用開發(fā)認證的學(xué)習(xí)路線、學(xué)習(xí)總結(jié)、學(xué)習(xí)經(jīng)驗的系列分享。
- 收錄于《鴻蒙北向天干計劃》，以十干曰：閼逢、旃蒙、柔兆、強圉、著雍、屠維、上章、重光、玄黓、昭陽。對應(yīng)HCIA-HarmonyOS Application Developer V1.0 認證十大章節(jié)。
- 天干計劃，是我的HCIA學(xué)習(xí)認證之路，也是各位開發(fā)者的HCIA學(xué)習(xí)認證之鑒!
有所依：
- 主要參考：HCIA-HarmonyOS Application Developer V1.0 認證考試大綱、學(xué)員用書、培訓(xùn)教材、實驗手冊四部分文檔華為人才在線-HCIA-HarmonyOS Application Developer進行解析。
- 其他參考：HarmonyOS開發(fā)文檔-鴻蒙官網(wǎng)、鴻蒙開源項目-Gitee。
有所旨：
- 與想要獲得HCIA-HarmonyOS Application Developer V1.0 認證的開發(fā)者共同學(xué)習(xí)HarmonyOS，共同總結(jié)知識的難點與重點。
- 給準(zhǔn)備加入鴻蒙，學(xué)習(xí)鴻蒙，建設(shè)鴻蒙的開發(fā)者以基于認證路線的學(xué)習(xí)思路與學(xué)習(xí)經(jīng)驗。
- 扎根51CTOHarmony技術(shù)社區(qū)，幫助鴻蒙開發(fā)者生態(tài)建設(shè)，繁榮鴻蒙生態(tài)。
- 為中華之復(fù)興而讀書!為萬物之互聯(lián)而編程!
二、第四章Java UI設(shè)計與開發(fā)總體把握
(一)綱領(lǐng)目張
考試大綱：第四章UI頁面設(shè)計與開發(fā)，筆試占比31%
- Java UI開發(fā)
- JS UI開發(fā)
- UI 設(shè)計
- 多模輸入
培訓(xùn)教材(273頁)：Java UI設(shè)計與開發(fā)(P118-P138);JS UI設(shè)計與開發(fā)(P139-P154);UI設(shè)計(P155-161);思考題與總結(jié)(p162-165)?？偣舱急燃s為17%。
學(xué)員用書(365頁)：第四章Java UI設(shè)計與開發(fā)(P151-P276)，占比約34%;第五章JS UI設(shè)計與開發(fā)(P277-P301)，占比約為6%。四五兩章總頁面占比約為40%。
實驗手冊(6個實驗)：第三個手機天氣預(yù)報界面設(shè)計，第四個手表天氣預(yù)報界面設(shè)計。第三個是Java UI設(shè)計與開發(fā)，第四個是JS UI設(shè)計與開發(fā)。
補充
總結(jié)：
- 一句話：Java UI設(shè)計與開發(fā)這一章是高分值、高占比，且可以明顯感覺到，重點是Java UI框架。所以我把Java UI框架放在了天干計劃的開篇。
- 大綱四個大知識點，學(xué)員用書有Java UI開發(fā)與JS UI開發(fā)，培訓(xùn)教材有UI設(shè)計。多模輸入在補充那里就可以很好的學(xué)習(xí)。
(二)功成不遠
第四章Java UI框架，有八個小節(jié)，我把八個小節(jié)分為三個部分。
- 伊始：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è)計
- 以官方文檔為基礎(chǔ)學(xué)多模輸入
- 以實驗手冊為基礎(chǔ)進行知識串聯(lián)，代碼復(fù)現(xiàn)
三、4.1 Java UI 框架概述
四概念三描述兩圖表
四概念：
Component
- 中文描述：組件
- 概述：繪制可以交互的對象
ComponentContainer
- 中文描述：容器、布局
- 概述：可以容納組件和容器的容器
LayoutConfig
- 中文描述：布局配置
- 概述：每種布局提供，子組件使用，以設(shè)定布局的屬性和參數(shù)為目的
組件樹
- 概述：是一種布局，是把Component 和 ComponentContainer按樹狀結(jié)構(gòu)組織的布局?？梢愿鷶?shù)據(jù)結(jié)構(gòu)中的樹狀結(jié)構(gòu)相結(jié)合去理解。
- 拿捏：(1)根節(jié)點唯一(2)層級結(jié)構(gòu)(3)子節(jié)點與父節(jié)點【不是結(jié)點與樹的前驅(qū)后驅(qū)概念相同】
三描述
用戶界面(即UI，User Interface)，用戶界面元素統(tǒng)稱為組件都是由 Component 和 ComponentContainer 對象構(gòu)成。
Component是界面中所有組件的基類，即ComponentContainer其實也是組件，布局類組件。
A special component that can contain other components (called child components).可以包含其他組件(稱為子組件)的特殊組件。
Java UI框架提供標(biāo)準(zhǔn)布局功能的容器，它們直接繼承自 ComponentContainer，間接繼承Component。布局容器一般以 Layout 結(jié)尾，但是有例外，有例外，有例外!
舉例：提供滑動翻頁功能的PageSlider、提供內(nèi)容滾動功能的ScrollView、提供翻轉(zhuǎn)效果的PageFlipper
兩圖表(易)
- Component結(jié)構(gòu)圖
- LayoutConfig圖
四、4.2 組件與布局開發(fā)指導(dǎo)
一接口兩方式三分類
一接口
setUIContent(ComponentContainer root)
- 接口描述：設(shè)置界面入口，root為界面組件樹根節(jié)點
- 背景知識：鴻蒙提供了Ability和AbilitySlice兩個基礎(chǔ)類,AbilitySlice承載單個頁面和邏輯實現(xiàn)的最小單位。而AbilitySlice通過此接口設(shè)置布局。
- 實際模樣：
兩方式(編寫布局的方式)
概述：
- 通過XML聲明布局
- 通過代碼創(chuàng)建布局
對比：
- 相同：加載后可修改
- 區(qū)別：XML聲明更便捷，代碼方式自定義自定義程度更高
示例：
三分類(組件按功能分類)
概述
- 布局類
- 顯示類
- 交互類
具體功能說明及屬性設(shè)置詳見API參考。
五、4.4 組件通用 XML 屬性
概述：組件通用 XML 屬性即每個組件都可以使用的XML屬性，其中布局類組件(布局)也可以使用。
注意：
- 默認尺寸的單位為px(大家需要把握fp、px、vp)
- string類型建議在string.json中設(shè)置
xml屬性分為
- 通用屬性
- 自有屬性
- 所包含子組件支持的屬性(對于布局類組件而言)
分類(完全的可以點鏈接看文檔,這里僅僅總結(jié)容易出問題的)
基礎(chǔ)
- 屬性名稱：id(1)不是class
- 樣式：theme(1)類型是引用類型，引用pattern資源
- 透明度：alpha(1)區(qū)別與JS樣式opacity(2)取值0-1，0-1之外不報錯(3)要在效果上與XML屬性visibility區(qū)分(4)就算透明度為0也要占用空間
- 可見性：visibility(1)在效果上與透明度alpha區(qū)分(2)visible、invisible、hide分別對應(yīng)可見，不可見但占用空間，不可見且不占空間
- 是否可點擊：clickable(1)設(shè)置點擊事件的先決條件
- 是否支持長點擊：long_click_enabled(1)實現(xiàn)長點擊功能的關(guān)鍵
- 背景圖層：background_element(1)注意Element類型的值可以設(shè)置為多種
間距(關(guān)于間距總體關(guān)注優(yōu)先級的問題)
- 內(nèi)間距： padding
- 外邊距：margin
- 外邊距發(fā)生沖突時的優(yōu)先級：
內(nèi)間距發(fā)生沖突時的優(yōu)先級：
滾動條(特色屬性)
- 厚度：scrollbar_thickness
- 起始角度：scrollbar_start_angle
- 掃描角度：scrollbar_sweep_angle(1)角度不同所以后面的組件中條形滾動組件ProgressBar、與環(huán)形滾動組件RoundProgressBar
- 漸隱(比較有意思的屬性)：scrollbar_fading_enabled、scrollbar_fading_delay、scrollbar_fading_duration(1)對應(yīng)是否漸隱、漸隱延遲、漸隱時間
旋轉(zhuǎn)縮放(這部分跟動畫有關(guān))
- 旋轉(zhuǎn)點X、Y：pivot_x、pivot_y
- X、Y方向的縮放級別：scale_x、scale_y
- X、Y方向移動的距離：translation_x、translation_y
獲焦(手勢、觸屏相關(guān))
- 是否可獲焦：focusable
- 觸摸狀態(tài)下：focusable_in_touch
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
