An overview of the

In this chapter, we will learn the basic properties of the Text and TextField controls and how to use them. Text is the component used to display strings as a Text area on the interface. TextField provides a text input field. TextField inherits from Text and extends functions in the Text control. Let’s first look at the creation property of the Text control and its use.

1. Text control

The Text control is a component that displays strings, and is used to display Text on the interface.

Code implementation:

    <Text
        ohos:id="$+id:tv_test"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:bottom_padding="5vp"
        ohos:end_padding="8vp"
        ohos:start_padding="8vp"
        ohos:text="$string:test_content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:top_padding="5vp"/>
Copy the code

1.1. XML attributes commonly used in Text controls

attribute describe instructions
text According to the text
hint Tooltip text
text_font The font The font style that can be set
truncation_mode Long text truncation If the text is too long, use an ellipsis to truncate the text box xx
text_size Text size
element_xxx Inserts the icon in the Text control Example: element_left: icon to the left of text.
bubble_xx Implementing text bubbles For example, bubble_width is the text bubble width. Other values are the same.
text_color Text color
hint_color Prompt text color
selection_color Select text color
text_alignment Text alignment
max_text_lines Maximum number of lines of text
text_input_type Text input type Pattern_null: Indicates that no text input type is specified and that the default text input type is content mode. Pattern_text: Indicates that the text input type is plain text mode. Pattern_number: Indicates that the text input type is number. Pattern_password: Indicates that the text input type is password.
input_enter_key_type Input key type Enter_key_type_unspecified: Indicates that the input key type is unspecified. The default key type is used. Enter_key_type_search: enter_key_type_search. Enter_key_type_go: indicates the type of the input key that performs the go action. Enter_key_type_send: indicates the type of the input key that performs the send action.
auto_scrolling_duration Automatic roll time The value cannot be less than 0, in ms.
multiple_lines Multi-line mode Settings
auto_font_size Supports automatic text font resizing
scrollable Whether text is scrollable
text_cursor_visible Whether the text cursor is visible. This value is always false only if it is configurable on editable components.
italic Whether the text is in italic font
padding_for_text Sets whether the top and bottom of the text is white by default. The default value is true, which indicates that the default whitespace is left blank, and false indicates that the top and bottom are left blank
additional_line_spacing Line spacing to be increased
line_height_num Multiple of line spacing
element_cursor_bubble Text cursor bubble graphics are configurable only on editable components Can directly configure the color value, also can reference color resources or reference media/graphic image resources.
element_selection_left_bubble Select the bubble graph to the left of the text Same as above
element_selection_right_bubble Select the bubble graph to the right of the text Same as above
text_weight Word weighing 100-700 Used for bold fonts

1.2 case analysis

Let’s take a closer look at the Text control through a few common examples.

1.2.1. Text control uses ellipsis to truncate the end of the Text box

Code implementation:

<Text ohos:id="$+id:tv_test" ohos:height="match_content" ohos:width="300vp" ohos:center_in_parent="true" ohos:background_element="$graphic:shape_bottom_bg" ohos:bottom_padding="5vp" ohos:end_padding="8vp" ohos:start_padding="8vp" ohos:max_text_lines="1" ohos:truncation_mode="ellipsis_at_end" ohos:text="$string:test_content"  ohos:text_alignment="center" ohos:text_size="20fp" ohos:top_padding="5vp"/>Copy the code

1.2.2 Automatically adjust font size

After multiple clicks

Code implementation:

XML code:  <Text ohos:id="$+id:tv_test" ohos:height="50vp" ohos:width="100vp" ohos:center_in_parent="true" ohos:background_element="$graphic:shape_bottom_bg" ohos:bottom_padding="5vp" ohos:end_padding="8vp" ohos:start_padding="8vp" ohos:text="Text" ohos:text_alignment="center" ohos:text_weight="700" ohos:auto_font_size="true" Ohos :italic="true" oHOs :text_size="20fp" oHOs :top_padding="5vp"/>  Text text = (Text) findComponentById(ResourceTable.Id_tv_test); Text. SetAutoFontSizeRule (10100, 1); text.setClickedListener((component -> { text.setText(text.getText()+"T"); }));Copy the code

To do this, you must add the auto_font_size attribute to the XML with a value of true. The font size is limited by a setAutoFontSizeRule in Java code, in units of px. Note: If the width and height of the Text control is set to match_content, the control size changes as well.

1.2.3 Text control to achieve running lantern effect

When the text is too long, you can set the horse-light effect to achieve text scrolling display. The prerequisite is to disable text newline and set the maximum number of displayed lines to 1. The prerequisite is met by default.

Code implementation:

XML code:  <Text ohos:id="$+id:tv_test" ohos:height="match_content" ohos:width="300vp" ohos:center_in_parent="true" ohos:background_element="$graphic:shape_bottom_bg" ohos:bottom_padding="5vp" ohos:end_padding="8vp" ohos:start_padding="8vp" ohos:text="$string:test_content" ohos:text_alignment="center" ohos:text_weight="700" ohos:multiple_lines="false" ohos:max_text_lines="1" ohos:italic="true" ohos:text_size="20fp" ohos:top_padding="5vp"/> Private void testText(){Text Text = (Text) findComponentById(resourcetable.id_tv_test); private void testText(){Text Text = (Text) findComponentById(resourcetable.id_tv_test); Text.settruncationmode (text.truncationmode.auto_scrolling); / / loop rolling text. SetAutoScrollingCount (text. AUTO_SCROLLING_FOREVER); // Start scrolling for text.startautoscrolling (); }Copy the code

2, TextField control

The TextField control inherits from the Text control, so it has the same properties as the Text control. Here we introduce the TextField control’s unique basement property and the related text bubble bubbLE_XX property.

2.1 basement property and BubbLE_XX property

attribute describe The values
basement Input box baseline Can directly configure the color value, also can reference color resources or reference media/graphic image resources.
bubble_xx Implementing text bubbles For example, bubble_width is the text bubble width. Other values are the same.

By default, the TextField control does not display this line. This is the horizontal line at the bottom of the edit box. So we have to add basement manually.The code is as follows:

    <TextField
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:hint="$string:test_content"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        ohos:center_in_parent="true"
        ohos:text_size="20fp"
        ohos:basement="#000000"
        />
Copy the code

In the example above, you must be wondering why there is a circle next to the input box when it is in focus. This is called a text bubble, and we can use the bubble_xxx property to align and control it. For example, if we want the bubble to disappear, we can set the width and height of the bubble to 0vp. Effect:Code implementation:

    <TextField
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:hint="$string:test_content"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        ohos:center_in_parent="true"
        ohos:text_size="20fp"
        ohos:basement="#000000"
        ohos:bubble_height="0vp"
        ohos:bubble_width="0vp"
        />
Copy the code

2.2. Set the background for TextField control with ShapeElement

In the “Project” window, open Entry > SRC > Main > Resources > Base and right click on the “Graphic” folder. In this folder, we write the background for the control in XML format. For example, create shape_text_field_white_bg.xml as the TextField control background. The implementation effect is as follows:

The code is as follows:

Shape_text_field_white_bg.xml code: <? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#FFFFFF"/> <corners Ohos :radius="50vp"/> </shape>  <TextField ohos:height="match_content" ohos:width="match_content" ohos:min_width="200vp" ohos:hint="$string:test_content" ohos:multiple_lines="false" ohos:max_text_lines="1" ohos:center_in_parent="true" ohos:text_size="20fp" ohos:start_padding="12vp" ohos:end_padding="12vp" ohos:top_padding="5vp" ohos:bottom_padding="5vp"  ohos:background_element="$graphic:shape_text_field_white_bg" />Copy the code

When defining shape related XML files, the oHOs: Shape =” XXX “attribute must be written, otherwise it will not display properly.

2.3. Respond to changes in focus

private void testTextField() { TextField textField = (TextField) findComponentById(ResourceTable.Id_tf_test); TextField. SetFocusChangedListener ((component, isFocused) - > {the if (isFocused) {/ / access to focus} else {/ / lost focus}}); }Copy the code

3, summary

Above we learned about the common properties of the Text and TextField controls and their use. We just need to read these common attributes several times when we are free, in the process of development we will be very handy, there is no need to memorize, forget can come back to check. We’ve also experimented with common usage scenarios for these controls in everyday development, and they’re easy to use.

Thinking summary

  1. What XML attributes are commonly used for Text and TextField controls?
  2. How to truncate long text with ellipsis at the end?
  3. How to achieve automatic font size adjustment and run the realization of the lantern?
  4. What is text bubble and how to set text bubble size?