3.7HarmonyOS鸿蒙开发组件Switch

Posted 2021-09-04 茹茹

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="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:
    ohos:/>

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