技術標籤：HarmonyOS鴻蒙

一 概述

ProgressBar用於顯示內容或操作的進度；

• 水平顯示的ProgressBar
• 圓形顯示的RoundProgressBar

二 水平顯示的ProgressBar

2.1 建立ProgressBar

layout目錄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:orientation="vertical">

    <ProgressBar
        ohos:progress_width="10vp"
        ohos:height="60vp"
        ohos:width="600vp"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="60"/>

</DirectionalLayout>
 

效果圖

2.2 設定ProgressBar

2.2.1 設定ProgressBar方向

通過ohos:orientation="vertical"為ProgressBar設定方向，有兩個選項：horizontal和vertical，預設值為horizontal

垂直設定程式碼

<ProgressBar
    ohos:orientation="vertical"
    ohos:top_margin="20vp"
    ohos:height="150vp"
    ohos:width="60vp"
    ohos:progress_width="10vp"
    ohos:max="100"
    ohos:min="0"
    ohos:progress="60"/>
 

垂直ProgressBar效果

2.2.2 設定當前進度

xml中設定

<ProgressBar
    ...
    ohos:progress="60"/>

Java中設定

progressBar.setProgressValue(60);

2.2.3 設定最大和最小值

xml中設定

<ProgressBar
    ...
    ohos:max="400"
    ohos:min="0"/>

Java中設定

progressBar.setMaxValue(400);
progressBar.setMinValue(0);
 

2.2.4 設定ProgressBar進度顏色

xml中設定

<ProgressBar
    ...
    ohos:progress_element="#FF9900" />

ProgressBar顏色效果

2.2.5 設定ProgressBar底色顏色

xml中設定

<ProgressBar
    ...
    ohos:background_instruct_element="#FFFFFF" />

設定底色顏色效果

2.2.6 設定ProgressBar分割線

xml中配置

<ProgressBar
    ...
    ohos:divider_lines_enabled="true"
    ohos:divider_lines_number="5" />

Java程式碼中配置

progressBar.enableDividerLines(true);
progressBar.setDividerLinesNumber(5);

新增分割線效果

2.2.7 設定ProgressBar分割線顏色

java程式碼中設定

progressBar.setDividerLineColor(Color.MAGENTA);

設定分割線顏色效果

2.2.8 設定ProgressBar提示文字

xml中設定

<ProgressBar
    ...
    ohos:progress_hint_text="20%"
    ohos:progress_hint_text_color="#FFCC99" />

設定提示文字效果

三 圓形顯示的RoundProgressBar

3.1 建立RoundProgressBar

xml中配置

<RoundProgressBar
    ohos:id="$+id:round_progress_bar"
    ohos:height="200vp"
    ohos:width="200vp"
    ohos:progress_width="10vp"
    ohos:progress="20"
    ohos:progress_color="#47CC47"/>

RoundProgressBar效果

3.2 設定開始和結束角度

xml中設定

<RoundProgressBar
    ...
    ohos:start_angle="45"
    ohos:max_angle="270"
    ohos:progress="20"
    ohos:progress_hint_text="Round"
    ohos:progress_hint_text_color="#007DFF" />

設定角度效果