3.7 [Harmonyos Development] Component Switch

Author: Han Ru

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

Hongmeng Bus columnist

A Switch is a component that switches both states with a single setting on/off.

Supported XML attributes

Switch’s common XML attributes are inherited from: Text

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

Text_state_on The text displayed when the use case text_state_on is turned on. The string type can be set directly to the text string, or it can refer to the string resource. Ohos :text_state_on=”$string:test_str” Ohos :text_state_on=”$string:test_str” You can also refer to the String resource. Ohos :text_state_off=”$string:test_str” track_element track_style You can also reference the Color resource or the image resource under 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 style The Element type can be configured directly with color values and can refer to color resources or refer to image resources under Media/Graphic. ohos:thumb_element=”#FF0000FF” ohos:thumb_element=”color:black” ohos:thumb_element=”media:media_src” Ohos :thumb_element=”$graphic:graphic_src” marked Current state Boolean types can be set to true/false directly or can refer to Boolean resources. Ohos :marked=”$Boolean :true” Ohos :marked=”$Boolean :true” check_element status flag Style Element type can be configured directly for color values, You can also reference the Color resource or the image resource under Media/Graphic. ohos:check_element=”#000000″ ohos:check_element=”color:black” ohos:check_element=”media:media_src” ohos:check_element=”$graphic:graphic_src”

Create a Switch

Create the Switch in the XML file under the layout directory.

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

The Switch effect:

Set the Switch

1. Set the text of Switch on and off.

Set it in XML:

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

Set it in Java code:

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

Set on and off text effects:

2. Set the style of Switch slider and track.

Defines the style of the Switch slider block and trace in the open and closed 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); ShapeElement = new ShapeElement(); // 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);

Styles are integrated into the 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;
}

Set the style of the Switch slider and trace.

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

Set the slider and track style effects:

3. Set the event in response to the Switch state change.

BtnSwitch. SetCheckedStateChangedListener (new AbsButton. CheckedStateChangedListener () {/ / callback processing @ Override Switch state change events public void onCheckedChanged(AbsButton button, boolean isChecked) { } });

More:

1, community: https://www.harmonybus.net/ HongMeng bus

2. Official Account: Harmonybus

3, technical exchange QQ group: 714518656

Lesson 4, video: https://www.chengxuka.com