Switch是切换单个设置开/关两种状态的组件。
支持的XML属性
Switch的共有XML属性继承自：Text
Switch的自有XML属性见下表：
Switch是切换单个设置开/关两种状态的组件。
支持的XML属性
Switch的共有XML属性继承自：Text
Switch的自有XML属性见下表：
表1 Switch的自有XML属性
创建Switch
在layout目录下的xml文件中创建Switch。
<Switch
ohos:id="$+id:btn_switch"
ohos:height="30vp"
ohos:width="60vp"/>图1 Switch效果
设置Switch
- 设置Switch状态
Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
//设置Switch默认状态
btnSwitch.setChecked(true);设置Switch在开启和关闭时的文本。
在xml中设置：
<Switch
...
ohos:text_state_off="OFF"
ohos:text_state_on="ON"/>在Java代码中设置：
btnSwitch.setStateOffText("OFF");
btnSwitch.setStateOnText("ON");图2 设置开启和关闭文本效果
设置响应Switch状态改变的事件。
btnSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
// 回调处理Switch状态改变事件
@Override
public void onCheckedChanged(AbsButton button, boolean isChecked) {
}
});设置Switch的滑块和轨迹的样式。xml实现方案：
<Switch
......
ohos:thumb_element="$graphic:thumb_state_element_bounds"
ohos:track_element="$graphic:track_state_element"
/>graphic目录下thumb_state_element_bounds.xml的示例如下：
<?xml version="1.0" encoding="utf-8"?>
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">
<item ohos:state="component_state_checked" ohos:element="$graphic:thumb_on_element_bounds"/>
<item ohos:state="component_state_empty" ohos:element="$graphic:thumb_off_element_bounds"/>
</state-container>graphic目录下thumb_on_element_bounds.xml的示例如下：
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<solid
ohos:color="#1E90FF"/>
<bounds
ohos:top="0"
ohos:left="0"
ohos:right="40vp"
ohos:bottom="40vp"/>
</shape>graphic目录下thumb_off_element_bounds.xml的示例如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<solid
ohos:color="#FFFFFF"/>
<bounds
ohos:top="0"
ohos:left="0"
ohos:right="40vp"
ohos:bottom="40vp"/>
</shape>graphic目录下track_state_element.xml的示例如下：
<?xml version="1.0" encoding="utf-8"?>
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">
<item ohos:state="component_state_checked" ohos:element="$graphic:track_on_element"/>
<item ohos:state="component_state_empty" ohos:element="$graphic:track_off_element"/>
</state-container>graphic目录下track_on_element.xml的示例如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#87CEFA"/>
<corners
ohos:radius="25vp"/>
</shape>graphic目录下track_off_element.xml的示例如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#808080"/>
<corners
ohos:radius="25vp"/>
</shape>图3 关闭效果
图4 打开效果
Java代码实现方案：定义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));图5 Java方案实现的滑块与轨迹样式效果
