HMS13. Switch RadioButton CheckBox ProgressBar RoundProgressBar

01. Switch

The common XML attributes are inherited from: Text, and the private attributes are as follows:

  text_state_on, text_state_off: text displayed when opening and closing;

  track_element: track style; Element type, color value can be configured directly; You can also reference color resources or picture resources under Media/Graphic;

  thumb_element: thumb style; Element type;

marked: current status; boolean type;

  check_element: status flag style; Element type;

    >>> About track_element and thumb_element; There are two styles for the contents of both sides, namely, the selected / unselected style;


In Java, the layout is configured through code as follows

 1 //Style of slider when on
 2 ShapeElement elementThumbOn = new ShapeElement();
 3 elementThumbOn.setShape(ShapeElement.OVAL);
 4 elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
 5 elementThumbOn.setCornerRadius(50);
 6 // Style of slider in off state
 7 ShapeElement elementThumbOff = new ShapeElement();
 8 elementThumbOff.setShape(ShapeElement.OVAL);
 9 elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
10 elementThumbOff.setCornerRadius(50);
11 // Track style when on
12 ShapeElement elementTrackOn = new ShapeElement();
13 elementTrackOn.setShape(ShapeElement.RECTANGLE);
14 elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
15 elementTrackOn.setCornerRadius(50);
16 // Track style in off state
17 ShapeElement elementTrackOff = new ShapeElement();
18 elementTrackOff.setShape(ShapeElement.RECTANGLE);
19 elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
20 elementTrackOff.setCornerRadius(50);


  After the layout is processed, configure the thumb_element, track_element style configuration function;    
This style directly accommodates other configured styles, but is associated with status

 1 private StateElement trackElementInit(ShapeElement on, ShapeElement off){
 2     StateElement trackElement = new StateElement();
 3     trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
 4     trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
 5     return trackElement;
 6 }
 7 private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
 8     StateElement thumbElement = new StateElement();
 9     thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
10     thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
11     return thumbElement;
12 }

Configure different styles for switches;

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


02. RadioButton

RadioButton has a common XML attribute inherited from Text; Its own XML attributes are as follows:

marked: current status (checked or not); Boolean type;

  text_color_on, text_color_off: text color in selected / unchecked status;

  check_element: status flag style; Element type; You can directly configure the color value, configure the resources under color or reference the picture resources under graphic/media;

> > > the RadioButton can configure its own style independently
By default, it is marked by a small circle, which can be checked_ Element to specify the state container

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <state-container
 3     xmlns:ohos="">
 4     <item
 5         ohos:element="$graphic:background_checkbox_checked"
 6         ohos:state="component_state_checked"/>
 7     <item
 8         ohos:element="$graphic:background_checkbox_empty"
 9         ohos:state="component_state_empty"/>
10 </state-container>


At the same time, another two configurations in different states are required to achieve the final effect (selected state and non selected state)

1 <?xml version="1.0" encoding="UTF-8" ?>
2 <shape xmlns:ohos=""
3        ohos:shape="rectangle">
4     <solid
5         ohos:color="#007DFF"/>
6     <corners
7         ohos:radius="4"/>
8 </shape>


1 <?xml version="1.0" encoding="UTF-8" ?>
2 <shape xmlns:ohos=""
3        ohos:shape="rectangle">
4     <stroke ohos:width="5"
5             ohos:color="gray"/>
6     <corners
7         ohos:radius="4"/>
8 </shape>



03. RadioContainer; It is the container of RadioButton. Only one RadioButton under its package is guaranteed to be selected;

    The common XML attribute of RadioContainer is inherited from: DirectionalLayout;
    >>> Associated events

Select a change event: setMarkChangedListener;

The specified item is checked:     container.mark(0) ;   /// Index starts from 0;

Clear the selected status: container.cancelMarks();

      Number of members:     container.getChildCount();

Take the member of a specific sequence: (RadioButton)container.getComponentAt(i)  


 04. CheckBox
The properties of CheckBox and RadioButton are basically the same;

> > > attribute settings

        Set whether to check: checkbox.setChecked(true);  

Check status switch:   checkbox.toggle();

 05. ProgressBar
The public XML attribute is inherited from Component, and its own attributes are as follows

  divider_lines_enabled, divider_lines_number: whether to display the separation line; And how many

  infinite, infinite_element:   Uncertain mode and contents under uncertain mode; (very fast)

min, max, progress: min, Max, current value;

orientation: arrangement direction;  

  background_instruct_element: background element; Attention and Background_element; (here, progress_width="50vp")


    progress_width: the width of the progress bar;



    progress_color: the color of the progress bar; The green part in the figure above;

  progress_element: progress bar background; If the color is configured, progress_color is almost gone


    progress_hint, progress_hit_text_alignment, progress_hint_text-color, progress_hint_text_size:   Configuration of text content on progress bar

   vice_progress, vice_progress_element: sub progress bar configuration

Step: step of progress;

> > > about the configuration of DividerLineColor:   (no attribute configuration in XML configuration)


       >>> Different effects when the progress is less than 15% (identify here for later understanding)


06. RoundProgressBar

    Common properties inherited from   ProgressBar; Its own attributes are as follows:

    start_angle, max_angle: the starting angle and maximum angle of the circular progress bar;















































Tags: switch

Posted on Sat, 30 Oct 2021 10:21:22 -0400 by Jragon