Hongmeng Development (1) ---Text component

table of Contents

Hongmeng Development

From June 2, 2021, Hongmeng system has been completely open source.

It is now time to learn Hongmeng development. If you have studied Android development before, then Hongmeng can get started directly.

Marquee effect


However, the Hongmeng development course written by the blogger can be studied by anyone, because it starts with the basic components. Below, the blogger will start with the Text component and explain the main points of Hongmeng development step by step.

Text component

Text is a component used to display strings and is displayed as a text area on the interface. The sample code is as follows:

<Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:background_element="$graphic:background_ability_main"
        ohos:padding="10vp"
        ohos:text_font="serif"
        ohos:text="$string:HelloWorld"
        ohos:element_left="$media:icon"
        ohos:text_size="50vp"/>

Here, the Text text component is created through an XML layout file.

After running, the effect is as follows:

Text text run
Attributesmeaning
idComponent name, easy to get the component in the code
height|widthWidth and height, match_content is adaptive according to the content size
layout_alignmentText alignment method, center is horizontal and vertical center
background_elementText background, you can set the border color and other data through the graphic resource file
paddingInner spacing
text_fontFont selection, selectable fonts are: sans-serif, HwChinese-medium, etc.
textThe content of the text, here is Hello World, the content of the referenced string resource file
element_leftThe picture on the left side of the text, here is the Hongmeng default icon
text_sizefont size

Of course, the Text component has many other attributes, which are relatively less used, such as max_text_lines the largest line of text. These are explained in the following components.

Operate the Text component through code

Above, we all set and operate the Text component through the XML layout file. But its first attribute is id, through which we can do more things with the Text component in the code.

Examples are as follows:

public class MainAbilitySlice extends AbilitySlice {
    private Text hw_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.hw_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);
        this.hw_text.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(hw_text.getText().equals("Hello World")){
                    hw_text.setText("Harmony OS");
                }else{
                    hw_text.setText("Hello World");
                }
            }
        });
    }
}

Here, we set a click event for the Text component. When the text of the Text component is Hello World, replace it with Harmony OS. When the Text component text is not Hello World, replace it with Hello World.

A simple understanding is that the two texts "Harmony OS" and "Hello World" will be replaced after clicking.

Use the Text component to achieve the marquee effect

In many developments, when explaining the text component, the realization of its marquee effect will be introduced. Then the blogger explains that Hongmeng is no exception, let's realize the marquee effect of the text component of the Hongmeng system.

Examples are as follows:

public class MainAbilitySlice extends AbilitySlice {
    private Text hw_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.hw_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);
        this.hw_text.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(hw_text.getText().equals("Hello World")){
                    hw_text.setText("Harmony OS");
                }else{
                    hw_text.setText("Hello World");
                }
            }
        });
        // 跑马灯效果
        this.hw_text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        // 始终处于自动滚动状态
        this.hw_text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
        // 启动跑马灯效果
        this.hw_text.startAutoScrolling();
    }
}

Here, we only need to add three lines.

But if you run it directly, it will definitely have no effect, because the width of the text is an adaptive content width, and the marquee can be realized because its width is smaller than the text width.

Therefore, we need to change the width of the text and set it to a fixed size and smaller than the text string. The XML modification code is as follows:

ohos:width="175vp"

After running, the effect is as shown in the first picture.

Resource file reference content:

graphic:background_ability_main:

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="50"/>
    <solid
        ohos:color="#FF0000"/>
</shape>

string:HelloWorld:

{
  "string": [
    {
      "name": "app_name",
      "value": "鸿蒙组件"
    },
    {
      "name": "mainability_description",
      "value": "Java_Phone_Empty Feature Ability"
    },
    {
      "name": "HelloWorld",
      "value": "Hello World"
    }
  ]
}