3.3 HarmonyOS Developed TextField component

3.3 HarmonyOS Developed TextField component

Author: Han Ru

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

Hong Meng Bus columnist

TextField provides a text input field.

Supported XML attributes

The common XML attributes of TextField inherit from: Text

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

The attribute name	Product description	The values	The values that	Use case
basement	Input box baseline	Element type	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.	ohos:basement=”#000000″ ohos:basement=”$color:black“ ohos:basement=”$media:media_src“ ohos:basement=”$graphic:graphic_src“

Create TextField

Create a TextField in the XML file in the Layout directory.

<! -- TextField: used to receive text messages from the user -->
<TextField
        ohos:id="$+id:textField1"
        ohos:height="40vp"
        ohos:width="200vp"
        />
Copy the code

Get the contents of the input box:

String content = textField.getText();
Copy the code

3. Set TextField

• 1. Set the TextField background in XML.

The following is an example of the code for an XML file in the graphic directory (for example, background_text_field.xml) :

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#EEEEEE"/>
</shape>
Copy the code

Ohos: the radius = “40”, rounded corners

The following is an example of the code for an XML file in the Layout directory:

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

Effect:

• 2. Set prompt text

<! Ohos :hint=" Please enter your name "; ohos:hint=" Please enter your name "; ohos: Hint =" Please enter your name"
<TextField
        .
        ohos:hint="Please enter your name"
        ohos:text_alignment="center"
        ohos:text_size="18fp"
        />
Copy the code

The effect

• 3. Set Bubble

Graphic XML file, ele_cursor_bubble. XML:

      
<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>
Copy the code

The following is an example of the code for an XML file in the Layout directory:

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

        />
Copy the code

Effect:

• 4. Set the inside margin of the TextField

To make the effect more obvious, we reposition a TextField, and note the difference between the width and height attributes of the TextField above:

<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"
        />
Copy the code

The effect is as follows:

​

• 5. Set the input text type

If we have a password box and want the input to be cryptic, we set the text_input_type property.

<TextField
        .
        ohos:text_input_type="pattern_number"
        />
Copy the code

If set to a numeric box, a numeric keypad will pop up:

​

If you set the property value to pattern_password, you can enter the password.

<! -- oHOs :text_input_type, set the input type to "pattern_password", password box to "pattern_number", number box -->
    <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_input_type="pattern_password"
        ohos:text_size="18fp"
        ohos:left_padding="36vp"
        ohos:right_padding="36vp"
        ohos:top_padding="6vp"
        ohos:bottom_padding="6vp"
        />
Copy the code

The password box has the following effects:

• 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 type 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"
        />
Copy the code

Effect:

• 7. 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 a baseline"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="20vp"
        ohos:text_size="18fp"
        ohos:padding="14vp"
        ohos:basement="#FF0000"
        />
Copy the code

Result: a red baseline

• 8. Set TextField to be unavailable

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

<TextField
        .
        ohos:enabled="false"
        />
Copy the code

It can also be set by Java code.

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

• 9. Respond to changes in focus

textField.setFocusChangedListener((component, isFocused) -> {
    
    if (isFocused) { 
        // Get focus. }else { 
        // Lose focus. }});Copy the code

Write an example

When the login button is clicked, an error message will appear and the state of the TextField will change.

As shown in figure:

1. In the Layout directory, create a new layout file: ability_text_field.xml

      
<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>
Copy the code

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

Background_text_field2.xml examples of code:

      
<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>
Copy the code

Background_btn.xml examples of code:

      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="35"/>
    <solid
        ohos:color="white"/>
</shape>
Copy the code

2. Code in Java

First we modify the onStart() method in MainAbilitySlice to load the display layout file:

				// Load the layout file to display
        super.setUIContent(ResourceTable.Layout_ability_text_field);
Copy the code

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

 // When you click login, change the style of the corresponding component
        Button button = (Button) findComponentById(ResourceTable.Id_ensure_button);
        button.setClickedListener((component -> {
            // Display error message Text
            Text text = (Text) findComponentById(ResourceTable.Id_error_tip_text);
            text.setVisibility(Component.VISIBLE);

            // Displays the style of TextField in error state
            ShapeElement errorElement = new ShapeElement(this, ResourceTable.Graphic_background_text_field_error);
            TextField textField = (TextField) findComponentById(ResourceTable.Id_name_textField);
            textField.setBackground(errorElement);

            // TextField loses focus
            textField.clearFocus();
        }));
Copy the code

More:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com