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