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="http://schemas.huawei.com/res/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="http://schemas.huawei.com/res/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="http://schemas.huawei.com/res/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)

　　　　progressbar.setDividerLineColor(Color.MAGENTA);
　　　　

       >>> 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;