HarmonyOS《鴻蒙操作系統(tǒng)開發(fā)入門經(jīng)典》之前九類UI組件

作者：HairtailofDai 2021-07-27 11:39:40

開發(fā) OpenHarmony

本文亮點：Component示例全面解析(開源代碼)、GIF動圖展示、開發(fā)文檔中文檔和示例代碼的補充學習、ACE Java UI組件中的部分組件(50%)。

[[413470]]

想了解更多內(nèi)容，請訪問：

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

https://harmonyos.51cto.com

本文引言

時間：2021年7月21日13:21:30

本文亮點：Component示例全面解析(開源代碼)、GIF動圖展示、開發(fā)文檔中文檔和示例代碼的補充學習、ACE Java UI組件中的部分組件(50%)

本文包含筆者對徐文禮老師的《鴻蒙操作系統(tǒng)開發(fā)入門經(jīng)典》的學習過程中的筆記總結、拓展思考、案例反饋、閱讀體驗。

為尊重老師的知識產(chǎn)權和精簡本文，本文不會粘貼代碼、倒置案例、機械打字。

第3章鴻蒙 ACE Java 應用架構(2)

3.6 ACE Java UI 基礎組件

3.6.1 組件與組件容器

時間：2021年7月21日13:25:12

用戶界面元素統(tǒng)稱為組件，組件根據(jù)一定的層級結構進行組合形成布局。組件在未被添加到布局中時，既無法顯示也無法交互，因此一個用戶界面至少包含一個布局。在UI框架中，具體的布局類通常以XXLayout命名，完整的用戶界面是一個布局，用戶界面中的一部分也可以是一個布局。布局中容納Component與ComponentContainer對象。

應用的Ability在屏幕上將顯示一個用戶界面，該界面用來顯示所有可被用戶查看和交互的內(nèi)容。

應用中所有的用戶界面元素都是由Component和ComponentContainer對象構成。Component是繪制在屏幕上的一個對象，用戶能與之交互。ComponentContainer是一個用于容納其他Component和ComponentContainer對象的容器。

Component：提供內(nèi)容顯示，是界面中所有組件的基類，開發(fā)者可以給Component設置事件處理回調(diào)來創(chuàng)建一個可交互的組件。Java UI框架提供了一些常用的界面元素，也可稱之為組件，組件一般直接繼承Component或它的子類，如Text、Image等。
ComponentContainer：作為容器容納Component或ComponentContainer對象，并對它們進行布局。Java UI框架提供了一些標準布局功能的容器，它們繼承自ComponentContainer。

學習補充：

開發(fā)文檔給的兩個示例。CommonLayout、Components

下面是自己在本機上跑出來的演示：

示例3-18(為組件添加對應的布局屬性)很簡單就沒敲了。

3.6.2 文本組件 Text

時間：2021年7月21日14:41:37

Text是用來顯示字符串的組件，在界面上顯示為一塊文本區(qū)域(有很多拓展)
Text組件繼承自Component類
Text組件可以通過background_element設置背景(背景放在graphic下)
3-19 (文本背景xml)、 3-20 (文本對齊方式xml)、 3-21(換行和最大顯示行數(shù)xml) 、3-22 (設置自動換行、最大行數(shù)、自動調(diào)節(jié)字體大小xml)、3-23 (自動調(diào)整規(guī)則java)、3-24(跑馬燈效果xml) 、3-25(跑馬燈java)

示例從文件類型上分為兩類：xml、java

示例從功能效果上分為三類：基礎、自動、跑馬燈

3.6.3 按鈕組件 Button

Button是一種常見的組件，單擊可以觸發(fā)相應的操作，通常由文本或圖標組成，也可以由圖標和文本共同組成。
是一種特殊的Text組件
按照按鈕的形狀可以分為：普通、橢圓、膠囊、圓形

學習補充：

Button無自有的XML屬性，共有XML屬性繼承自Text

3-26 (創(chuàng)建按鈕的xml)-就是很簡單的創(chuàng)建一個xml
3-27 (自定義按鈕的形狀)這里有一個很重要的知識點就是==以圖片為按鈕==

SVG轉XML

選擇需要導入的svg文件，DevEco會自動把SVG文件導出為xml

通過element_XXX調(diào)整圖片相對于文字的位置

學習拓展：

因為3.62和3.63其中所要講解的**Component示例(開源代碼)(代碼來自開發(fā)文檔開發(fā)文檔)**中都有所以現(xiàn)在對Component.entry做一個全方位解析：

效果如下：

工程文件目錄的呈現(xiàn)和介紹：

以mainability為例子分析代碼和幾者的關系：

Textslice.xml的分析

3.6.4 文本輸入框組件 TextField

時間：2021年7月21日16:34:14

TextField文本輸入框組件用來接收用戶的輸入

繼承自Text組件

學習補充：

示例3-28 (TextField的基本用法)

設置光標自定義氣泡Bubble
舉了一個矩形的自定義氣泡(shape=“rectangle”)
內(nèi)邊距、輸入類型、多行顯示(multiple_lines)
控制文本框是否可用(Enable-當為false時無法在文本框輸入)

示例3-29 、3-30 、3-31 、3-32四個示例做了一個網(wǎng)頁登錄頁面(原創(chuàng)大贊)

3個文本框

第一個填手機號或郵箱信息
第二個用來填寫密碼
第三個填寫短信驗證碼

時間：2021年7月22日09:35:15

源代碼找不到，只有手敲!累累累

3.6.5 圖片組件Image

本地圖片一般放在resource目錄下的media文件下面

alpha透明度(HCIA模擬試題有考)

圖片縮放類型

書中案例演練plus

重點：

在config.json中添加網(wǎng)絡權限

配置網(wǎng)絡文明訪問白名單

在XML布局文件中添加Image組件，然后通過ID設置網(wǎng)絡的圖片

需要定義一個加載圖片的方法(loadNetImageURL-try-catch)
需要在onStart方法中開啟新的線程

3.6.6 TabList和Tab組件

時間：2021年7月22日09:57:39

學習補充：

Tablist私有屬性著重關注：
tab_indicator_type
orientation
設置fixedMode

默認為false，該模式下TabList的總寬度是各Tab寬度的總和，若固定了TabList的寬度，當超出可視區(qū)域，則可以通過滑動TabList來顯示。如果設置為true，TabList的總寬度將與可視區(qū)域相同，各個Tab的寬度也會根據(jù)TabList的寬度而平均分配，該模式適用于Tab較少的情況。

TabList可以實現(xiàn)多個頁簽欄的切換，Tab為某個標簽。子頁簽通常放在內(nèi)容區(qū)上方，用于展示不同分類。
TabList常用接口：

示例3-33(創(chuàng)建TabList組件) 、3-34 (設置默認狀態(tài)和顏色)、3-35(頁面效果)、

示例3-36(TabList代碼實現(xiàn))

定義Tab數(shù)組
通過循環(huán)Tab組件的數(shù)組為TabList添加Tab組件
監(jiān)聽TabList的選中事件，在某個Tab組件被選中的時候觸發(fā)onSelected事件

學習思考：

其中的API的理解：

tabList.selectTabAt()

tabList.getSelectedTab()

3.6.7 Picker組件

時間：2021年7月22日10:47:11

學習補充：

Picker私有屬性重要：

value(當前值)max_value(最大值)min_value(最小值)
selected_normal_text_margin_ratio(比例)
wheel_mode_enabled(是否循環(huán)數(shù)據(jù))

Picker組件提供了滑動選擇器，允許用戶從預定義范圍中進行選擇

取值范圍
響應選擇器變化
設置字符串與數(shù)字一一對應
DataPicker主要提供用戶選擇日期
TimePicker主要選擇用戶選擇時間

picker的簡單應用(開發(fā)文檔)

picker.setFormatter(Formatter formatter)方法，修改為特定格式

設置要顯示的字符串數(shù)組

對于不直接顯示數(shù)字的組件，該方法可以設置字符串與數(shù)字一一對應。字符串數(shù)組長度必須等于取值范圍內(nèi)的值總數(shù)。用戶在使用時需要注意，該方法會覆蓋picker.setFormatter(Formatter formatter)方法。

Java代碼中

picker.setDisplayedData(new String[]{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"});

DatePicker

DataPicker繼承自StackLayout
使用DataPicker時，需要進行聲明

import ohos.agp.components.DatePicker;

響應日期改變

在XML中添加Text顯示選擇日期
在Java代碼中響應日期改變事件

TimePicker
獲取時間，響應事件

3.6.8 復選框組件CheckBox

時間：2021年7月22日11:57:55

CheckBox可以實現(xiàn)選中和取消選中功能

示例3-37 (選中和取消選中)、3-38 (頁面效果)、3-39(事件監(jiān)聽)

需要用**private Set selectedSet = new HashSet<>();**保存選中的結果
ComponentState.COMPONENT_STATE_CHECKED，ComponentState.COMPONENT_STATE_EMPTY，選中和取消的設置
設置選中狀態(tài)checkbox.setCheck(true)
關于初始化CheckBox的范式需要記住(范式代碼來自開發(fā)文檔開發(fā)文檔)

Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3); 
   checkbox3.setButtonElement(elementButtonInit()); 
   checkbox3.setCheckedStateChangedListener((component, state) -> { 
       if (state) { 
           selectedSet.add("C"); 
       } else { 
           selectedSet.remove("C"); 
       } 
       showAnswer(); 
   });