鸿蒙App开发（10）---Switch组件

Posted 2021-06-29 一天一篇Python库

目录

• Switch组件
• • 创建Switch组件
  • 用代码设置其交互样式
  • 监听事件

Switch组件

对于这个组件，android开发并没有直接提供，但ios开发中是有UISwitch的。鸿蒙的Switch组件与它的效果差不多。

本篇，将详细介绍Switch组件的使用规则。

创建Switch组件

首先，我们通过XML布局文件来创建一个Switch组件。示例代码如下：

<Switch
    ohos:id="$+id:test_switch"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="20vp"
    ohos:height="60vp"
    ohos:width="120vp"
    ohos:text_state_on="开启"
    ohos:text_state_off="关闭"
    ohos:text_size="20vp"
    ohos:marked="false"/>

运行之后，交互效果如下：

这里，有几个属性需要注意：

属性	含义
text_state_on	开启按钮时的文字
text_state_off	关闭按钮时的文字
marked	默认按钮是开启还是关闭
track_element	轨迹样式
thumb_element	thumb样式
check_element	状态标志样式

用代码设置其交互样式

这里，我们可以直接通过graphic的shape文件设置后面这3个样式属性。但因为这个组件功能简单，我们来详细通过代码实现样式交互。

示例如下：

public class MainAbilitySlice extends AbilitySlice{
    private Switch aSwitch;
    HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.aSwitch=(Switch)findComponentById(ResourceTable.Id_test_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);
        //设置轨迹交互样式
        this.aSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
        //设置滑块交互样式
        this.aSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
    }

    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组件大多用于App的设置当中，一般都只有两个选择。所以，我们需要监听其到底是开启还是关闭。

示例代码如下：

this.aSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
    // 回调处理Switch状态改变事件
    @Override
    public void onCheckedChanged(AbsButton button, boolean isChecked) {

    }
});

这里的isChecked值，就能获取到Switch组件的选择状态，然后再做进一步的操作。