Components ProgressBar and RoundProgressBar

Components ProgressBar and RoundProgressBar

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

The ProgressBar is used to show the progress of content or operations.

A, ProgressBar

1.1 Supported XML attributes

The common XML attributes of progressBars inherit from: ScrollView

The ProgressBar’s own XML attributes are shown in the following table:

1.2 create a ProgressBar

Create a ProgressBar in an XML file in the Layout directory.

<ProgressBar
        ohos:progress_width="10vp"
        ohos:height="60vp"
        ohos:width="match_parent"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="60"
        ohos:top_margin="30vp"/>
Copy the code

Create ProgressBar effect:

1.3 set the ProgressBar

1. Set the ProgressBar direction to vertical.

<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"/>
Copy the code

Vertical ProgressBar effect:

2. Set the current progress

Setup in XML:

<ProgressBar
    ...
    ohos:progress="60"/>
Copy the code

Or set it in Java:

progressBar.setProgressValue(60);
Copy the code

3. Set the maximum and minimum values

Set in XML:

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

Or set it in Java:

progressBar.setMaxValue(400);
progressBar.setMinValue(0);
Copy the code

4. Set the ProgressBar progress color

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

Set ProgressBar color effects:

5. Set the ProgressBar base color

<ProgressBar
    ...
    ohos:background_instruct_element="# 000000" />
Copy the code

Set the background color effect:

6. Set the ProgressBar split line

Configure in XML:

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

Configure in Java code:

progressBar.enableDividerLines(true);
progressBar.setDividerLinesNumber(5);
Copy the code

Add the dividing line effect:

7. Set the ProgressBar split line color

progressBar.setDividerLineColor(Color.MAGENTA);
Copy the code

Set the dividing line color effect:

8. Set ProgressBar prompt text

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

Set prompt text effect:

Second, the RoundProgressBar

The RoundProgressBar is derived from the ProgressBar and has the same properties as the ProgressBar. When setting the same properties, the RoundProgressBar is used to display circular progress.

2.1 Supported XML Attributes

The common XML attributes of RoundProgressBar inherit from: ProgressBar

The RoundProgressBar’s own XML attributes are shown in the following table:

2.2 create RoundProgressBar

<RoundProgressBar
        ohos:id="$+id:round_progress_bar"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:progress_width="10vp"
        ohos:progress="20"
        ohos:progress_color="#00FF00"/>
Copy the code

Create the RoundProgressBar effect:

2.3 set RoundProgressBar

1. Set the start and end angles

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

Set Angle effect:

I originally wrote an example to simulate downloading data and loading a progress bar. After writing it, I found that EventHandler was used, so I moved this example to the EventHandler section. 😂

More:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com