HarmonyOS 基礎之 UI組件 （二）
概述
上一篇【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"
- />
如上圖，進度條展示效果如下：
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>
然后啟動程序看一下控件效果:
