3.5【HarmonyOS鸿蒙开发】组件RadioButton和RadioContainer

头像
茹茹
    阅读 14 分钟
    头图

    作者：韩茹

    公司：程序咖（北京）科技有限公司

    鸿蒙巴士专栏作家

    一、RadioButton

    RadioButton用于多选一的操作，需要搭配RadioContainer使用，实现单选效果。

    1.1、支持的XML属性

    RadioButton的共有XML属性继承自：Text

    RadioButton的自有XML属性见下表：

    属性名称中文描述取值取值说明使用案例
    marked当前状态boolean类型可以直接设置true/false，也可以引用boolean资源。ohos:marked="true"
    ohos:marked="$boolean:true"
    text_color_on处于选中状态的文本颜色color类型可以直接设置色值，也可以引用color资源。ohos:text_color_on="#FFFFFFFF"
    ohos:text_color_on="$color:black"
    text_color_off处于未选中状态的文本颜色color类型可以直接设置色值，也可以引用color资源。ohos:text_color_off="#FFFFFFFF"
    ohos:text_color_off="$color:black"
    check_element状态标志样式Element类型可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。ohos:check_element="#000000"
    ohos:check_element="$color:black"
    ohos:check_element="$media:media_src"
    ohos:check_element="$graphic:graphic_src"

    1.2、创建RadioButton

    在layout目录下的xml文件中创建RadioButton。

    <?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"
    ohos:background_element="#33666600"
    ohos:padding="20vp"
    >

    <RadioButton
        ohos:id="$+id:rb_1"
        ohos:height="40vp"
        ohos:width="match_content"
        ohos:text="A.程序咖"
        ohos:text_size="20fp"/>

</DirectionalLayout>

    效果图：

    radiobuttonyunxing1

    1.3、设置RadioButton

    设置单选按钮的字体颜色：

    在xml中设置：text_color_on为选中状态的字体颜色，text_color_off为未选中状态的字体颜色。

    <Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:top_margin="20vp"
        ohos:image_src="$media:chengxuka"
        ohos:alpha="0.5"
        />

    设置单选按钮字体颜色效果：

    radiobuttonyunxing2

    也可以在Java代码中设置：

        rBtn.setTextColorOn(new Color(Color.getIntColor("#0066FF")));
    rBtn.setTextColorOff(new Color(Color.getIntColor("#505050")));

    二、RadioContainer

    RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。

    2.1 支持的XML属性

    RadioContainer的共有XML属性继承自：DirectionalLayout

    2.2 创建RadioContainer

    在layout目录下的xml文件创建RadioContainer，并在RadioContainer中创建RadioButton。

    <!--RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。-->

    <Text

        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问以下选项中哪一个是女孩子？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />
    
    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:background_element="#33ff0000"
        >
        <!-- 放置多个RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.漩涡鸣人"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B.宇智波佐助"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C.我爱罗"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D.日向雏田"
            ohos:text_size="18fp"/>

    </RadioContainer>

    效果：

    WX20210609-113119@2x

    我们也可以设置RadioButton的布局方向：orientation设置为“horizontal”，表示横向布局；orientation设置为“vertical”，表示纵向布局。默认为纵向布局。

    在xml中设置：

    <RadioContainer
    ...
    ohos:orientation="horizontal">
    ...
</RadioContainer>

    或者在Java代码中设置：

    container.setOrientation(Component.HORIZONTAL);

    示例代码：

    <Text
        ohos:top_margin="20vp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问你的手机是哪种品牌？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />

    <RadioContainer
        ohos:id="$+id:radio_container2"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:orientation="horizontal"
        ohos:background_element="#33ff0000"
        >
        <!-- 放置多个RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_5"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.华为"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_6"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B.水果"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_7"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C.小米"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_8"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D.魅族"
            ohos:text_size="18fp"/>

    </RadioContainer>

    效果图：

    WX20210609-113933@2x

    2.3 设置RadioContainer

    设置响应RadioContainer状态改变的事件。

    RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
    @Override
    public void onCheckedChanged(RadioContainer radioContainer, int index) {

    }
});

    根据索引值设置指定RadioButton为选定状态。

    container.mark(0);

    清除RadioContainer中所有RadioButton的选定状态。

    container.cancelMarks();

    三、写个例子

    我们设置了3个选择题，每一道题都设置不同的处理方式。

    <img src="https://img.chengxuka.com/WX20210609-141108@2x.png/mark" alt="WX20210609-141108@2x" style="zoom:50%;" />

    第一道题，当某个单选按钮被选中时，我们在屏幕中间弹出ToastDialog吐司对话框。

    第二道题，当某个单选按钮被选中时，我们更改被选中的单选按钮的颜色。

    第三道题，我们获取被选中的单选按钮的文本内容，显示在下面的Text中。

    首先我们先完成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"
    ohos:background_element="#33666600"
    ohos:padding="20vp"
    >

<!--RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。-->

<!--第一题：-->
    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问以下选项中哪一个是女孩子？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />
    
    <RadioContainer
        ohos:id="$+id:radio_container"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:background_element="#33ff0000"
        >
        <!-- 放置多个RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_1"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.漩涡鸣人"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_2"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B.宇智波佐助"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_3"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C.我爱罗"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_4"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="D.日向雏田"
            ohos:text_size="18fp"/>

    </RadioContainer>


<!--    第二题：xml中我们设置了每个RadioButton的选中状态的颜色为红色-->
    <Text
        ohos:top_margin="20vp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问你的手机是哪种品牌？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />

    <RadioContainer
        ohos:id="$+id:radio_container2"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:orientation="horizontal"
        ohos:background_element="#33ff0000"
        >
        <!-- 放置多个RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_5"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.华为"
            ohos:text_color_on="#FF0000"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_6"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#FF0000"
            ohos:text="B.水果"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_7"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#FF0000"
            ohos:text="C.小米"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_8"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text_color_on="#FF0000"
            ohos:text="D.魅族"
            ohos:text_size="18fp"/>

    </RadioContainer>

<!--    第三题：-->
    <Text
        ohos:top_margin="20vp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="请问你的性别？"
        ohos:text_size="18fp"
        ohos:padding="20vp"
        ohos:background_element="#33ff0000"
        />

    <RadioContainer
        ohos:id="$+id:radio_container3"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:left_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:right_padding="20vp"
        ohos:orientation="horizontal"
        ohos:background_element="#33ff0000"
        >
        <!-- 放置多个RadioButton -->
        <RadioButton
            ohos:id="$+id:radio_button_9"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="A.男性"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_10"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="B.女性"
            ohos:text_size="18fp"/>
        <RadioButton
            ohos:id="$+id:radio_button_11"
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:text="C.其他"
            ohos:text_size="18fp"/>

    </RadioContainer>
    <Text
        ohos:id="$+id:text_checked"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20fp"
        ohos:top_margin="20vp"
        ohos:text="[你的性别：]"
        ohos:text_color="#FF3333"/>


</DirectionalLayout>

    然后在MainAbilitySlice.java中，我们在onStart()方法中，我们添加代码实现，先来第一题，说一下思路：

    第一题思路：我们打算当某个RadioButton被选中的时候，在屏幕中间弹出吐司ToastDialog，显示的内容为被选中的选项文本以及正确或者错误的答案。
step1，我们先根据监听事件中的index参数，获取被选中的RadioButton对象
step2，获取该对象的文本内容
step3，判断正确
step4，创建ToastDialog对象，并show()显示出来。

    示例代码：

    //第一题：设置吐司
        //1.获取RadioContainer对象
        RadioContainer container = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);
        //2.设置响应RadioContainer状态改变的事件。
        container.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            /**
             *
             * @param radioContainer，单选按钮组对象
             * @param index，被选中的RadioButton的下标序号，从0开始
             */
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int index) {
                //根据被选中的RadioButton的下标序号，获取RadioButton对象
                RadioButton radioButton = (RadioButton)radioContainer.getComponentAt(index);
                //获取文本内容
                String text = radioButton.getText();
                String result = index == 3?"正确":"错误";
                //设置Toast吐司
                new ToastDialog((getContext()))
                        .setText(text+"，答案："+result)
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });

    运行效果：

    <img src="https://img.chengxuka.com/radiobuttonyunxing3.gif" alt="radiobuttonyunxing3" style="zoom:50%;" />

    第二题，我们先说一下思路：

    第二题，当选中某个RadioButton时，改变被选中的RadioButton的颜色为红色。
有一点我们先说明一下：在xml布局中，我们是可以通过以下两个属性来设置某个RadioButton选中和没有选中的颜色的。
                ohos:text_color_on=""
        ohos:text_color_off=""
但是这个只是针对文本颜色，单选按钮前面的小圆点，没有选中的时候默认是白色，选中了默认是黑色。我们这里希望它变成红色，那文本颜色通过text_color_on属性即可实现。代码中要处理的就是被选中时，小圆点变成红色。
step1，我们现在xml布局文件中的每个RadioButton中，设置被选中的文本颜色为红色：ohos:text_color_on="#FF0000"
step2，借助于ShapeElement类，它提供具有颜色渐变的元素实例，该渐变通常用于组件背景。
step3，借助于StateElement类，它提供可以根据组件状态更改的元素对象。

    Java代码实现，首先我们先创建一个函数用于创建StateElement对象。该对象有两种状态，选中和没被选中的颜色是不一样的。示例代码：

            //通过以下方法，定义RadioButton的选中和非选中的小圆点的背景色。选中为红色，否则为白色。
    private StateElement createStateElement(){
        //提供具有颜色渐变的元素实例，该渐变通常用于组件背景。
        ShapeElement elementButtonOn = new ShapeElement();
        //设置选中状态的小圆点为红色
        elementButtonOn.setRgbColor(RgbPalette.RED);
        //设置形状，椭圆
        elementButtonOn.setShape(ShapeElement.OVAL);


        ShapeElement elementButtonOff = new ShapeElement();
        elementButtonOff.setRgbColor(RgbPalette.WHITE);
        elementButtonOff.setShape(ShapeElement.OVAL);

        //提供可以根据组件状态更改的元素对象。
        StateElement checkElement = new StateElement();
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED},elementButtonOn);
        checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY},elementButtonOff);
        return checkElement;
    }

    然后处理RadioContainer，先获取里面所有的RadioButton，然后为每个RadioButton设置元素对象。

                    //第二题，设置选中单选按钮的状态
        //1.获取RadioContainer对象
        RadioContainer container2 = (RadioContainer) findComponentById(ResourceTable.Id_radio_container2);
        //2.设置被选中的radioButton为红色，其他的为白色
        //先获取radiobutton的个数
        int count = container2.getChildCount();
        //循环
        for(int i=0;i<count;i++){
            //获取每个radiobutton
            RadioButton radioButton = (RadioButton)container2.getComponentAt(i);
            //为光标所在的气泡设置元素对象。
            radioButton.setButtonElement(createStateElement());
        }

    运行效果：

    <img src="https://img.chengxuka.com/radiobuttonyunxing4.gif" alt="radiobuttonyunxing4" style="zoom:50%;" />

    第三题，还是先来说一下思路，

    第三题，当选中某个RadioButton时，我们希望能够取出它的文本内容，显示到某个Text中。这个和第一题到思路有点像，只不过第一题是将文本信息通过ToastDialog的形式展现，而第三题是设置到Text上。
step1，我们先根据监听事件中的index参数，获取被选中的RadioButton对象
step2，获取该对象的文本内容
step3，将它显示到Text上。

    Java代码部分：

     //第三题，设置文本
        //1.获取RadioContainer对象和Text对象
        RadioContainer container3 = (RadioContainer) findComponentById(ResourceTable.Id_radio_container3);
        Text text_checked = (Text) findComponentById(ResourceTable.Id_text_checked);

        //2.获取被选中的radio的文本内容
        container3.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(RadioContainer radioContainer, int index) {
                //根据被选中的RadioButton的下标序号，获取RadioButton对象
                RadioButton radioButton = (RadioButton)radioContainer.getComponentAt(index);
                //获取文本内容
                String msg = "[你的性别：";
                String text = radioButton.getText();
                msg += text+"]";
                switch (index){
                    case 0:
                        msg += "，呀，是个汉子";
                        break;
                    case 1:
                        msg += "，呀，是个女汉子";
                        break;
                    case 2:
                        msg += "，呃，人妖嚒。。。";
                        break;
                }
                text_checked.setText(msg);
            }
        });

    运行效果：

    <img src="https://img.chengxuka.com/radiobuttonyunxing5.gif" alt="radiobuttonyunxing5" style="zoom:50%;" />

    更多内容：

    1、社区：鸿蒙巴士https://www.harmonybus.net/

    2、公众号：HarmonyBus

    3、技术交流QQ群：714518656

    4、视频课：https://www.chengxuka.com

    harmonyos
    茹茹
    10 声望20 粉丝

    嗯嗯，还好。。

    « 上一篇
    3.4【HarmonyOS鸿蒙开发】组件Image
    下一篇 »
    3.6【HarmonyOS鸿蒙开发】组件Checkbox

    引用和评论

    推荐阅读
    头像
    浙大版《C语言程序设计》第四版(何钦铭颜晖) 第12章 文件 课后习题答案

    茹茹阅读 1.6k

    头像
    SegmentFault 思否开发者系列沙龙：共筑生态，共创未来

    SegmentFault思否赞 5阅读 13.4k评论 1

    头像
    HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

    一键难忘赞 8阅读 2.3k评论 3

    头像
    API接口设计的未来趋势：探索技术方向与实践方案

    Swift社区赞 3阅读 1.3k

    头像
    HarmonyOS开发： 关于Scroll不滚动问题详解

    三掌柜赞 5阅读 813

    头像
    HarmonyOS 应用中复杂业务场景下的接口设计

    Swift社区赞 3阅读 1k

    头像
    构建安全护盾：HarmonyOS 应用的数据安全审计与日志管理实战

    Swift社区赞 3阅读 968

    0 条评论
    得票最新