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="$color:black"ohos:track_element="$media:media_src"ohos:track_element="$graphic:graphic_src" |
| thumb_element | thumb样式 | Element类型 | 可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 | ohos:thumb_element="#FF0000FF"ohos:thumb_element="$color:black"ohos:thumb_element="$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="$color:black"ohos:check_element="$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"/>
图1 Switch效果
设置Switch
设置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状态改变的事件。
btnSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() { // 回调处理Switch状态改变事件 @Override public void onCheckedChanged(AbsButton button, boolean isChecked) { }});设置Switch的滑块和轨迹的样式。
定义Switch在开启和关闭状态下滑块和轨迹的样式。
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 设置滑块与轨迹样式效果
