4.2 [Harmonyos Development] Components ProgressBar and RoundProgressBar

Author: Han Ru

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

Hongmeng Bus columnist

ProgressBars are used to show the progress of content or actions.

A, ProgressBar

1.1 Supported XML attributes

The common XML attributes of the ProgressBar are inherited from: ScrollView

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

The attribute name	Product description	The values	The values that	Use case
divider_lines_enabled	The divider	Boolean type	You can set true/false directly, or you can refer to a Boolean resource.	ohos:divider_lines_enabled=”true” ohos:divider_lines_enabled=”$boolean:true”
divider_lines_number	Number of dividing lines	The integer types	You can set an integer value directly, or you can reference an Integer resource.	ohos:divider_lines_number=”1″ ohos:divider_lines_number=”$integer:one”
infinite	Whether to use indeterminate mode	Boolean type	You can set true/false directly, or you can refer to a Boolean resource.	ohos:infinite=”true” ohos:infinite=”$boolean:true”
infinite_element	Indeterministic pattern configuration premise: INFINITE needs to be set to true	Element type	Only refer to images under Media/Graphic.	ohos:infinite_element=”$media:media_src”ohos:infinite_element=”$graphic:graphic_src”
max	The maximum	The integer types	You can set an integer value directly, or you can reference an Integer resource.	ohos:max=”1″ohos:max=”$integer:one”
max_height	Maximum height	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:max_height=”100″ ohos:max_height=”20vp” ohos:max_height=”$float:size_value”
max_width	Maximum width	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:max_width=”100″ohos:max_width=”20vp” ohos:max_width=”$float:size_value”
min	The minimum value	The integer types	You can set an integer value directly, or you can reference an Integer resource.	ohos:min=”1″ohos:min=”$integer:one”
orientation	An orientation	horizontal	Represents the ProgressBar displayed horizontally.	ohos:orientation=”horizontal”
vertical	Represents the ProgressBar displayed vertically.
progress	The current progress	The integer types	You can set an integer value directly, or you can reference an Integer resource.	ohos:progress=”10″ohos:progress=”$integer:ten”
background_instruct_element	background	Element type	You can configure the color value directly, refer to the color resource or refer to the image resource under Media/Graphic.	ohos:background_instruct_element=”#000000″ ohos:background_instruct_element=”$color:black”ohos:background_instruct_element=”$media:media_src”ohos:background_instru ct_element=”$graphic:graphic_src”
progress_width	Progress bar width	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:progress_width=”100″ ohos:progress_width=”20vp” ohos:progress_width=”$float:size_value”
progress_color	Progress bar color	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:progress_color=”#FF262626″ ohos:progress_color=”$color:black”
progress_element	Progress bar background	Element type	You can configure the color value directly, refer to the color resource or refer to the image resource under Media/Graphic.	ohos:progress_element=”#000000″ohos:progress_element=”$color:black”ohos:progress_element=”$media:media_src”ohos:progress _element=”$graphic:graphic_src”
progress_hint_text	Progress text	Type string	You can set the text string directly, or you can reference the string resource.	ohos:progress_hint_text=”test” ohos:progress_hint_text=”$string:test_str”
progress_hint_text_alignment	Progress prompt text alignment	left	Indicates that text is left-aligned.	You can set the values as listed in the table, or you can use “\	“Make multiple combinations. ohos:progress_hint_text_alignment=”top” ohos:progress_hint_text_alignment=”top\	left”
		top	Indicates that the text is aligned at the top.
		right	Represents text aligned to the right.
		bottom	Indicates that the text is aligned at the bottom.
		horizontal_center	Indicates that text is horizontally centered.
		vertical_center	Indicates that text is vertically centered.
		center	Indicates that text is centered.
progress_hint_text_color	Progress prompt text color	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:progress_hint_text_color=”#FFFFFFFF” ohos:progress_hint_text_color=”$color:black”
vice_progress	Current sub-schedule	The integer types	You can set an integer value directly, or you can reference an Integer resource.	ohos:vice_progress=”1″ ohos:vice_progress=”$integer:one”
vice_progress_element	Sub-progress bar background	Element type	You can configure the color value directly, refer to the color resource or refer to the image resource under Media/Graphic.	ohos:vice_progress_element=”#000000″ ohos:vice_progress_element=”$color:black”<br />ohos:vice_progress_element=”$media:media_src” ohos:vice_progress_element=”$graphic:graphic_src”
step	The step size of the progress	The integer types	You can set an integer value directly, or you can reference an Integer resource. The default value is 1. If step is set to 10, the progress value is a multiple of 10.	ohos:step=”1″ohos:step=”$integer:one”
progress_hint_text_size	Size of progress prompt text	A float	A float type that represents a size. Can be a floating point value, the default unit is px; It can also be a floating-point value with px/ VP/FP units. Float resources can also be referenced.	ohos:progress_hint_text_size=”100″ ohos:progress_hint_text_size=”20fp” ohos:progress_hint_text_size=”$float:size_value”

1.2 create a ProgressBar

Create a ProgressBar in the XML file under 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"/>

Create the ProgressBar effect:

1.3 set the ProgressBar

1. Set the ProgressBar orientation 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"/>

Vertical ProgressBar effect:

2. Set the current progress

Settings in XML:

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

Or set it in Java:

progressBar.setProgressValue(60);

3. Set the maximum and minimum values

Set it in XML:

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

Or set it in Java:

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

4. Set the ProgressBar progress color

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

Set the ProgressBar color effect:

5. Set the ProgressBar background color

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

Set the background color effect:

6. Set the ProgressBar divider

Configure in XML:

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

Configure in Java code:

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

Add divider effect:

7. Set the color of the ProgressBar divider

progressBar.setDividerLineColor(Color.MAGENTA);

Set the dividing line color effect:

Set the ProgressBar prompt text

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

Set the prompt text effect:

Second, the RoundProgressBar

The RoundProgressBar inherits from the ProgressBar, has properties of the ProgressBar, and is used in the same way as the ProgressBar when setting the same properties to display circular progress.

2.1 Supported XML attributes

The common XML attributes of the RoundProgressBar are inherited from: ProgressBar

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

The attribute name	Product description	The values	The values that	Use case
start_angle	The starting Angle of the circular progress bar	A float	Floating-point values can be set directly, or a float floating-point resource can be referenced.	ohos:start_angle=”10″ ohos:start_angle=”$float:float_num”
max_angle	The maximum Angle of the circular progress bar	A float	Floating-point values can be set directly, or a float floating-point resource can be referenced.	Ohos: start_angle = “360.0” ohos:start_angle=”$float:float_num”

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"/>

Create the RoundProgressBar effect:

2.3 set RoundProgressBar

1. Set the starting and ending angles

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

Set Angle Effect:

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

1, community: https://www.harmonybus.net/ HongMeng bus

2. Official Account: Harmonybus

3, technical exchange QQ group: 714518656

Lesson 4, video: https://www.chengxuka.com

4.2 [Harmonyos Development] Components ProgressBar and RoundProgressBar