This is the 30th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021
Xiao CAI tried to build a basic [login] page through XML before, which used Image/Button/Text/TextField and several most commonly used widgets; Try to learn side dishes one by one;
Text
Text is the most common and frequently used control in most languages. Text in HarmonyOS inherits from Component; The side dish is understood as the relationship between TextView and View in Android. So properties in Component are almost always available in Text;
The side dish is to try some properties that are unique to Text Text compared to Component;
Case try
1. text & hint
Text and hint are easy to understand, being the text content and the default hint text content, respectively.
<Text ohos:height="match_content" ohos:width="match_parent" ohos: Text =" ohos:text_size="16fp"/> ohos:hint= hint"Copy the code
2. text_color & hint_color
Text_color and hint_color correspond to the text font color and the default prompt text font color respectively.
<Text ohos:height="match_content" ohos:width="match_parent" ohos: Text =" ohos:text_color="$ohos:color:id_color_badge_red" ohos:text_size="16fp"/> <Text ohos:height="match_content" Ohos :hint=" $ohos:color:id_color_bottom_tab_icon" ohos:text_size="16fp"/>Copy the code
3. text_size & text_font
Text_size corresponds to the text size, which also applies to the default prompt text; Text_font Indicates the text font, such as sans-serif/sans-serif-medium/hwChinese-medium.
<Text ohos:height="match_content" ohos:width="match_parent" ohos: Text =" ohos:text_color="$ohos:color:id_color_badge_red" ohos:text_size="20fp"/> <Text ohos:height="match_content" Ohos :width="match_parent" ohos:text=" match_parent" ohos:text_color=" id_color_badge_red" ohos:text_font="HwChinese-medium" ohos:text_size="20fp"/>Copy the code
4. italic & text_alignment
Italic indicates whether the text is in italic. Text_alignment is text alignment. Adding a background image makes it easier to see the effect, and the alignment properties are easy to understand.
<Text ohos:height="match_content" ohos:width="match_parent" ohos:italic="true" ohos: Text =" aise" ohos:text_color="$ohos:color:id_color_badge_red" ohos:text_font="HwChinese-medium" ohos:text_size="20fp"/> <Text Ohos :height="80vp" oHOs :width="match_parent" oHOs :background_element="$graphic:regist_btn_bg" ohos:text_alignment="center" ohos:text_color="$ohos:color:id_color_badge_red" ohos:text_size="20fp"/>Copy the code
5. element_left & element_top & element_right & element_bottom & element_start & element_end & element_padding
Element_left, etc., is the end where ICONS are added to the text, i.e. left/right/top/bottom/start/end; Element_padding is a variation between text ICONS and text;
Element_right conflicts with element_start/element_end attributes and is not recommended to be used together. Element_right conflicts with the element_end attribute when the horizontal layout is left to right; When the horizontal layout is right-to-left, element_right conflicts with the element_start attribute; When configured, element_start/element_end takes precedence over element_right/element_left attributes.
<Text ohos:height="match_content" oHOs :width="match_parent" oHOs: Text ="HarmonyOS is a new distributed operating system for the Internet of Everything. Based on the traditional single equipment system capability, HarmonyOS was proposed based on the same set of system capacity, the adaptive distributed in the form of a variety of terminal idea, can support mobile phone, tablet, intelligence, wisdom, dressing screen, machine such as a variety of terminal equipment, to provide the whole scene (mobile office, sports health, social communication, media, entertainment, etc) business ability." ohos:text_color="$ohos:color:id_color_badge_red" ohos:text_size="20fp" ohos:element_padding="20vp" ohos:element_left="$media:icon"/>Copy the code
6. truncation_mode & scrollable & auto_scrolling_duration & auto_scrolling_count
Truncation_mode is the truncation mode of text. HarmonyOS provides multiple truncation modes when text content exceeds the specified width range. Ellipsis_at_start /middle/end indicates truncation at the start/middle/end of the text box. Auto_scrolling indicates scrolling.
Scrollable indicates whether text can be scrolled. Auto_scrolling_duration Indicates the automatic rolling duration. Auto_scrolling_count indicates the number of times to scroll. The default value is unlimited. In the test process, simple XML file adjustment will not achieve the scrolling effect. StartAutoScrolling () should be used on the Java side to start the scrolling effect.
<Text ohos:height="match_content" ohos:width="match_content" ohos:top_margin="10vp" Ohos :text="HarmonyOS is a new distributed operating system for the Internet of Everything. Based on the traditional single equipment system capability, HarmonyOS was proposed based on the same set of system capacity, the adaptive distributed in the form of a variety of terminal idea, can support mobile phone, tablet, intelligence, wisdom, dressing screen, machine such as a variety of terminal equipment, to provide the whole scene (mobile office, sports health, social communication, media, entertainment, etc) business ability." ohos:text_size="20fp" ohos:truncation_mode="ellipsis_at_end" ohos:element_left="$media:icon" /> <Text ohos:height="match_content" ohos:width="match_content" ohos:top_margin="10vp" Ohos :text="HarmonyOS is a new distributed operating system for the Internet of Everything. Based on the traditional single equipment system capability, HarmonyOS was proposed based on the same set of system capacity, the adaptive distributed in the form of a variety of terminal idea, can support mobile phone, tablet, intelligence, wisdom, dressing screen, machine such as a variety of terminal equipment, to provide the whole scene (mobile office, sports health, social communication, media, entertainment, etc) business ability." ohos:text_size="20fp" ohos:truncation_mode="auto_scrolling" ohos:scrollable="true" ohos:auto_scrolling_count="1" ohos:auto_scrolling_duration="100" ohos:element_left="$media:icon" /> Text text1 =(Text) findComponentById(ResourceTable.Id_test_tv1); text1.startAutoScrolling();Copy the code
7. max_text_lines & multiple_lines
Max_text_lines The maximum number of lines set for text; Multiple_lines is multiline mode, allowing line breaks only if true;
Ohos: Text ="HarmonyOS is a new distributed operating system for the Internet of Everything. Based on the traditional single equipment system capability, HarmonyOS was proposed based on the same set of system capacity, the adaptive distributed in the form of a variety of terminal idea, can support mobile phone, tablet, intelligence, wisdom, dressing screen, machine such as a variety of terminal equipment, to provide the whole scene (mobile office, sports health, social communication, media, entertainment, etc) business ability." ohos:text_size="20fp" ohos:top_margin="10vp" ohos:multiple_lines="true" ohos:max_text_lines="4" ohos:truncation_mode="ellipsis_at_end" ohos:element_left="$media:icon" ohos:background_element="$graphic:background_ability_text" />Copy the code
8. additional_line_spacing & line_height_num
Additional_line_spacing corresponds to the spacing between text lines. The value is a float and is a specific value. Line_height_num corresponds to the line spacing multiple, including additional_line_spacing.
<Text ohos:height="match_content" ohos:width="match_parent" ohos:additional_line_spacing="20" ohos:line_height_num="2" HarmonyOS is a new distributed operating system for the Internet of Everything era. Based on the traditional single equipment system capability, HarmonyOS was proposed based on the same set of system capacity, the adaptive distributed in the form of a variety of terminal idea, can support mobile phone, tablet, intelligence, wisdom, dressing screen, machine such as a variety of terminal equipment, to provide the whole scene (mobile office, sports health, social communication, media, entertainment, etc) business ability." ohos:text_color="$ohos:color:id_color_badge_red" ohos:text_size="20fp"/>Copy the code
9. auto_font_size & padding_for_text
Auto_font_size specifies whether to support automatic text font size adjustment. Padding_for_text specifies whether the top and bottom of the text is left blank by default. The default value is true, but the effect is not obvious in the small dishes.
In the process of using auto_font_size, you need to set the size change rule and the maximum and minimum size on the Java side.
<Text ohos:id="$+id:test_tv2" ohos:height="match_content" ohos:width="match_content" ohos:auto_font_size="true" ohos:element_left="$media:icon" ohos:max_text_lines="1" ohos:multiple_lines="true" ohos:text="HarmonyOS" ohos:text_size="20fp" ohos:top_margin="10vp" /> Text text2 =(Text) findComponentById(ResourceTable.Id_test_tv2); text2.setAutoFontSizeRule(20, 50, 1); text2.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { text2.setText(text2.getText() + " HarmonyOS"); }});Copy the code
There are also many properties that can be edited in Text. For the moment, I only study static properties, which are similar to Android/Flutter and easier to use. HarmonyOS is in its infancy, so please feel free to comment on any errors!
Source: Little Monk A Ce