[[413470]]

想了解更多內(nèi)容，請?jiān)L問：

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

https://harmonyos.51cto.com

本文引言

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

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

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

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

第3章 鴻蒙 ACE Java 應(yīng)用架構(gòu)(2)

3.6 ACE Java UI 基礎(chǔ)組件

3.6.1 組件與組件容器

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

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

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

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

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

學(xué)習(xí)補(bǔ)充：

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

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

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

3.6.2 文本組件 Text

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

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

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

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

3.6.3 按鈕組件 Button

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

學(xué)習(xí)補(bǔ)充：

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

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

SVG轉(zhuǎn)XML

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

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

學(xué)習(xí)拓展：

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

效果如下：

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

以mainability為例子分析代碼和幾者的關(guān)系：

Textslice.xml的分析

3.6.4 文本輸入框組件 TextField

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

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

繼承自Text組件

學(xué)習(xí)補(bǔ)充：

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

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

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

3個文本框

• 第一個填手機(jī)號或郵箱信息
• 第二個用來填寫密碼
• 第三個填寫短信驗(yàn)證碼

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

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

3.6.5 圖片組件Image

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

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

圖片縮放類型

書中案例演練plus

重點(diǎn)：

在config.json中添加網(wǎng)絡(luò)權(quán)限

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

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

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

3.6.6 TabList和Tab組件

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

學(xué)習(xí)補(bǔ)充：

• Tablist私有屬性著重關(guān)注：
• tab_indicator_type
• orientation
• 設(shè)置fixedMode

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

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

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

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

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

學(xué)習(xí)思考：

其中的API的理解：

tabList.selectTabAt()

tabList.getSelectedTab()

3.6.7 Picker組件

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

學(xué)習(xí)補(bǔ)充：

Picker私有屬性重要：

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

Picker組件提供了滑動選擇器，允許用戶從預(yù)定義范圍中進(jìn)行選擇

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

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

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

設(shè)置要顯示的字符串?dāng)?shù)組

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

Java代碼中

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

DatePicker

• DataPicker繼承自StackLayout
• 使用DataPicker時，需要進(jìn)行聲明

import ohos.agp.components.DatePicker; 

響應(yīng)日期改變

• 在XML中添加Text顯示選擇日期
• 在Java代碼中響應(yīng)日期改變事件

• TimePicker
• 獲取時間，響應(yīng)事件

3.6.8 復(fù)選框組件CheckBox

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

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

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

• 需要用**private Set selectedSet = new HashSet<>();**保存選中的結(jié)果
• ComponentState.COMPONENT_STATE_CHECKED，ComponentState.COMPONENT_STATE_EMPTY，選中和取消的設(shè)置
• 設(shè)置選中狀態(tài)checkbox.setCheck(true)
• 關(guān)于初始化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(); 
   }); 

3.6.9 單選按鈕組件 RadioButton

時間：2021年7月22日13:11:38

RadioButton組件用于多選一操作，需要搭配RadioContainer使用

示例3-40 (xml實(shí)現(xiàn)單選)、3-41 (Java響應(yīng)事件)

• RadioButton組件需要被RadioContainer組件包裹
• 可以通過orientation來設(shè)置橫縱布局

小總結(jié)

筆者將ACE Java UI框架組件的學(xué)習(xí)分為兩貼，每一貼學(xué)習(xí)50%，本文是前50%。學(xué)習(xí)每個組件自己均在DevEco上演練、分析、總結(jié)過的。

《鴻蒙操作系統(tǒng)開發(fā)入門經(jīng)典》書中對于組件的講解跟開發(fā)文檔有很多雷同，但不影響學(xué)習(xí)。且其中創(chuàng)新部分，令人也有學(xué)習(xí)動力。

經(jīng)過這段時間的學(xué)習(xí)，對Ability-Page-XML三者關(guān)系、設(shè)置默認(rèn)路由、頁面生命周期、部分API、組件部分屬性、組件對應(yīng)響應(yīng)事件的掌握，都有了系統(tǒng)性的提升。

各個覺得需要重復(fù)練習(xí)的組件

• TextField
• TabList和Tab
• CheckBox和RadioButton-RadioContainer

想了解更多內(nèi)容，請?jiān)L問：

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

https://harmonyos.51cto.com