3.5【HarmonyOS鸿蒙开发】组件RadioButton和RadioContainer
作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家
一、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>
效果图：
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"
/>
设置单选按钮字体颜色效果：
也可以在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>
效果：
我们也可以设置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>
效果图：
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个选择题，每一道题都设置不同的处理方式。
第一道题，当某个单选按钮被选中时，我们在屏幕中间弹出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();
}
});
运行效果：
第二题，我们先说一下思路：
第二题，当选中某个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());
}
运行效果：
第三题，还是先来说一下思路，
第三题，当选中某个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);
}
});
运行效果：
更多内容：
3、技术交流QQ群：714518656
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
