按钮与进度条类组件

1 单选按钮组件(RadioButton)

<RadioContainer
    ohos:id="$+id:rc"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="25vp">

    <RadioButton
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:marked="true"
        ohos:text="中文"
        ohos:text_size="45vp"
        ohos:text_color_off="#ffffff"
        ohos:text_color_on="#ff7f27"
        />

    <RadioButton
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:text="English"
        ohos:text_size="45vp"
        ohos:text_color_off="#ffffff"
        ohos:text_color_on="#ff7f27"
        />

    <RadioButton
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:text="日本語"
        ohos:text_size="45vp"
        ohos:text_color_off="#ffffff"
        ohos:text_color_on="#ff7f27"
        />

</RadioContainer>

((RadioContainer)findComponentById(ResourceTable.Id_rc))
    .setMarkChangedListener(new CheckedStateChangedListener() {
        @Override
        public void onCheckedChanged(RadioContainer radioContainer, int i) {
            switch (i) {
                case 0:
                    text.setText("选择语言：中文");
                    break;
                case 1:
                    text.setText("Select Language: English");
                    break;
                case 2:
                    text.setText("言語を選択：日本語");
                    break;
            }
        }
    });

例程：RadioButton

...\RadioButton\entry\src\main\resources\base\layout\ability_main.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#0000ff">

    <Text
        ohos:id="$+id:txt"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="24vp"
        ohos:text_color="#ffffff"
        />

    <RadioContainer
        ohos:id="$+id:rc"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="24vp">

        <RadioButton
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="left"
            ohos:marked="true"
            ohos:text="中文"
            ohos:text_size="24vp"
            ohos:text_color_off="#ffffff"
            ohos:text_color_on="#ff7f27"
            />

        <RadioButton
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="left"
            ohos:text="English"
            ohos:text_size="24vp"
            ohos:text_color_off="#ffffff"
            ohos:text_color_on="#ff7f27"
            />

        <RadioButton
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="left"
            ohos:text="日本語"
            ohos:text_size="24vp"
            ohos:text_color_off="#ffffff"
            ohos:text_color_on="#ff7f27"
            />

    </RadioContainer>

</DirectionalLayout>

...\RadioButton\entry\src\main\java\com\minwei\radiobutton\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ...
        String[] languages = new String[] {
            "选择语言：中文",
            "Select Language：English",
            "言語を選択：日本語"};

        Text text = ((Text)findComponentById(ResourceTable.Id_txt));
        text.setText(languages[((RadioContainer)findComponentById(
            ResourceTable.Id_rc)).getMarkedButtonId()]);

        ((RadioContainer)findComponentById(ResourceTable.Id_rc))
            .setMarkChangedListener(new CheckedStateChangedListener() {
                @Override
                public void onCheckedChanged(
                    RadioContainer radioContainer, int i) {
                    text.setText(languages[i]);
                }
            });
    }
    ...
}

运行效果如下图所示：

2 复选框组件(Checkbox)

<DirectionalLayout
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="25vp">

    <Checkbox
        ohos:id="$+id:cbCplusplus"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:marked="true"
        ohos:text="C++"
        ohos:text_size="45vp"
        ohos:text_color_off="#ffffff"
        ohos:text_color_on="#ff7f27"
        />

    <Checkbox
        ohos:id="$+id:cbJava"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:marked="true"
        ohos:text="Java"
        ohos:text_size="45vp"
        ohos:text_color_off="#ffffff"
        ohos:text_color_on="#ff7f27"
        />

    <Checkbox
        ohos:id="$+id:cbPyhon"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:marked="true"
        ohos:text="Python"
        ohos:text_size="45vp"
        ohos:text_color_off="#ffffff"
        ohos:text_color_on="#ff7f27"
        />

</DirectionalLayout>

cbCplusplus.setClickedListener(new ClickedListener() {
    @Override
    public void onClick(Component component) {
        updateCourses(true, false, false);
    }
});
cbJava.setClickedListener(new ClickedListener() {
    @Override
    public void onClick(Component component) {
        updateCourses(false, true, false);
    }
});
cbPython.setClickedListener(new ClickedListener() {
    @Override
    public void onClick(Component component) {
        updateCourses(false, false, true);
    }
});

例程：Checkbox

...\Checkbox\entry\src\main\resources\base\layout\ability_main.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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#0000ff">

    <Text
        ohos:id="$+id:txt"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="24vp"
        ohos:text_color="#ffffff"
        />

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="24vp">

        <Checkbox
            ohos:id="$+id:cbCplusplus"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="left"
            ohos:marked="true"
            ohos:text="C++"
            ohos:text_size="24vp"
            ohos:text_color_off="#ffffff"
            ohos:text_color_on="#ff7f27"
            />

        <Checkbox
            ohos:id="$+id:cbJava"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="left"
            ohos:marked="true"
            ohos:text="Java"
            ohos:text_size="24vp"
            ohos:text_color_off="#ffffff"
            ohos:text_color_on="#ff7f27"
            />

        <Checkbox
            ohos:id="$+id:cbPyhon"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="left"
            ohos:marked="true"
            ohos:text="Python"
            ohos:text_size="24vp"
            ohos:text_color_off="#ffffff"
            ohos:text_color_on="#ff7f27"
            />

    </DirectionalLayout>

</DirectionalLayout>

...\Checkbox\entry\src\main\java\com\minwei\checkbox\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    private Text text = null;
    private Checkbox cbCplusplus = null;
    private Checkbox cbJava = null;
    private Checkbox cbPython = null;

    @Override
    public void onStart(Intent intent) {
        ...
        text = ((Text)findComponentById(ResourceTable.Id_txt));
        cbCplusplus = (Checkbox)findComponentById(
            ResourceTable.Id_cbCplusplus);
        cbJava = (Checkbox)findComponentById(
            ResourceTable.Id_cbJava);
        cbPython = (Checkbox)findComponentById(
            ResourceTable.Id_cbPyhon);

        updateCourses(false, false, false);

        cbCplusplus.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                updateCourses(true, false, false);
            }
        });
        cbJava.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                updateCourses(false, true, false);
            }
        });
        cbPython.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                updateCourses(false, false, true);
            }
        });
    }
    ...
    private void updateCourses(
        Boolean cplusplus, Boolean java, Boolean python) {
        String courses = "选择课程：";
        if (cplusplus) {
            if (!cbCplusplus.isChecked()) courses += "C++ ";
        }
        else if (cbCplusplus.isChecked()) courses += "C++ ";
        if (java) {
            if (!cbJava.isChecked()) courses += "Java ";
        }
        else if (cbJava.isChecked()) courses += "Java ";
        if (python) {
            if (!cbPython.isChecked()) courses += "Python";
        }
        else if (cbPython.isChecked()) courses += "Python";
        text.setText(courses);
    }
}

运行效果如下图所示：

3 进度条组件(ProgressBar)

直线进度条：

<ProgressBar
    ohos:id="$+id:pb"
    ohos:height="100vp"
    ohos:width="800vp"
    ohos:progress_width="20vp"
    ohos:progress_color="#00a2e8"
    ohos:min="0"
    ohos:max="30"
    />

(椭)圆进度条：

<RoundProgressBar
    ohos:id="$+id:rpb"
    ohos:height="200vp"
    ohos:width="300vp"
    ohos:progress_width="20vp"
    ohos:progress_color="#ff7f27"
    ohos:min="0"
    ohos:max="60"
    />

int[] progs = {
    progressBar.getProgress() + steps[0],
    roundProgressBar.getProgress() + steps[1]};

progressBar.setProgressValue(progs[0]);
roundProgressBar.setProgressValue(progs[1]);

if (progs[0] == progressBar.getMax() ||
    progs[0] == progressBar.getMin())
    steps[0] *= -1;
if (progs[1] == roundProgressBar.getMax() ||
    progs[1] == roundProgressBar.getMin())
    steps[1] *= -1;

例程：ProgressBar

...\ProgressBar\entry\src\main\resources\base\layout\ability_main.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:left_padding="30vp"
    ohos:top_padding="12vp"
    ohos:right_padding="30vp"
    ohos:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#000000">

    <Text
        ohos:id="$+id:txt"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="28fp"
        ohos:text_color="#ffffff"
        />

    <ProgressBar
        ohos:id="$+id:pb"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="10vp"
        ohos:progress_width="10vp"
        ohos:progress_color="#00a2e8"
        ohos:min="0"
        ohos:max="30"
        />

    <RoundProgressBar
        ohos:id="$+id:rpb"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:top_margin="20vp"
        ohos:bottom_margin="40vp"
        ohos:progress_width="10vp"
        ohos:progress_color="#ff7f27"
        ohos:min="0"
        ohos:max="60"
        />

</DirectionalLayout>

...\ProgressBar\entry\src\main\java\com\minwei\progressbar\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    private Text text = null;
    private ProgressBar progressBar = null;
    private RoundProgressBar roundProgressBar = null;
    private Timer timer = null;

    @Override
    public void onStart(Intent intent) {
        ...
        text = (Text)findComponentById(ResourceTable.Id_txt);
        progressBar = (ProgressBar)findComponentById(
            ResourceTable.Id_pb);
        roundProgressBar = (RoundProgressBar)findComponentById(
            ResourceTable.Id_rpb);

        startTimer();
    }
    ...
    @Override
    public void onStop() {
        stopTimer();
    }
    ...
    private void startTimer() {
        timer = new Timer();

        timer.schedule(new TimerTask() {
            private int hour = 0, min = 0, sec = 0;
            private int[] steps = {1, 1};

            @Override
            public void run() {
                if (++sec == 60) {
                    sec = 0;
                    if (++min == 60) {
                        min = 0;
                        if (++hour == 100)
                            hour = 0;
                    }
                }

                int[] progs = {
                    progressBar.getProgress() + steps[0],
                    roundProgressBar.getProgress() + steps[1]};

                getUITaskDispatcher().asyncDispatch(new Runnable() {
                    @Override
                    public void run() {
                        text.setText(String.format(
                            "%02d:%02d:%02d", hour, min, sec));
                        progressBar.setProgressValue(progs[0]);
                        roundProgressBar.setProgressValue(progs[1]);
                    }
                });

                if (progs[0] == progressBar.getMax() ||
                    progs[0] == progressBar.getMin())
                    steps[0] *= -1;
                if (progs[1] == roundProgressBar.getMax() ||
                    progs[1] == roundProgressBar.getMin())
                    steps[1] *= -1;
            }
        }, 1000, 1000);
    }

    private void stopTimer() {
        timer.cancel();
        timer = null;
    }
}

运行效果如下图所示：

4 滑竿组件(Slider)

<Slider
    ohos:id="$+id:sldRed"
    ohos:height="80vp"
    ohos:width="400vp"
    ohos:progress_width="20vp"
    ohos:progress_color="#ff0000"
    ohos:min="0"
    ohos:max="255"
    />

((Slider)findComponentById(ResourceTable.Id_sldRed))
    .setValueChangedListener(new ValueChangedListener() {
    @Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        red = i;
        updateBackground();
    }

    @Override
    public void onTouchStart(Slider slider) {
    }

    @Override
    public void onTouchEnd(Slider slider) {
    }
});

例程：Slider

...\Slider\entry\src\main\resources\base\layout\ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:layout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:left_padding="40vp"
    ohos:right_padding="40vp"
    ohos:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#000000">

    <Slider
        ohos:id="$+id:sldRed"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:progress_width="20vp"
        ohos:progress_color="#ff0000"
        ohos:min="0"
        ohos:max="255"
        />

    <Slider
        ohos:id="$+id:sldGreen"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="30vp"
        ohos:progress_width="20vp"
        ohos:progress_color="#00ff00"
        ohos:min="0"
        ohos:max="255"
        />

    <Slider
        ohos:id="$+id:sldBlue"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="30vp"
        ohos:progress_width="20vp"
        ohos:progress_color="#0000ff"
        ohos:min="0"
        ohos:max="255"
        />

</DirectionalLayout>

...\Slider\entry\src\main\java\com\minwei\slider\slice\MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    private int red = 0, green = 0, blue = 0;

    @Override
    public void onStart(Intent intent) {
        ...
        ((Slider)findComponentById(ResourceTable.Id_sldRed))
            .setValueChangedListener(new ValueChangedListener() {
                @Override
                public void onProgressUpdated(Slider slider, int i, boolean b) {
                    red = i;
                    updateBackground();
                }

                @Override
                public void onTouchStart(Slider slider) {
                }

                @Override
                public void onTouchEnd(Slider slider) {
                }
            });

        ((Slider)findComponentById(ResourceTable.Id_sldGreen))
            .setValueChangedListener(new ValueChangedListener() {
                @Override
                public void onProgressUpdated(Slider slider, int i, boolean b) {
                    green = i;
                    updateBackground();
                }

                @Override
                public void onTouchStart(Slider slider) {
                }

                @Override
                public void onTouchEnd(Slider slider) {
                }
            });

        ((Slider)findComponentById(ResourceTable.Id_sldBlue))
            .setValueChangedListener(new ValueChangedListener() {
                @Override
                public void onProgressUpdated(Slider slider, int i, boolean b) {
                    blue = i;
                    updateBackground();
                }

                @Override
                public void onTouchStart(Slider slider) {
                }

                @Override
                public void onTouchEnd(Slider slider) {
                }
            });
    }
    ...
    private void updateBackground() {
        ((ShapeElement)findComponentById(ResourceTable.Id_layout)
            .getBackgroundElement()).setRgbColor(
                new RgbColor(red, green, blue));
    }
}

运行效果如下图所示：

更多精彩，敬请期待……

达内集团C++教学部 2021年9月16日