Java UI框架概述
UI即使用在屏幕上顯示的用戶界面，該界面用來(lái)顯示所有可能被用戶查看和操作的內(nèi)容浪默。
在HarmonyOS應(yīng)用中所有的界面元素都是由Component和ComponentContainer對(duì)象構(gòu)成牡直。Component是繪制在界面中的對(duì)象，用戶可以與其進(jìn)行交互纳决。ComponentContainer使用戶容納其他Component和ComponentContainer對(duì)象的管理器碰逸。
Java UI框架提供了一部分Component和ComponentContainer的子類，即創(chuàng)建界面時(shí)所用到的各種組件（文本岳链、按鈕花竞、圖片、列表掸哑、選擇约急、提示等）和布局（DirectionalLayout，DependentLayout苗分，StackLayout厌蔽，TableLayout等）。用戶可以對(duì)其進(jìn)行交互操作并取得響應(yīng)摔癣。
所有的UI操作都應(yīng)在主線程中進(jìn)行設(shè)置
組件和布局的關(guān)系
用戶界面中的元素統(tǒng)稱為組件奴饮，組件與組件間通過(guò)層級(jí)結(jié)構(gòu)進(jìn)行組合形成了布局纬向。組件只有被添加到布局中才能進(jìn)行交互，因此一個(gè)用戶界面至少有一個(gè)布局戴卜。一個(gè)完整的用戶界面是一個(gè)布局逾条，在用戶界面中某一個(gè)部分也可作為一個(gè)布局，布局中容納了Component和ComponentContainer對(duì)象投剥。
Component和ComponentContainer
- Component：提供內(nèi)容的顯示师脂，是所有基礎(chǔ)類組件的基類，開(kāi)發(fā)者可以對(duì)Component設(shè)置事件的回調(diào)來(lái)處理一個(gè)可交互的組件江锨。
-
ComponentContainer：作為容器容納Component或ComponentContainer對(duì)象吃警，并對(duì)它們進(jìn)行布局。Java UI框架提供了一些標(biāo)準(zhǔn)布局功能的容器啄育，它們繼承自ComponentContainer酌心。
圖1 示意圖
在這里插入圖片描述
LayoutConfig
每種布局都根據(jù)自身特點(diǎn)提供LayoutConfig供子Component設(shè)定布局屬性和參數(shù)，通過(guò)指定布局屬性可以對(duì)子Component在布局中的顯示效果進(jìn)行約束挑豌。如：“width”安券、“height”是布局最基本的屬性，他們指定了組件的大小氓英。
圖2 LayoutConfig
組件樹(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ī)則約束盛龄。
組件與布局開(kāi)發(fā)
HarmonyOS提供了Ability和AbilitySlice兩個(gè)基礎(chǔ)類饰迹，一個(gè)有界面的Ability可以由一個(gè)或多個(gè)AbilitySlice構(gòu)成，AbilitySlice主要用于承載單個(gè)頁(yè)面的具體邏輯實(shí)現(xiàn)和界面UI余舶，是應(yīng)用顯示啊鸭、運(yùn)行和跳轉(zhuǎn)的最小單元。AbilitySlice通過(guò)setUIContent為界面設(shè)置布局匿值。
組件需要進(jìn)行組合赠制，并添加到界面的布局中。在Java UI框架中挟憔，提供了兩種編寫(xiě)布局的方式：
- 在代碼中創(chuàng)建布局：用代碼創(chuàng)建Component和ComponentContainer對(duì)象钟些，為這些對(duì)象設(shè)置合適的布局參數(shù)和屬性值，并將Component添加到ComponentContainer中绊谭，從而創(chuàng)建出完整界面政恍。
- 在XML中聲明UI布局：按層級(jí)結(jié)構(gòu)來(lái)描述Component和ComponentContainer的關(guān)系，給組件節(jié)點(diǎn)設(shè)定合適的布局參數(shù)和屬性值达传，代碼中可直接加載生成此布局篙耗。
這兩種方式創(chuàng)建出的布局沒(méi)有本質(zhì)差別迫筑，在XML中聲明布局，在加載后同樣可在代碼中對(duì)該布局進(jìn)行修改宗弯。
組件分類
根據(jù)組件的功能脯燃，可以將組件分為布局類、顯示類蒙保、交互類三類：
布局類
名稱：PositionLayout辕棚、DirectionalLayout、StackLayout追他、DependentLayout坟募、TableLayout、AdaptiveBoxLayout
功能描述：提供了不同布局規(guī)范的組件容器邑狸，例如以單一方向排列的DirectionalLayout懈糯、以相對(duì)位置排列的DependentLayout、以確切位置排列的PositionLayout等单雾。
顯示類
名稱：Text赚哗、Image、Clock硅堆、TickTimer屿储、ProgressBar
功能描述：提供了單純的內(nèi)容顯示，例如用于文本顯示的Text渐逃，用于圖像顯示的Image等够掠。
交互類
名稱：TextField、Button茄菊、Checkbox疯潭、RadioButton/RadioContainer、Switch面殖、ToggleButton竖哩、Slider、Rating脊僚、ScrollView相叁、TabList、ListContainer辽幌、PageSlider增淹、PageFlipper、PageSliderIndicator舶衬、Picker埠通、TimePicker、DatePicker逛犹、SurfaceProvider端辱、ComponentProvider
功能描述：提供了具體場(chǎng)景下與用戶交互響應(yīng)的功能梁剔，例如Button提供了點(diǎn)擊響應(yīng)功能，Slider提供了進(jìn)度選擇功能等舞蔽。
以上組件與布局會(huì)在后續(xù)的文章中進(jìn)行一一講解荣病，從屬性、功能渗柿、使用三個(gè)方面進(jìn)行演示說(shuō)明个盆。
XML創(chuàng)建布局
請(qǐng)?zhí)D(zhuǎn)至HarmonyOS學(xué)習(xí)路之開(kāi)發(fā)基礎(chǔ)——快速入門(mén)(編寫(xiě)第一個(gè)頁(yè)面)
代碼創(chuàng)建布局
請(qǐng)?zhí)D(zhuǎn)至HarmonyOS學(xué)習(xí)路之開(kāi)發(fā)基礎(chǔ)——快速入門(mén)(創(chuàng)建另一個(gè)頁(yè)面)
