1. ProgressBar ProgressBar component

• Component Description:

In common apps, progress bars for downloading and completing tasks are used

• Common attributes:

• Common methods:

Basic usage:

	<ProgressBar
        ohos:id="$+id:pb"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:progress="0"
        ohos:progress_hint_text="0%"
        ohos:progress_hint_text_color="# 000000"
        ohos:progress_width="50vp"
        ohos:progress_color="red"
        ohos:max="100"
        ohos:min="0"/>
Copy the code

• ohos:progress="50": indicates the actual progress in the progress bar,50Half of the bar is colored, and the other half is not colored, which means the progress bar is available50%
• ohos:progress_hint_text="0%": Has nothing to do with the progress in the progress bar, it just sets the prompt text above the progress bar
• Usually when you write it, you promiseprogress 和 progress_hint_textThe values of are consistent
• ohos:progress_width="50vp": indicates the progress barThe thickness
• Max, min,Indicates the maximum and minimum. The maximum is generally100, the minimum is generally0
• Run, find the progress bar above the prompt text is0%And so is the actual progress0

• Change the progress bar and prompt text above to80

• After the operation:

• The progress bar is often used when uploading or downloading, and the percentage of text downloaded will constantly change the value in the progress bar

2. ProgressBar case — click the ProgressBar to increase the actual progress value

Demand analysis:

1. Each time a progress bar component is clicked, the progress bar is added5%The progress of the
2. Bind a click event to the progress bar component

• Case study:ProgressBarApplication
• You can also add a button at the bottom of the layout and bind the button to a click event. Each time the button is clicked, the percentage of the progress bar increases5%

ability_main

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <ProgressBar
        ohos:id="$+id:pb"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:progress="0"
        ohos:progress_hint_text="0%"
        ohos:progress_hint_text_color="# 000000"
        ohos:progress_width="50vp"
        ohos:progress_color="red"
        ohos:max="100"
        ohos:min="0"/>

</DirectionalLayout>
Copy the code

• The next step is to bind the click event directly to the progress bar, when the mouse clicks on the progress barProgressBarAfter that, it will be executedonClickmethods

MainAbilitySlice

package com.xdr630.progressbarapplication.slice;

import com.xdr630.progressbarapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.ProgressBar;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1. Find the progress bar component
        ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb);

        //2. Bind a click event to the progress bar
        pb.setClickedListener(this);
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        // Change the progress bar to + 5
        // Get the original value of the progress bar
        // There are two ways to get progress bar components:
        //1. Move the onStart pb to the member position
        //2. The parameter to the onClick method, which also represents the component object being clicked
        // Use the second method
        / / strong
        ProgressBar pb = (ProgressBar) component;
        // Get the original value of the progress bar
        int progress = pb.getProgress();
        // Change the progress bar to + 5
        progress = progress + 5;
        // Set the progress bar again
        pb.setProgressValue(progress);
        // Modify the text of the prompt
        pb.setProgressHintText(progress + "%"); }}Copy the code

• Run, each time you click the progress bar component, it will increase5%The progress of

• Discover when you click to100%“, click again, it will be105%The background color of the progress bar has not been increased
• In the XML file, set the maximum value for the progress bar component100The smallest0, it should not exceed100The size of the value

• bugFixed: When the progress bar value exceeds100Do not increase the value of the progress bar. when

• After running, the progress value is reached100%There won’t be any more.progressGreater than or equal to100After, directlyreturnThe following code will not execute.

3. RoundProgressBar Progress bar

• Mode of use andProgressBarIs the same
• isProgressBarSubclasses of, but display differently

• To viewRoundProgressBarComponent, found to be inheritedProgressBarThe component’s

• The basic use

      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <RoundProgressBar
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:progress_hint_text="80%"
        ohos:progress_hint_text_size="50vp"
        ohos:progress_hint_text_color="# 000000"
        ohos:progress="80"
        ohos:progress_width="20vp"
        ohos:progress_color="red"
        ohos:max="100"
        ohos:min="0"/>
</DirectionalLayout>
Copy the code

• The above example can also be usedRoundProgressBarComponent to achieve basically the same effect, just different display