HarmonyOS 基礎之 UI組件（二）

作者：陳潘 2021-10-14 15:14:36

HarmonyOS的 UI 常見組件分為顯示類和交互類。顯示類負責文本圖像顯示，交互類負責交互響應功能。組件的具體使用場景，需要根據業務需求來選擇使用。

[[428927]]

想了解更多內容，請訪問：

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

https://harmonyos.51cto.com

概述

上一篇【HarmonyOS 基礎之 UI 布局(一)】我們一起學習了HarmonyOS的常用 UI 布局和一些基礎屬性，一個界面除了UI布局，組件也是非常重要的組成部分。HarmonyOS的 UI 常見組件分為顯示類和交互類。顯示類負責文本圖像顯示，交互類負責交互響應功能。組件的具體使用場景，需要根據業務需求來選擇使用。今天這篇文章我將跟大家分享一下常見組件的使用場景和特性。

常見組件

根據組件的功能，可以將組件分為顯示類、交互類：

1. Text

Text是用來顯示字符串的組件，在界面上顯示為一塊文本區域。

在layout目錄下的xml文件中創建Text。

<Text 
    ohos:id="$+id:text" 
    ohos:width="match_content" 
    ohos:height="match_content" 
    ohos:text="Text" 
    />

可以根據不同需要，給Text添加各種屬性值。常用的背景如常見的文本背景、按鈕背景，可以采用XML格式放置在graphic目錄下。如：創建“background_text.xml”，在“background_text.xml”中定義文本的背景。

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    //背景形狀，oval橢圓，rectangle方形... 
    ohos:shape="rectangle">   
    <corners 
        //背景圓角程度 
        ohos:radius="20"/>  
    <solid 
        //背景顏色 
        ohos:color="#878787"/> 
</shape>

2. Image

Image 是用來顯示圖片的組件。

2.1 創建 Image

在 src -> main -> resources -> base -> media，添加一個圖片至media文件夾下，既可以在XML中創建 Image，也可以在代碼中創建 Image。

<Image 
    ohos:id="$+id:image" 
    ohos:width="match_content" 
    ohos:height="match_content" 
    ohos:layout_alignment="center" 
    ohos:image_src="$media:plant" 
    //設置透明度 
    ohos:alpha="0.5" 
/>

Image image = new Image(getContext()); 
image.setPixelMap(ResourceTable.Media_plant);

2.2 縮放 Image

ohos:image_src="$media:plant" 
 //設置縮放方式 
 ohos:scale_mode="zoom_center" 
 //設置縮放系數 
 ohos:scale_x="0.5" 
 ohos:scale_y="0.5"

2.3 裁剪 Image

當 Image 尺寸小于圖片尺寸時，可以對圖片進行裁剪，仍以 Image 的寬高為 200 vp 為例，小于圖片尺寸。以左對齊裁剪為例，設置 clip_alignment = “256”。

3. ProgressBar

ProgressBar 用于顯示內容或操作的進度。

<ProgressBar 
    ohos:progress_width="10vp" 
    ohos:height="80vp" 
    ohos:width="280vp" 
    //設置進度條方向為水平，（ vertical 為水平） 
    ohos:orientation="horizontal" 
    //設置最大值最小值 
    ohos:max="100" 
    ohos:min="0" 
    //設置當前進度  
    ohos:progress="60" 
    //設置進度條顏色 
    ohos:progress_element="#FF9900" 
    //設置進度條組件底色 
    ohos:background_instruct_element="#F23456" 
    //設置分割線 
    ohos:divider_lines_enabled="true" 
    ohos:divider_lines_number="5" 
    //設置提示文字以及提示文字顏色 
    ohos:progress_hint_text="60%" 
    ohos:progress_hint_text_color="#FF4989" 
    />

如上圖，進度條展示效果如下：

#星光計劃1.0# HarmonyOS 基礎之 UI組件（二）-鴻蒙HarmonyOS技術社區

4. Button

Button是一種常見的組件，點擊可以觸發對應的操作，通常由文本或圖標組成，也可以由圖標和文本共同組成。

<Button 
    ohos:id="$+id:button" 
    ohos:width="match_content" 
    ohos:height="match_content" 
    ohos:text_size="27fp" 
    ohos:text="button" 
    ohos:background_element="$graphic:background_button" 
    ohos:left_margin="15vp" 
    ohos:bottom_margin="15vp" 
    ohos:right_padding="8vp" 
    ohos:left_padding="8vp" 
    />

4.1 背景樣式

如上布局xml文件中可以設置 Button 字體大小，文字內容，文字格式，背景等。其中背景可以在 graphic 文件夾下自定義需要的背景風格。

例如：background_button.xml;

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    //設置控件形狀為方形 
    ohos:shape="rectangle"> 
    <corners 
        //背景圓角程度 
        ohos:radius="10"/> 
    <solid 
        //背景背景顏色 
        ohos:color="#007CFD"/> 
</shape>

ohos:background_element="$graphic:oval_button_element"

復制通過在 graphic 文件夾下自定義 Button 樣式文件，可以自定義不同類型的 Button，按照 Button 的形狀，按鈕可以分為：普通，橢圓，膠囊，圓形等。

4.2 點擊事件

用戶點擊Button時，Button對象將收到一個點擊事件，然后自定義響應點擊事件的方法。如：通過創建一個 Component.ClickedListener 對象，然后通過調用 setClickedListener 將其分配給按鈕，再收到該點擊事件后，執行相應操作對該事件做出響應。

Button button = (Button) findComponentById(ResourceTable.Id_button); 
// 為按鈕設置點擊事件回調 
button.setClickedListener(new Component.ClickedListener() { 
    public void onClick(Component v) { 
        // 此處添加點擊按鈕后的事件處理邏輯 
    } 
});

5. Picker

Picker 提供了滑動選擇器，允許用戶從預定義范圍中進行選擇。常見的 Picker 有 DatePicker ( 選擇日期 ) 和 TimePicker ( 選擇時間 )。

<Picker 
    ohos:height="match_content" 
    ohos:width="160vp" 
    ohos:top_margin="60vp" 
    ohos:selected_text_size="40vp" 
    ohos:normal_text_size="20vp" 
    ohos:layout_alignment="center" 
    />

根據 xml 布局文件配置自己需要的 Picker 種類，顯示效果如下：

Picker

DatePicker

TimePicker

6. Switch

Switch是切換單個設置開/關兩種狀態的組件。

<Switch 
    ohos:height="60vp" 
    ohos:width="120vp" 
    ohos:layout_alignment="center" 
    ohos:top_margin="60vp" 
    />

Switch相當于一個雙相開關，點擊開關的時候會進行切換，效果如下：

7. RadioButton

RadioButton 是用于多選一操作的組件，需要搭配 RadioContainer 使用，實現單選效果，RadioContainer 是 RadioButton 的容器，在其包裹下的 RadioButton 保證只有一個被選項。

<RadioButton 
    ohos:id="$+id:harmony_UI" 
    ohos:top_margin="60vp" 
    ohos:height="40vp" 
    ohos:width="match_content" 
    ohos:text="Hello Harmony" 
    ohos:layout_alignment="center" 
    ohos:text_size="20fp" 
    //字體顏色，text_color_onon 為選中狀態，text_color_off 為未選中狀態 
    ohos:text_color_on="#00BFFF" 
    ohos:text_color_off="#808080" 
    />

選中狀態

未選中狀態

以上兩張圖為 RadioButton 的選中與未選中的狀態對比。

8. Checkbox

Checkbox可以實現選中和取消選中的功能。

<Checkbox 
    ohos:top_margin="60vp" 
    ohos:layout_alignment="center" 
    ohos:id="$+id:check_box" 
    ohos:height="match_content" 
    ohos:width="match_content" 
    ohos:text="harmony checkbox" 
    ohos:text_color_on="#00AAEE" 
    ohos:text_color_off="#000000" 
    ohos:text_size="20fp" />

xml 布局文件中創建 Checkbox 組件，顯示效果如下：

9. TextField

TextField 是一種文本輸入框。

<TextField 
    ohos:height="40vp" 
    ohos:width="200vp" 
    //設置提示語 
    ohos:hint="Please enter......" 
    //設置內邊距 
    ohos:left_padding="24vp" 
    ohos:right_padding="24vp" 
    ohos:top_padding="8vp" 
    ohos:bottom_padding="8vp" 
    //設置可多行顯示 
    ohos:multiple_lines="true" 
 />

在代碼中，我們也可以對文本輸入框設置響應事件。

textField.setFocusChangedListener(((component, isFocused) -> { 
    if (isFocused) {  
        // 獲取到焦點 
        ... 
    }else {  
        // 失去焦點 
        ... 
    } 
}));

10. ToastDialog

ToastDialog 是在窗口上方彈出的對話框，是通知操作的簡單反饋。ToastDialog 會在一段時間后消失，在此期間，用戶還可以操作當前窗口的其他組件。

在代碼中創建 ToastDialog。

自定義布局 Resource 文件 Layout_layout_toast.xml 內容如下：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_content" 
    ohos:width="match_content" 
    ohos:orientation="vertical"> 
    <Text 
        ohos:id="$+id:msg_toast" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:left_padding="16vp" 
        ohos:right_padding="16vp" 
        ohos:top_padding="4vp" 
        ohos:bottom_padding="4vp" 
        ohos:layout_alignment="center" 
        ohos:text_size="16fp" 
        ohos:text="This is a ToastDialog for the customized component" 
        ohos:background_element="$graphic:background_toast_element"/> 
</DirectionalLayout>

11. ScrollView

ScrollView 是一種帶滾動功能的組件，它采用滑動的方式在有限的區域內顯示更多的內容。

<ScrollView 
    ohos:id="$+id:scrollview" 
    ohos:height="300vp" 
    ohos:width="300vp" 
    ohos:background_element="#FFDEAD" 
    ohos:top_margin="32vp" 
    ohos:bottom_padding="16vp" 
    ohos:layout_alignment="horizontal_center"> 
    <DirectionalLayout 
        ohos:height="match_content" 
        ohos:width="match_content"> 
        <Image 
            ohos:id="$+id:img_1" 
            ohos:width="300vp" 
            ohos:height="match_content" 
            ohos:top_margin="16vp" 
            ohos:image_src="$media:dog.png"/> 
        <!--放置任意需要展示的組件--> 
    </DirectionalLayout> 
</ScrollView>

12. ListContainer

ListContainer 是用來呈現連續、多行數據的組件，包含一系列相同類型的列表項。

首先需要在 layout 目錄下的 xml 布局文件中創建 ListContainer。

<?xml version="1.0" encoding="utf-8"?> 
    <ListContainer 
        xmlns:ohos="http://schemas.huawei.com/res/ohos" 
        ohos:id="$+id:list_container" 
        ohos:height="200vp" 
        ohos:width="300vp" 
        ohos:layout_alignment="horizontal_center"/>

然后在 layout 目錄下新建 xml 文件(例：item_listContainer.xml)，作為 ListContainer 的子布局。

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_content" 
    ohos:width="match_parent" 
    ohos:left_margin="16vp" 
    ohos:right_margin="16vp" 
    ohos:orientation="vertical"> 
    <Text 
        ohos:id="$+id:item_index" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:padding="4vp" 
        ohos:text="Item0" 
        ohos:text_size="20fp" 
        ohos:layout_alignment="center"/> 
</DirectionalLayout>

ListContainer 每一行可以為不同的數據，因此需要適配不同的數據結構，使其都能添加到 ListContainer 上。

創建 ListcontainerItemProvider.java，繼承自RecycleItemProvider。

ListContainer 的樣式設置

看看效果：

13. PageSlider

PageSlider 是一個交互類組件。

main_pageSlider.xml

<?xml version="1.0" encoding="UTF-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:background_element="blue" 
    ohos:orientation="vertical"> 
 
    <PageSlider 
        ohos:id="$+id:pager_slider" 
        ohos:height="0vp" 
        ohos:width="match_parent" 
        ohos:background_element="#ffffff" 
        ohos:weight="1"/> 
 
    <RadioContainer 
        ohos:id="$+id:radio_container" 
        ohos:height="60vp" 
        ohos:width="match_parent" 
        ohos:alignment="horizontal_center" 
        ohos:orientation="horizontal"> 
 
        <RadioButton 
            ohos:height="match_parent" 
            ohos:width="match_content" 
            ohos:text_size="20fp" 
            /> 
 
        <RadioButton 
            ohos:height="match_parent" 
            ohos:width="match_content" 
            ohos:text_size="20fp" 
            /> 
 
    </RadioContainer> 
</DirectionalLayout>

pageSlider1.xml

<?xml version="1.0" encoding="utf-8"?> 
<DependentLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent"> 
 
    <Text 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:center_in_parent="true" 
        ohos:text="PageSlider1" 
        ohos:text_size="25fp"/> 
</DependentLayout>

pageSlider2.xml

<?xml version="1.0" encoding="utf-8"?> 
<DependentLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent"> 
 
    <Text 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:center_in_parent="true" 
        ohos:text="PageSlider2" 
        ohos:text_size="25fp"/> 
</DependentLayout>