共计 11865 个字符,预计需要花费 30 分钟才能阅读完成。
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
一、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 个选择题,每一道题都设置不同的解决形式。
<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