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;