共计 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