3.3【 Harmonyos Development 】 TextField

Author: Han Ru

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

Hongmeng Bus columnist

TextField provides a kind of text input field.

Supported XML attributes

The common XML attributes of a TextField are inherited from: Text

TextField’s own XML properties are shown in the following table:

The attribute name	Product description	The values	The values that	Use case
basement	Input Baseline	Element type	You can configure the color value directly, refer to the color resource or refer to the image resource under Media/Graphic.	ohos:basement=”#000000″ ohos:basement=”`$color:black`“ ohos:basement=”`$media:media_src`“ ohos:basement=”`$graphic:graphic_src`“

Create a TextField

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

<! --> < textField ohos:id="$+id:textField1" ohos:height=" 40VP "ohos:width=" 200VP" />

Gets the contents of the input box:

String content = textField.getText();

Set the TextField

1. Set the background of the TextField in XML.

Examples of code for XML files in the graphic directory (example: background_text_field.xml) are as follows:

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

Ohos: the radius = “40”, rounded corners

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

<TextField
        ...
        ohos:background_element="$graphic:background_text_field"
        ohos:layout_alignment="center"
        ohos:top_margin="20vp"
        />

Effect:

2. Set prompt text

<! Ohos :hint=" Please input your name ", hint, hint, hint, hint to the user to change the input field, when the user focus to type, hint will automatically disappear --> <TextField... Ohos :hint=" Please Enter Your Name "ohos: Text_Alignment ="center" ohos: Text_Size =" 18FP" />

The effect

< img SRC = “https://img.chengxuka.com/textfieldyunxing1.gif” Alt = “2021-06-08 10.46.15” style = “zoom: 50%;” />

3. Set Bubble

The XML file in the graphic directory, ele_cursor_bubble.xml:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="40"/> <solid ohos:color="#6699FF"/> <stroke ohos:color="#0066FF" ohos:width="10"/> </shape>

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

<TextField
        ...
        ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"

        />

Effect:

4. Set the padding of TextField

To make it more obvious, let’s replace a TextField with the width and height properties of the previous TextField:

<TextField ohos:height="match_content" ohos:width="match_content" Ohos :background_element="$graphic:background_text_field" ohos:hint=" Please enter your password "ohos:layout_alignment="horizontal_center" ohos:top_margin="20vp" ohos:text_size="18fp" ohos:left_padding="36vp" ohos:right_padding="36vp" ohos:top_padding="6vp" ohos:bottom_padding="6vp" />

The effect is as follows:

5, Set the input text type

If we set the password box, and we want the input to be ciphertext, then we set the text_input_type property.

<TextField
        ...
        ohos:text_input_type="pattern_number"
        />

If set to number box, the numeric keypad will pop up:

If you set the property value to Pattern_Password, you are ready to enter your password.

<! -- ohos:text_input_type, you can set type "pattern_password", password box "pattern_number", Ohos :height="match_content" ohos:width="match_content" Ohos :background_element="$graphic:background_text_field" ohos:hint=" Please enter your password "ohos:layout_alignment="horizontal_center" ohos:top_margin="20vp" ohos:text_input_type="pattern_password" ohos:text_size="18fp" ohos:left_padding="36vp" ohos:right_padding="36vp" ohos:top_padding="6vp" ohos:bottom_padding="6vp" />

The password box will look like this:

6. Set the multi-line display of TextField

<TextField ohos:height="100vp" ohos:width="200vp" ohos:background_element="$graphic:background_text_field" Ohos :element_cursor_bubble="$graphic:ele_cursor_bubble" ohos:hint=" Please input what you want to say: " ohos:layout_alignment="horizontal_center" ohos:top_margin="20vp" ohos:text_size="18fp" ohos:padding="14vp" ohos:multiple_lines="true" />

Effect:

Set a baseline

<TextField ohos:height="60vp" ohos:width="200vp" ohos:background_element="$graphic:background_text_field" Ohos :element_cursor_bubble="$graphic:ele_cursor_bubble" ohos:hint=" Set baseline "ohos:layout_alignment="horizontal_center" ohos:top_margin="20vp" ohos:text_size="18fp" ohos:padding="14vp" ohos:basement="#FF0000" />

Effect: A red baseline

8. Set the TextField to be unavailable

The Enable property of TextField controls whether the TextField is available. When set to false, the TextField can no longer be entered.

<TextField
        ...
        ohos:enabled="false"
        />

It can also be set in Java code.

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);
textField.setEnabled(false);

9. Respond to changes in focus

TextField. SetFocusChangedListener ((component, isFocused) - > {the if (isFocused) {/ / access to focus... } else {// lose focus... }});

Write an example

When the Login button is clicked, an error message will appear and the state of the TextField will be changed.

As shown in figure:

1, first in the layout directory, create a new layout file: ability_text_field.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:background_element="#FF000000" ohos:orientation="vertical"> <StackLayout ohos:top_margin="60vp" ohos:width="match_parent" ohos:height="match_content" ohos:layout_alignment="center"> <TextField ohos:id="$+id:name_textField" ohos:width="match_parent" ohos:height="match_content" ohos:multiple_lines="false" ohos:left_padding="24vp" ohos:right_padding="24vp" ohos:top_padding="8vp" ohos:bottom_padding="8vp" ohos:min_height="44vp" ohos:text_size="18fp" ohos:layout_alignment="center" ohos:text_alignment="vertical_center" ohos:background_element="$graphic:background_text_field2" ohos:hint="Enter phone number or email" /> <Text ohos:visibility="hide" ohos:id="$+id:error_tip_text" ohos:width="match_content" ohos:height="match_content" ohos:top_padding="8vp" ohos:bottom_padding="8vp" ohos:right_margin="20vp" ohos:text="Incorrect account or password" ohos:text_size="18fp" ohos:text_color="red" ohos:layout_alignment="right"/> </StackLayout> <TextField ohos:top_margin="40vp" ohos:id="$+id:password_text_field" ohos:width="match_parent" ohos:height="match_content" ohos:multiple_lines="false" ohos:left_padding="24vp" ohos:right_padding="24vp" ohos:top_padding="8vp" ohos:bottom_padding="8vp" ohos:min_height="44vp" ohos:text_size="18fp" ohos:layout_alignment="center" ohos:text_alignment="vertical_center" ohos:background_element="$graphic:background_text_field2" ohos:hint="Enter password" /> <Button ohos:top_margin="40vp" ohos:id="$+id:ensure_button" ohos:width="120vp" ohos:height="35vp" ohos:background_element="$graphic:background_btn" ohos:text="Log in" ohos:text_size="20fp" ohos:layout_alignment="horizontal_center"/> </DirectionalLayout>

We then create the desired XML file in the graphic directory,

Examples of code for background_text_field2.xml:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="40"/> <solid ohos:color="white"/> <stroke ohos:color="black" ohos:width="6"/> </shape>

Examples of code for background_btn.xml:

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

2. Code in Java

MainabilitySlice’s onStart() method is used to load the layout file displayed:

// To load the layout file super.setUICContent (ResourceTable. Layout_ability_Text_Field);

Then get the button and set the listener for the click event. The logic of the response processing is as follows: display an error message Text hidden in the layout file and change the background style of TextField:

// When login is clicked, change the corresponding component's style Button Button = (Button) findComponentById(ResourceTable. ID_ENsure_Button); Button. SetClickedListener ((component - > {/ / show the error message Text Text Text = (Text) findComponentById(ResourceTable.Id_error_tip_text); text.setVisibility(Component.VISIBLE); ShapeElement errorElement = new shapeElement (this, shapeElement) ResourceTable.Graphic_background_text_field_error); TextField textField = (TextField) findComponentById(ResourceTable.Id_name_textField); textField.setBackground(errorElement); // TextField loses focus TextField. ClearFocus (); }));

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.3【 Harmonyos Development 】 TextField