​

Hello everyone, I am your friend Peng Ge. Today, Peng Ge starts to study Hong Meng. I will write some articles regularly to share with you.

The previous original article interpreted the custom layout of hongmeng development layout, also to summarize the use of several layouts, which involves several interfaces and functions, with Settings and listeners from the defined layout.

Victory victory, the layout is finally complete, today add a chicken leg to treat yourself.

Components are the display components of the interface, the layout of the interface is a big plan, and components are each small layout effect in each layout.

Brief introduction:

Why use Text and TextField together? The correlation is high, as you can see from the following description.

Text is the component used to display strings as a Text area on the interface. As a basic component, Text has many extensions, the most common of which is the Text editing component TextField.

The parent class of all components is Component, and the common XML property of Text inherits from: Component

Text

XML attribute support, more attributes from the official website API

The attribute name

Product description

Use case

text

According to the text

Ohos :text=” timeout”

ohos:text=”$string:test_str”

hint

Tooltip text

Ohos :hint=” contact”

ohos:hint=”$string:test_str”

text_font

The font

ohos:text_font=”HwChinese-medium”

truncation_mode

Long text truncation

ohos:truncation_mode=”none”

ohos:truncation_mode=”ellipsis_at_start”

ohos:truncation_mode=”ellipsis_at_middle”

ohos:truncation_mode=”ellipsis_at_end”

ohos:truncation_mode=”auto_scrolling”

text_size

Text size

ohos:text_size=”16fp”

element_padding

Margin between text and image

ohos:element_padding=”8vp”

“

bubble_width

Text bubble width

ohos:bubble_width=”10vp”

bubble_height

Text bubble height

ohos:bubble_height=”10vp”

bubble_left_width

Text bubble left width

ohos:bubble_left_width=”10vp”

bubble_left_height

Text bubble left height

ohos:bubble_left_height=”10vp”

bubble_right_width

Text bubble right width

ohos:bubble_right_width=”10vp”

“

bubble_right_height

Text bubble right height

ohos:bubble_right_height=”20″

text_color

Text color

ohos:text_color=”#A8FFFFFF”

hint_color

Prompt text color

ohos:hint_color=”#A8FFFFFF”

selection_color

Select text color

ohos:selection_color=”#A8FFFFFF”

text_alignment

Text alignment

Can set the value of items such as listed in the table, you can also use the multiple combination “|”.

ohos:text_alignment=”top”

ohos:text_alignment=”top|left”

max_text_lines

Maximum number of lines of text

ohos:max_text_lines=”2″

text_input_type

Text input type

ohos:text_input_type=”pattern_null”

ohos:text_input_type=”pattern_text”

ohos:text_input_type=”pattern_number”

ohos:text_input_type=”pattern_password”

input_enter_key_type

Input key type

ohos:input_enter_key_type=”enter_key_type_unspecified”

ohos:input_enter_key_type=”enter_key_type_search”

ohos:input_enter_key_type=”enter_key_type_go”

ohos:input_enter_key_type=”enter_key_type_send”

auto_scrolling_duration

Automatic roll time

ohos:auto_scrolling_duration=”1000″

multiple_lines

Multi-line mode Settings

ohos:multiple_lines=”true”

auto_font_size

Supports automatic text font resizing

ohos:auto_font_size=”true”

scrollable

Whether text is scrollable

ohos:scrollable=”true”

text_cursor_visible

Whether the text cursor is visible.

ohos:text_cursor_visible=”true”

italic

Whether the text is in italic font

ohos:italic=”true”

padding_for_text

Sets whether the top and bottom of the text is white by default.

ohos:padding_for_text=”true”

additional_line_spacing

Line spacing to be increased

ohos:additional_line_spacing=”2″

line_height_num

Multiple of line spacing

Ohos: line_height_num = “1.5”

element_left

Text left icon

ohos:element_left=”#FFFFFFFF”

element_top

Top text icon

ohos:element_top=”#FFFFFFFF”

element_right

Icon to the right of text

ohos:element_right=”#FFFFFFFF”

element_bottom

Icon below text

ohos:element_bottom=”#FFFFFFFF”

element_start

Text start direction icon

ohos:element_start=”#FFFFFFFF”

element_end

Text end direction icon

ohos:element_end=”#FFFFFFFF”

element_cursor_bubble

Text cursor bubble graphics

ohos:element_cursor_bubble=”#FFFFFFFF”

element_selection_left_bubble

Select the bubble graph to the left of the text

ohos:element_selection_left_bubble=”#FFFFFFFF”

element_selection_right_bubble

Select the bubble graph to the right of the text

ohos:element_selection_right_bubble=”#FFFFFFFF”

There are too many attributes, you can take a general look, the following mainly explain a few key attributes, is also commonly used attributes.

1. Create a project

Create a project if you don’t see the first introductory column

2, the default layout resources/base/layout/ability_main. Add two buttons, XML is two functions respectively.

<? 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:alignment="center" ohos:orientation="vertical"> <Button ohos:id="$+id:text_option" ohos:height="match_content" ohos:width="match_content" ohos:background_element="#000000" ohos:padding="10vp" Ohos :layout_alignment="horizontal_center" oHOS :text=" text Component functions and usage "OHOS :text_color="# FFFFFF" oHOS :text_size=" 20VP "/> <Button ohos:id="$+id:textField_option" ohos:height="match_content" ohos:width="match_content" ohos:top_margin="50vp" ohos:background_element="#000000" ohos:padding="10vp" ohos:layout_alignment="horizontal_center" ohos:text="TextField Ohos :text_size="20vp" /> </DirectionalLayout>Copy the code

View the effect:

​

3. Click the function and Use of Text component to enter the Text function page and add a Text

Create Text in the ability_text. XML file in the resources/base/layout directory.

    <Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Text"/>
Copy the code

Above are the basic component properties, width, width, content, and ID.

(1) Set the background. The background color can be read from the configuration file (background_ability_text.xml), but not directly set the color value

<Text
    ohos:background_element="$graphic:background_ability_text"/>
Copy the code

(2) Set font size and color

ohos:text_size="20fp"
ohos:text_color="#000000"
Copy the code

(3) Set the font style and font bold

Ohos :italic="true" // Italic oHOs :text_weight="700" // bold oHOs :text_font="serif" // font styleCopy the code

(4) Set font, auto wrap, maximum number of lines and auto change

Ohos :max_text_lines="2" // Maximum number of lines, Ohos :auto_font_size="true" // Automatically adjust font size, if set to 2 lines, when more than, automatically reduce font sizeCopy the code

(5) text on its way

Ohos :text_alignment="bottom" // Alignment, left, right, up, downCopy the code

(6) Automatic text scrolling

ohos:scrollable="true"
Copy the code

Example code:

<? 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:alignment="center" ohos:orientation="vertical"> <! -- Base components, Ohos :width="match_content" ohos:height="match_content" Ohos :background_element="$graphic:background_ability_text" oHOs :text=" text" /> <! Ohos :width="match_content" ohos:height="match_content" ohos:top_margin="10vp" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" Ohos :text_color="#000000" ohos:text=" text, set font size and color "/> <! -- Set the font style and bold, Ohos :height="match_content" ohos:height="match_content" ohos:height="match_content" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" ohos:text_color="#000000" Ohos :italic="true" oHOs :text_weight="700" oHOs :text_font="serif" oHOs :text=" text, set the font style and bold "/> < text ohos:id="$+id:text4" ohos:width="match_content" ohos:height="match_content" ohos:top_margin="10vp" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" ohos:text_color="#000000" ohos:multiple_lines="true" ohos:max_text_lines="2" Ohos :text=" text, set line feed and maximum number of lines text, set line feed and maximum number of lines text, set line feed and maximum number of lines text, set line feed and maximum number of lines Text, set newline and maximum number of lines "/> <! Ohos :width="match_content" ohos:height="match_content" ohos:height="match_content" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" ohos:text_color="#000000" ohos:max_text_lines="2" ohos:auto_font_size="true" ohos:text_alignment="bottom" Ohos :text=" text-indentify "/> <! Ohos :height="match_content" ohos:height="match_content" ohos:height="match_content" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" ohos:text_color="#000000" Ohos: max_text_lines = "2" ohos: auto_font_size = "true" ohos: text_alignment = "top" | bottom ohos: text = "text, HongMeng development is a domestic handset system application" / > <! Ohos :height="match_content" ohos:height="match_content" ohos:height="match_content" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" ohos:text_color="#000000" Ohos: text_alignment = "top" | bottom ohos: text = "text, HongMeng application development is a domestic mobile phone system, < span style =" box-sizing: border-box; color: RGB (50, 50, 50); line-height: 21px; font-size: 14px! Important; white-space: normal;" ohos:top_margin="10vp" ohos:background_element="$graphic:background_ability_text" ohos:text_size="20fp" Ohos: text_color = "# 000000" ohos: text_alignment = "top" | bottom ohos: text = "text, HongMeng application development is a domestic mobile phone system, Hongmeng development is a domestic mobile phone system application,Text is a domestic mobile phone system application, hongmeng development is a domestic mobile phone system application, "/> </DirectionalLayout> </DirectionalLayout>Copy the code

Effect:

​

Text Field

TextField provides a text input field. The common XML attributes of TextField inherit from: Text

Ohos: Basement =”#000000″ OHOs: Basement =”#000000″

1. Click the functions and usage of the TextField component to enter the TextField function page and add a TextField.

Create a TextField in the ability_text_field.xml file in the Resources /base/ Layout directory.

<TextField
        ohos:id="$+id:textField"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_text_field"
        />
Copy the code

2, set the prompt text.

Ohos :hint=" please enter information..."Copy the code

3. Set Bubble

ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"
Copy the code

4. Set multi-line display

ohos:multiple_lines="true"
Copy the code

5. Set the available status

Ohos :enabled="true" // True is available, false is unavailableCopy the code

Set a baseline

ohos:basement="#000000"
Copy the code

7. Input key type (operation type displayed at the lower right corner of the keyboard during input)

​

8. Type of input content information (number, password, text)

​

Effect:

​

Complete code:

<? 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:alignment="center" ohos:background_element="#000000" ohos:orientation="vertical"> <TextField ohos:id="$+id:textField" ohos:height="match_content" ohos:width="200vp" ohos:background_element="$graphic:background_ability_text_field" ohos:text_size="18vp" ohos:padding="10vp" Ohos: text_alignment = "center | left" ohos: text_font = "# 000099" ohos: hint = "please enter the information..." ohos:element_cursor_bubble="$graphic:bubble" ohos:multiple_lines="true" ohos:enabled="true" ohos:basement="#000099" ohos:input_enter_key_type="enter_key_type_go" ohos:text_input_type="pattern_number" /> </DirectionalLayout>Copy the code

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

Pay attention to the public number [programmer chat programming], background reply [Hongmeng], you can obtain 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.