HarmonyOS — Text Component introduction

“This is the 26th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

A list,

Text is the component used to display strings as a Text area on the interface. Text as a basic component, there are many extensions, common Button component Button, Text editing component TextField.

The Text component inherits from Componet.

Huawei official study address:

Developer.harmonyos.com/cn/docs/doc…

Second, properties,

The Text component supports a lot of properties, but because they are so important, I will implement each one according to the official documentation.

2.1 the text

The attribute name	Product description	The values	The values that	Use case
text	According to the text	Type string	You can set text strings directly or reference string resources (recommended).	Ohos :text=”$string:test_str”

Code demo:

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

Display effect:

2.2 text_size

The attribute name	Product description	The values	The values that	Use case
text_size	Text size	A float	A float type representing the font size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced.	ohos:text_size=”30″ohos:text_size=”16fp”ohos:text_size=”$float:size_value”

Code demo:

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

Display effect:

2.3 text_color

The attribute name	Product description	The values	The values that	Use case
text_color	Text color	Color type	You can set the color value directly or reference the color resource.	ohos:text_color=”#A8FFFFFF”ohos:text_color=”$color:black”

Code demo:

<Text ohos:id="$+id:text" ohos:height="match_content" ohos:width="match_content" ohos:text="blue" ohos:text_size="100px"  ohos:text_color="blue" />Copy the code

Demo effect:

HEX effect:

2.4 text_font

The attribute name	Product description	The values	The values that	Use case
text_font	The font	sans-serif	The fonts that can be set are listed in the table.	ohos:text_font=”HwChinese-medium”
sans-serif-medium
HwChinese-medium
sans-serif-condensed
sans-serif-condensed-medium
monospace

Code demo:

<Text ohos:id="$+id: Text "ohos:height="match_content" ohos:width="match_content" ohos: Text =" eight" ohos: Text ="100px" ohos:text_color="#000000" ohos:text_font="HwChinese-medium" />Copy the code

Demo effect:

2.5 italic

The attribute name	Product description	The values	The values that	Use case
italic	Whether the text is in italic font	Boolean type	You can set true/false directly or refer to a Boolean resource.	ohos:italic=”true”ohos:italic=”$boolean:true”

Code demo:

<Text ohos:id="$+id: Text "ohos:height="match_content" ohos:width="match_content" ohos: Text =" eight" ohos: Text ="100px" ohos:text_color="#000000" ohos:text_font="sans-serif" ohos:italic="true" />Copy the code

Demo effect:

2.6 text_weight

The attribute name	Product description	The values	The values that	Use case
text_weight	Word again	The integer types	An integer type representing the font size. You can also reference an INTEGER resource.	ohos:text_weight=”100″ohos:text_weight=”$integer:100″

Code demo:

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Liziba"
        ohos:text_size="100px"
        ohos:text_color="#0000FF"
        ohos:text_font="serif"
        ohos:italic="true"
        ohos:text_weight="100"
        />
Copy the code

Demo effect:

text_weight = 100

text_weight = 600

2.7 background_element

Common backgrounds, such as common text backgrounds and button backgrounds, can be placed in a graphic directory in XML format.

In the Project window, open “Entry > SRC > Main > Resources > Base”, right-click the “Graphic” folder, choose “New > File” and name it “background_text.xml”. Define the background of the text in background_text.xml.

---

Code demo:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <! <corners ohos:radius="20px"/> <! <solid ohos:color="#878787"/> </shape>Copy the code

Demo effect:

2.8 text_alignment

The attribute name	Product description	The values	The values that	Use case
text_alignment	Text alignment	left	Indicates that text is aligned to the left.	You can set the value as listed in the table or use the
top	Indicates that text is aligned at the top.
right	Indicates that text is justified to the right.
bottom	Indicates that text is aligned against the bottom.
horizontal_center	Indicates that text is horizontally centered.
vertical_center	Indicates that text is vertically centered.
center	Indicates that text is centered.
start	Indicates that text is aligned against the beginning.
end	Indicates that the text is aligned against the end.

Code demo:

<! < span style =" box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px! Important; white-space: normal;" ohos:text="Liziba" ohos:text_size="100px" ohos:text_color="#0000FF" ohos:text_font="serif" ohos:italic="true" ohos:text_weight="100" ohos:left_margin="15vp" ohos:bottom_margin="15vp" ohos:right_padding="15vp" ohos:left_padding="15vp" ohos:text_alignment="bottom|horizontal_center" ohos:background_element="$graphic:background_text" />Copy the code

Demo effect:

2.9 multiple_lines

The attribute name	Product description	The values	The values that	Use case
multiple_lines	Multi-line mode Settings	Boolean type	You can set true/false directly or refer to a Boolean resource.	ohos:multiple_lines=”true”ohos:multiple_lines=”$boolean:true”

Code demo:

<! < span style =" max-width: 100%; clear: both; min-height: 1em "style =" box-sizing: border-box; ohos:text_size="100px" ohos:text_color="#0000FF" ohos:text_font="serif" ohos:italic="true" ohos:text_weight="100" ohos:max_text_lines="2" ohos:multiple_lines="true" ohos:background_element="$graphic:background_text" />Copy the code

Demo effect:

2.10 max_text_lines

The attribute name	Product description	The values	The values that	Use case
max_text_lines	Maximum number of lines of text	The integer types	You can set integer values directly or refer to an INTEGER resource.	ohos:max_text_lines=”2″ohos:max_text_lines=”$integer:two”

Code demo:

<! < span style =" max-width: 100%; clear: both; ohos:height="match_content" ohos:text="LizibaLizibaLiziba" ohos:text_size="100px" ohos:text_color="#0000FF" ohos:text_font="serif" ohos:italic="true" ohos:text_weight="100" ohos:multiple_lines="true" ohos:max_text_lines="2" ohos:background_element="$graphic:background_text" />Copy the code

Demo effect:

2.11 auto_font_size

The attribute name	Product description	The values	The values that	Use case
auto_font_size	Supports automatic text font resizing	Boolean type	You can set true/false directly or refer to a Boolean resource.	ohos:auto_font_size=”true”ohos:auto_font_size=”$boolean:true”

Code demo:

Method one:

<! Max_text_lines ="1" -- auto_font_size Automatically adjusts text size max_text_lines="1" < span style =" box-sizing: border-box; color: RGB (50, 50, 50); line-height: 21px; white-space: normal;" ohos:text_size="100px" ohos:text_color="#0000FF" ohos:text_font="serif" ohos:italic="true" ohos:text_weight="100" ohos:max_text_lines="1" ohos:auto_font_size="true" ohos:background_element="$graphic:background_text" />Copy the code

Demo effect:

Method 2:

<! Max_text_lines ="1" -- auto_font_size Automatically adjusts text size max_text_lines="1" < span style =" box-sizing: border-box; color: RGB (50, 50, 50); line-height: 21px; white-space: normal;" ohos:text_size="100px" ohos:text_color="#0000FF" ohos:text_font="serif" ohos:italic="true" ohos:text_weight="100" ohos:max_text_lines="1" ohos:auto_font_size="true" ohos:background_element="$graphic:background_text" />Copy the code

package com.liziba.demo.slice; import com.liziba.demo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.agp.components.Component; import ohos.agp.components.Text; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Text Text = (Text) this.findComponentById(resourcetable.id_text); text.setClickedListener(component -> { text.setText(text.getText() + "L"); }); }}Copy the code

---

Demo effect:

Before I click

After a series of clicks

2.12 AutoScrolling

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

Code demo:

<Text
      ohos:id="$+id:text"
      ohos:width="300px"
      ohos:height="match_content"
      ohos:text="LizibaLizibaLizibaLiziba"
      ohos:text_size="100px"
      ohos:text_color="#0000FF"
      ohos:text_font="serif"
      ohos:italic="true"
      ohos:text_weight="100"
      ohos:background_element="$graphic:background_text"
      />
Copy the code

package com.liziba.demo.slice; import com.liziba.demo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Component; import ohos.agp.components.Text; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Text text = (Text) this.findComponentById(ResourceTable.Id_text); // text. SetTruncationMode (text. TruncationMode.AUTO_SCROLLING); / / remain the state of automatic scrolling text. SetAutoScrollingCount (text. AUTO_SCROLLING_FOREVER); // Start scrolling for text.startautoscrolling (); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

Demo effect: