​

Guide language: hello, everyone, I am your friend Peng ge, today primary school younger brother asked me a question, said why the login interface did not save the user’s account password operation? Today we’re going to talk about checking boxes to determine if you remember your password.

The last original article analyzed the use and function of RadioButton. To repeat, a radio button is an operation that allows the user to select only one option at a time.

Today, check boxes can be used as a status record, such as a login page that has a check box for remembering passwords.

Another option is to collect information from multiple options.

​

Let’s start today’s article, as usual, by saying the following:

1, Introduction 2, used properties 3, Actual combat 4, style Settings 5, login interface add check box

Introduction to the

Checkbox allows you to check and deselect checkboxes.

Study Purpose:

1, master how to add Checkbox in hongmeng

2. Master the common properties of Checkbox

3, master Checkbox check state change events

The Checkbox’s brief introduction:

CheckBox, like Button, is also an ancient control, its advantage is that the user does not need to fill in specific information, only gently click, the disadvantage is that there are only “yes” and “no” two cases, but we often use this feature of it, to obtain some information of the user.

For example, in a login interface, use it to determine whether a user password needs to be recorded.

Attributes used

The common XML attribute of the Checkbox inherits from: Text as does the other components

Why do so many components share attributes with Text?

Do many people have this question? The short answer is because each of these component parent classes ends up being Text, as you’ll see in the next video.

​

We do not understand the message, do not ask, this is a taboo.

In actual combat

Better to write a few lines of code and run with it.

Create a Checkbox

<Checkbox ohos:id="$+id:check_box" ohos:height="match_content" ohos:width="match_content" ohos:text=" Checkbox" ohos:text_size="20fp" />Copy the code

1. Add a check box to display text by default. 2

2, you can also add color to the text of the check box

ohos:text_color_on="#00AAEE"ohos:text_color_off="#549883"
Copy the code

1, you can add checkbox text checked and unchecked color effects

3. Check box status events

Checkbox checkbox1 = (Checkbox) findComponentById(ResourceTable.Id_check_box); checkbox1.setButtonElement(elementButtonInit()); checkbox1.setCheckedStateChangedListener((component, state) -> { if (state) { selectedSet.add("A"); } else { selectedSet.remove("A"); }});Copy the code

1. Initialize the check box and set the background, which can be a color value or a picture. 2

Check out the previous article if you can’t remember how to set the image background.

Add a check box on the login page

The checkbox was added to the layout file

<Checkbox ohos:id="$+id:save_password" ohos:height="match_content" ohos:width="match_content" Ohos :check_element="$graphic:checkbox_check_element" oHOs :left_margin="15vp" oHOs :top_margin="10vp" oHOs :text=" Remember password" ohos:text_size="20vp"/>Copy the code

Add click events and data store operations to the checkbox

Checkbox save_password = (Checkbox) findComponentById(ResourceTable.Id_save_password); save_password.setCheckedStateChangedListener((component, state) -> { if (state) { selectedSet.add(input_password.getText().toString()); } else { selectedSet.remove(input_password.getText().toString()); }});Copy the code

Full effect:

​

Old rules code can not be less, otherwise small partners should say I stingy. Checkbox: gitee.com/codegrowth/…

Login page: gitee.com/codegrowth/…

Pay attention to the public number [programmer chat programming], the background reply “Hongmeng”, you can get thousands of hongmeng open source components.

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.

​