作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

Switch是切换单个设置开/关两种状态的组件。

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="media:media_src" ohos:track_element="$graphic:graphic_src"

thumb_element

thumb样式

Element类型

可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。

ohos:thumb_element="#FF0000FF" 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="​media:media_src" ohos:check_element="$graphic:graphic_src"

在layout目录下的xml文件中创建Switch。

Switch效果：

1、设置Switch在开启和关闭时的文本。

在xml中设置：

在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) {   }});

花粉社群VIP加油站