3.6 [Harmonyos Development] Component Checkbox

Author: Han Ru

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

Hongmeng Bus columnist

Checkbox allows you to check and uncheck.

Supported XML attributes

The Checkbox’s common XML attributes are inherited from: Text

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

The attribute name	Product description	The values	The values that	Use case
marked	Current state (checked or unchecked)	Boolean type	You can set true/false directly, or you can refer to a Boolean resource.	ohos:marked=”true” ohos:marked=”$boolean:true”
text_color_on	The text color in the selected state	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:text_color_on=”#FFFFFFFF” ohos:text_color_on=”&dollar; color:black”
text_color_off	The text color in the unselected state	Color type	The color value can be set directly, or the color resource can be referenced.	ohos:text_color_off=”#FFFFFFFF” ohos:text_color_off=”&dollar; color:black”
check_element	Status flag style	Element type	You can configure the color value directly, refer to the color resource or refer to the image resource under Media/Graphic.	ohos:check_element=”#000000″ ohos:check_element=”&dollar; color:black” ohos:check_element=”&dollar; media:media_src” ohos:check_element=”&dollar; graphic:graphic_src”

Create a Checkbox

Create a Checkbox in the XML file under the layout directory.

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:padding="20vp" ohos:background_element="#33ff0000" ohos:orientation="vertical"> <Checkbox Ohos :id="$+id:check_box1" ohos:height="match_content" ohos:width="match_content" ohos:text=" I am a checkbox" ohos:text_size="20fp" /> </DirectionalLayout>

Effect:

Set the Checkbox

1. Configure Checkbox and uncheckbox status flag styles in XML.

The sample code for the XML file in the layout directory is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:padding="20vp" ohos:background_element="#33ff0000" ohos:orientation="vertical"> <Checkbox Ohos :id="$+id:check_box1" ohos:height="match_content" ohos:width="match_content" ohos:text=" I am a checkbox" ohos:text_size="20fp" /> <Checkbox ohos:id="$+id:check_box2" ohos:height="match_content" ohos:width="match_content" Ohos :top_margin="20vp" ohos:check_element="$graphic:checkbox_check_element" ohos:text_size="20fp" /> </DirectionalLayout>

Create three files under the graphic: checkbox_check_element.xml, background_checkbox_checked. XML, and background_checkbox_empty.xml.

Checkbox_check_element.xml sample code:

<? The XML version = "1.0" encoding = "utf-8"? > <state-container xmlns:ohos="http://schemas.huawei.com/res/ohos"> <item ohos:state="component_state_checked" ohos:element="$graphic:background_checkbox_checked"/> <item ohos:state="component_state_empty" ohos:element="$graphic:background_checkbox_empty"/> </state-container>

Example code for background_checkbox_checked. XML:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#FF0000"/> </shape> <! -- Red is selected and the shape is square -->

Example code for background_checkbox_empty.xml:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#FFFFFF"/> </shape> <! -- Unchecked is white, shape is square -->

Configure the check and uncheck state effects in XML:

2, Set the color of Checkbox text when checked and unchecked.

<Checkbox
    ...
    ohos:text_color_on="#FF0000"
    ohos:text_color_off="#000000" />

The effect of setting the Checkbox text color:

3, Set Checkbox check status.

In Java code:

checkbox.setChecked(true);

4. Set the switch between different states: if the current state is selected, it will become unselected; If the current state is unselected, it will become selected.

In Java code:

checkbox.toggle();

5, Set the event to respond to the Checkbox status change.

/ / state indicates whether or not the checkbox selected. SetCheckedStateChangedListener ((component, the state) - > {/ / state change logic... });

Write an example

1. First, create a new layout file, demo_checkbox.xml, in the layout directory

The code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical" ohos:left_padding="40vp" ohos:top_padding="40vp"> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:orientation="vertical"> <Text Ohos :height="match_content" ohos:width="match_content" ohos:text_size="18fp" ohos:text=" Which of the following are your interests?" /> <Text ohos:id="$+id:text_answer" ohos:height="match_content" ohos:width="match_content" ohos:text_size="20fp" ohos:text_color="#FF0000" ohos:text="[]" /> </DirectionalLayout> <Checkbox ohos:id="$+id:check_box_1" Ohos :top_margin=" 40VP "ohos:height="match_content" ohos:width="match_content" ohos:text="A, game" ohos:text_size=" 20FP" ohos:text_color_on="#FF0000" ohos:text_color_off="#000000"/> <Checkbox ohos:id="$+id:check_box_2" ohos:top_margin="40vp" Ohos :height="match_content" ohos:width="match_content" ohos:text="B, money "ohos:text_size="20fp" ohos:text_color_on="#FF0000" ohos:text_color_off="#000000"/> <Checkbox ohos:id="$+id:check_box_3" ohos:top_margin="40vp" Ohos :height="match_content" ohos:width="match_content" ohos:text="C, woman "ohos:text_size="20fp" ohos:text_color_on="#FF0000" ohos:text_color_off="#000000" /> <Checkbox ohos:id="$+id:check_box_4" Ohos: top_size =" 40VP "ohos:height="match_content" ohos:width="match_content" ohos:text="D" ohos:text_size=" 20FP" ohos:text_color_on="#FF0000" ohos:text_color_off="black" /> </DirectionalLayout>

2, then we change the mainabilitySlice. Java code, first change the layout file to show:

super.setUIContent(ResourceTable.Layout_demo_checkbox);

3. Create a function that sets the background style of the dots in the Checkbox: square, red, unblack. You can also do this by setting the check_element attribute in the XML.

// Set the background of the Checkbox to square, check red, uncheck black. You can also do this by setting the check_element attribute in the XML. private StateElement elementButtonInit() { ShapeElement elementButtonOn = new ShapeElement(); elementButtonOn.setRgbColor(RgbPalette.RED); elementButtonOn.setShape(ShapeElement.RECTANGLE); ShapeElement elementButtonOff = new ShapeElement(); elementButtonOff.setRgbColor(RgbPalette.BLACK); elementButtonOff.setShape(ShapeElement.RECTANGLE); StateElement checkElement = new StateElement(); checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn); checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff); return checkElement; }

4. Then we create a member variable:

Private Set<String bb0 selectedSet = new HashSet<>();

5. Provide a method to display the results on the Text.

Private void showAnswerText () {Text AnswerText = (Text) findComponentById(ResourceTable. ID_Text_Answer); String answer = selectedSet.toString(); answerText.setText(answer); }

6. Then create a function to initialize the Checkbox.

Private void initCheckBox () {checkBox checkBox = (checkBox checkBox); findComponentById(ResourceTable.Id_check_box_1); checkbox1.setButtonElement(elementButtonInit()); checkbox1.setCheckedStateChangedListener((component, state) -> { if (state) { selectedSet.add("A"); } else { selectedSet.remove("A"); } showAnswer(); }); Checkbox checkbox2 = (Checkbox) findComponentById(ResourceTable.Id_check_box_2); checkbox2.setButtonElement(elementButtonInit()); checkbox2.setCheckedStateChangedListener((component, state) -> { if (state) { selectedSet.add("B"); } else { selectedSet.remove("B"); } showAnswer(); }); Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3); checkbox3.setButtonElement(elementButtonInit()); checkbox3.setCheckedStateChangedListener((component, state) -> { if (state) { selectedSet.add("C"); } else { selectedSet.remove("C"); } showAnswer(); }); Checkbox checkbox4 = (Checkbox) findComponentById(ResourceTable.Id_check_box_4); checkbox4.setButtonElement(elementButtonInit()); checkbox4.setCheckedStateChangedListener((component, state) -> { if (state) { selectedSet.add("D"); } else { selectedSet.remove("D"); } showAnswer(); // show results}); }

7. Finally, in the onStart() method, call this method:

        @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo_checkbox);
        initCheckbox();
    }

Run it.

Five, all the anti-election all the election

Let’s do all, none and negatives again.

1. First, create a new XML layout file, demo2_checkbox.xml, in the layout directory

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical" ohos:background_element="#eeeeee" ohos:left_padding="10vp" ohos:right_padding="10vp" > <Checkbox ohos:id="$+id:check_box_1" ohos:top_margin="40vp" ohos:height="match_content" Ohos :text_color_on="#FF0000" ohos:text_color_on="#FF0000" ohos:text_color_off="#000000"/> <Checkbox ohos:id="$+id:check_box_2" ohos:top_margin="40vp" ohos:height="match_content" Ohos :text_size=" 20FP "ohos:text_color_on="#FF0000" ohos:text_color_off="#000000"/> <Checkbox ohos:id="$+id:check_box_3" ohos:top_margin="40vp" ohos:height="match_content" Ohos: color_on="#FF0000" ohos: color_on="#FF0000" ohos: color_on="#FF0000" ohos:text_color_off="#000000" /> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:orientation="horizontal"> <Button ohos:id="$+id:btn1" ohos:height="match_content" ohos:width="match_content" Ohos :text_size=" 20FP "ohos:left_padding=" 20VP" ohos:right_padding=" 20VP "ohos:top_padding=" 10VP" ohos:bottom_padding="10vp" ohos:background_element="$graphic:capsule_button_element" ohos:margin="10vp" /> <Button Ohos :id="$+id:btn2" ohos:height="match_content" ohos:width="match_content" ohos:text=" "ohos:text_size="20fp" ohos:left_padding="20vp" ohos:right_padding="20vp" ohos:top_padding="10vp" ohos:bottom_padding="10vp" ohos:background_element="$graphic:capsule_button_element" ohos:margin="10vp" /> <Button ohos:id="$+id:btn3" Ohos :height="match_content" ohos:width="match_content" ohos:text=" backselect "ohos:text_size="20fp" ohos:left_padding="20vp" ohos:right_padding="20vp" ohos:top_padding="10vp" ohos:bottom_padding="10vp" ohos:margin="10vp" ohos:background_element="$graphic:capsule_button_element" /> </DirectionalLayout> <Text ohos:id="$+id:text_answer" ohos:height="match_content" ohos:width="match_content" ohos:text_size="20fp" ohos:text_color="#FF0000" ohos:text="[]" />  </DirectionalLayout>

2. Because we are using the Capsule button here, create the background file for the button under the graphic directory, capsule_button_element.xml:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="100"/> <solid ohos:color="#007CFD"/> </shape>

3. Since we are writing in the same project as the previous example, let’s create a new slice file under the slice directory: secondabilitySlice.java

/** * 1. Add the checkbox label control ** 2 to the XML layout file. In the corresponding abilitySlice, use findViewById() to find the checkbox object * * 3. 4. Operation button: when the button is clicked, select all, select incorrectly, select none. * /

Sample code:

package com.example.hanrucheckbox.slice; import com.example.hanrucheckbox.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import java.util.HashSet; import java.util.Set; /** * 1. Add the checkbox label control ** 2 to the XML layout file. In the corresponding abilitySlice, use findViewById() to find the checkbox object * * 3. 4. Operation button: when the button is clicked, select all, select incorrectly, select none. */ public class secondDabilitySlice extends abilitySlice {private Set<String selectedSet = new HashSet<>();  @Override protected void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_demo2_checkbox); }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Checkbox checkbox2 = (Checkbox) findComponentById(ResourceTable.Id_check_box_2); Checkbox checkbox3 = (Checkbox) findComponentById(ResourceTable.Id_check_box_3); / / for the checkbox add to monitor checkbox1. SetCheckedStateChangedListener (new AbsButton. CheckedStateChangedListener () {@ Override public void onCheckedChanged(AbsButton absButton, boolean b) { if (b) { selectedSet.add("A"); } else { selectedSet.remove("A"); } showAnswer(); }}); / / or using lambda expressions checkbox2. SetCheckedStateChangedListener ((component, the state) - > {the if (state) {selectedSet. Add (" B "); } else { selectedSet.remove("B"); } showAnswer(); }); checkbox3.setCheckedStateChangedListener((component, state)->{ if (state) { selectedSet.add("C"); } else { selectedSet.remove("C"); } showAnswer(); }); }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Button btn2 = (Button) findComponentById(ResourceTable.Id_btn2); Button btn3 = (Button) findComponentById(ResourceTable.Id_btn3); / / to a button to add click event btn1 setClickedListener (new Component. ClickedListener () {@ Override public void onClick (Component Component) {checkBox1.setChecked (true); checkbox2.setChecked(true); checkbox3.setChecked(true); selectedSet.add("A"); selectedSet.add("B"); selectedSet.add("C"); showAnswer(); }}); Btn2. SetClickedListener (new Component. ClickedListener () {@ Override public void onClick (Component Component) {/ / don't choose checkbox1.setChecked(false); checkbox2.setChecked(false); checkbox3.setChecked(false); selectedSet.remove("A"); selectedSet.remove("B"); selectedSet.remove("C"); showAnswer(); }}); Btn3. SetClickedListener (new Component. ClickedListener () {@ Override public void onClick (Component Component) {/ / reverse choice checkbox1.toggle(); // Toggle the checkbox status checkBox2.toggle (); checkbox3.toggle(); SelectedSet selectedSet.clear(); If (checkBox1.isChecked ()){selectedSet.add("A"); } if(checkbox2.isChecked()){ selectedSet.add("B"); } if(checkbox3.isChecked()){ selectedSet.add("C"); } showAnswer(); }}); } private void answerText () {Text AnswerText = (Text) findComponentById(ResourceTable. ID_Text_Answer); String answer = selectedSet.toString(); answerText.setText(answer); }}

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

3.6 [Harmonyos Development] Component Checkbox