HarmonyOS學習路之開發篇—— Java UI框架(元件與佈局說明)

語言: CN / TW / HK

Java UI框架概述

UI即使用在螢幕上顯示的使用者介面,該介面用來顯示所有可能被使用者檢視和操作的內容。

在HarmonyOS應用中所有的介面元素都是由ComponentComponentContainer物件構成。Component是繪製在介面中的物件,使用者可以與其進行互動。ComponentContainer使使用者容納其他Component和ComponentContainer物件的管理器。

Java UI框架提供了一部分Component和ComponentContainer的子類,即建立介面時所用到的各種元件(文字、按鈕、圖片、列表、選擇、提示等)和佈局(DirectionalLayout,DependentLayout,StackLayout,TableLayout等)。使用者可以對其進行互動操作並取得響應。

所有的UI操作都應在主執行緒中進行設定

元件和佈局的關係

使用者介面中的元素統稱為元件,元件與元件間通過層級結構進行組合形成了佈局。元件只有被新增到佈局中才能進行互動,因此一個使用者介面至少有一個佈局。一個完整的使用者介面是一個佈局,在使用者介面中某一個部分也可作為一個佈局,佈局中容納了Component和ComponentContainer物件。

Component和ComponentContainer

  • Component:提供內容的顯示,是所有基礎類元件的基類,開發者可以對Component設定事件的回撥來處理一個可互動的元件。
  • ComponentContainer:作為容器容納Component或ComponentContainer物件,並對它們進行佈局。Java UI框架提供了一些標準佈局功能的容器,它們繼承自ComponentContainer。 圖1 示意圖 在這裡插入圖片描述

LayoutConfig

每種佈局都根據自身特點提供LayoutConfig供子Component設定佈局屬性和引數,通過指定佈局屬性可以對子Component在佈局中的顯示效果進行約束。如:“width”、“height”是佈局最基本的屬性,他們指定了元件的大小。 圖2 LayoutConfig 在這裡插入圖片描述

元件樹

佈局把Component和ComponentContainer以樹狀的層級結構進行組織,這樣的一個佈局就稱為元件樹。元件樹的特點是僅有一個根元件,其他元件有且僅有一個父節點,元件之間的關係受到父節點的規則約束。

元件與佈局開發

HarmonyOS提供了Ability和AbilitySlice兩個基礎類,一個有介面的Ability可以由一個或多個AbilitySlice構成,AbilitySlice主要用於承載單個頁面的具體邏輯實現和介面UI,是應用顯示、執行和跳轉的最小單元。AbilitySlice通過setUIContent為介面設定佈局。 在這裡插入圖片描述 元件需要進行組合,並新增到介面的佈局中。在Java UI框架中,提供了兩種編寫佈局的方式:

  • 在程式碼中建立佈局:用程式碼建立Component和ComponentContainer物件,為這些物件設定合適的佈局引數和屬性值,並將Component新增到ComponentContainer中,從而創建出完整介面。
  • 在XML中宣告UI佈局:按層級結構來描述Component和ComponentContainer的關係,給元件節點設定合適的佈局引數和屬性值,程式碼中可直接載入生成此佈局。

這兩種方式創建出的佈局沒有本質差別,在XML中宣告佈局,在載入後同樣可在程式碼中對該佈局進行修改。

元件分類

根據元件的功能,可以將元件分為佈局類、顯示類、互動類三類: 佈局類 名稱:PositionLayout、DirectionalLayout、StackLayout、DependentLayout、TableLayout、AdaptiveBoxLayout 功能描述:提供了不同佈局規範的元件容器,例如以單一方向排列的DirectionalLayout、以相對位置排列的DependentLayout、以確切位置排列的PositionLayout等。 顯示類 名稱:Text、Image、Clock、TickTimer、ProgressBar 功能描述:提供了單純的內容顯示,例如用於文字顯示的Text,用於影象顯示的Image等。 互動類 名稱:TextField、Button、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider 功能描述:提供了具體場景下與使用者互動響應的功能,例如Button提供了點選響應功能,Slider提供了進度選擇功能等。

以上元件與佈局會在後續的文章中進行一一講解,從屬性、功能、使用三個方面進行演示說明。

XML建立佈局

請跳轉至HarmonyOS學習路之開發基礎——快速入門(編寫第一個頁面)

程式碼建立佈局

請跳轉至HarmonyOS學習路之開發基礎——快速入門(建立另一個頁面)