Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

Switch is a component that toggles a single setting on/off.

Supported XML attributes

The common XML attribute of Switch inherits from: Text

The Switch’s own XML attributes are shown in the following table:

The attribute name Product description The values The values that Use case
text_state_on Text displayed when enabled Type string You can set a text string directly, or you can reference a String resource. Ohos: text_state_on = “contact”

ohos:text_state_on=”$string:test_str”
text_state_off The text displayed when closed Type string You can set a text string directly, or you can reference a String resource. Ohos: text_state_off = “contact”

ohos:text_state_off=”$string:test_str”
track_element Track style Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:track_element=”#FF0000FF”

ohos:track_element=”
c o l o r : b l a c k ” < b r / > o h o s : t r a c k e l e m e n t = ” color:black”<br />ohos:track_element=” media:media_src”

ohos:track_element=”$graphic:graphic_src”
thumb_element Thumb style Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:thumb_element=”#FF0000FF”

ohos:thumb_element=”
c o l o r : b l a c k ” < b r / > o h o s : t h u m b e l e m e n t = ” color:black”<br />ohos:thumb_element=” media:media_src”

ohos:thumb_element=”$graphic:graphic_src”
marked The current state Boolean type You can set true/false directly or refer to a Boolean resource. ohos:marked=”true”

ohos:marked=”$boolean:true”
check_element Status flag style Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:check_element=”#000000″

ohos:check_element=”
c o l o r : b l a c k ” < b r / > o h o s : c h e c k e l e m e n t = ” color:black”<br />ohos:check_element=” media:media_src”

ohos:check_element=”$graphic:graphic_src”

2. Create a Switch

Create the Switch in the XML file in the Layout directory.

<Switch
    ohos:id="$+id:btn_switch"
    ohos:height="30vp"
    ohos:width="60vp"/>
Copy the code

The Switch effect:

3. Set the Switch

1. Set the text of Switch on and off.

Set in XML:

<Switch
    ...
    ohos:text_state_off="OFF"
    ohos:text_state_on="ON"/>
Copy the code

Set this in Java code:

Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
btnSwitch.setStateOffText("OFF");
btnSwitch.setStateOnText("ON");
Copy the code

To turn text effects on and off:

2. Set the slider and track styles of the Switch.

Defines the styles of sliders and tracks for the Switch in the on and off states.

In the onStart() method of MainAbilitySlice. Java, add the following code:

ShapeElement elementThumbOn = new ShapeElement();
elementThumbOn.setShape(ShapeElement.OVAL);
elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
elementThumbOn.setCornerRadius(50);
// Turn off the state slider style
ShapeElement elementThumbOff = new ShapeElement();
elementThumbOff.setShape(ShapeElement.OVAL);
elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
elementThumbOff.setCornerRadius(50);
// Enable the trajectory style
ShapeElement elementTrackOn = new ShapeElement();
elementTrackOn.setShape(ShapeElement.RECTANGLE);
elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
elementTrackOn.setCornerRadius(50);
// Track style in closed state
ShapeElement elementTrackOff = new ShapeElement();
elementTrackOff.setShape(ShapeElement.RECTANGLE);
elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
elementTrackOff.setCornerRadius(50);
Copy the code

Integrate styles into StateElement by state by the following method.

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;
}
Copy the code

Sets the style of the Switch’s slider and track.

  Switch btnSwitch = (Switch) findComponentById(ResourceTable.Id_btn_switch);
  btnSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
  btnSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
Copy the code

Set slider and Track style effects:

3. Set events that respond to Switch state changes.

btnSwitch.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
    // The callback handles the Switch state change event
    @Override
    public void onCheckedChanged(AbsButton button, boolean isChecked) {}});Copy the code

More:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com