3.7【HarmonyOS鸿蒙开发】组件Switch
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
Switch是切换单个设置开/关两种状态的组件。
一、支持的XML属性
Switch的共有XML属性继承自:Text
Switch的自有XML属性见下表:
属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
---|---|---|---|---|
text_state_on | 开启时显示的文本 | string类型 | 可以直接设置文本字串,也可以引用string资源。 | ohos:text_state_on=“联系" ohos:text_state_on=”$string:test_str" |
text_state_off | 关闭时显示的文本 | string类型 | 可以直接设置文本字串,也可以引用string资源。 | ohos:text_state_off=“联系" ohos:text_state_off=”$string:test_str" |
track_element | 轨迹样式 | Element类型 | 可直接配置色值,也可引用color资源或引用media/graphic下的图片资源。 | ohos:track_element="#FF0000FF" ohos:track_element=“ c o l o r : b l a c k " < b r / > o h o s : t r a c k e l e m e n t = " color:black"<br />ohos:track_element=" color:black"<br/>ohos:trackelement="media:media_src" ohos:track_element=”$graphic:graphic_src" |
thumb_element | thumb样式 | Element类型 | 可直接配置色值,也可引用color资源或引用media/graphic下的图片资源。 | ohos:thumb_element="#FF0000FF" ohos:thumb_element=“ c o l o r : b l a c k " < b r / > o h o s : t h u m b e l e m e n t = " color:black"<br />ohos:thumb_element=" color:black"<br/>ohos:thumbelement="media:media_src" ohos:thumb_element=”$graphic:graphic_src" |
marked | 当前状态 | boolean类型 | 可以直接设置true/false,也可以引用boolean资源。 | ohos:marked=“true" ohos:marked=”$boolean:true" |
check_element | 状态标志样式 | Element类型 | 可直接配置色值,也可引用color资源或引用media/graphic下的图片资源。 | ohos:check_element="#000000" ohos:check_element=“ c o l o r : b l a c k " < b r / > o h o s : c h e c k e l e m e n t = " color:black"<br />ohos:check_element=" color:black"<br/>ohos:checkelement="media:media_src" ohos:check_element=”$graphic:graphic_src" |
二、创建Switch
在layout目录下的xml文件中创建Switch。
<Switch
ohos:id="$+id:btn_switch"
ohos:height="30vp"
ohos:width="60vp"/>
Switch效果:
三、设置Switch
1、设置Switch在开启和关闭时的文本。
在xml中设置:
<Switch
...
ohos:text_state_off="OFF"
ohos:text_state_on="ON"/>
在Java代码中设置:
Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
btnSwitch.setStateOffText("OFF");
btnSwitch.setStateOnText("ON");
设置开启和关闭文本效果:
2、设置Switch的滑块和轨迹的样式。
定义Switch在开启和关闭状态下滑块和轨迹的样式。
在MainAbilitySlice.java的onStart()方法中,添加以下代码:
ShapeElement elementThumbOn = new ShapeElement();
elementThumbOn.setShape(ShapeElement.OVAL);
elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
elementThumbOn.setCornerRadius(50);
// 关闭状态下滑块的样式
ShapeElement elementThumbOff = new ShapeElement();
elementThumbOff.setShape(ShapeElement.OVAL);
elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
elementThumbOff.setCornerRadius(50);
// 开启状态下轨迹样式
ShapeElement elementTrackOn = new ShapeElement();
elementTrackOn.setShape(ShapeElement.RECTANGLE);
elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
elementTrackOn.setCornerRadius(50);
// 关闭状态下轨迹样式
ShapeElement elementTrackOff = new ShapeElement();
elementTrackOff.setShape(ShapeElement.RECTANGLE);
elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
elementTrackOff.setCornerRadius(50);
通过以下方法,按状态将样式整合到StateElement中。
private StateElement trackElementInit(ShapeElement on, ShapeElement off){
StateElement trackElement = new StateElement();
trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
return trackElement;
}
private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
StateElement thumbElement = new StateElement();
thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
return thumbElement;
}
设置Switch的滑块与轨迹的样式。
Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
btnSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
btnSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
设置滑块与轨迹样式效果:
3、设置响应Switch状态改变的事件。
btnSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
// 回调处理Switch状态改变事件
@Override
public void onCheckedChanged(AbsButton button, boolean isChecked) {
}
});
更多内容:
1、社区:鸿蒙巴士https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交流QQ群:714518656
4、视频课:https://www.chengxuka.com