鸿蒙OS应用开发之——Java UI框架-常用组件Text

一 概述

在鸿蒙OS应用中,Text不能直接作为布局文件使用,需要结合布局文件一起使用(Android中可以)

1
2
public final void setUIContent(int layoutRes)
public void setUIContent(ComponentContainer componentContainer)

二 创建Text

2.1 代码创建Text

1
2
3
4
5
6
7
8
9
10
11
@Override
public void onStart(Intent intent) {
super.onStart(intent);
DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
Text text = new Text(getContext());
text.setText("My name is Text.");
text.setTextSize(50);
text.setId(100);
directionalLayout.addComponent(text);
super.setUIContent(directionalLayout);
}

2.2 XML布局创建Text

1
2
3
4
5
6
7
8
9
10
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent">
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Text"/>
</DirectionalLayout>

三 设置Text

3.1 设置背景

布局文件

1
2
3
<Text
...
ohos:background_element="$graphic:background_text"/>

background_text.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="20"/>
<solid
ohos:color="#878787"/>
</shape>

效果图

3.2 设置字体大小和颜色

布局文件(省略布局文件后)

1
2
3
4
5
6
7
8
9
10
11
12
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Text"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
ohos:background_element="$graphic:background_text"/>

效果图

3.3 设置字体风格和字重

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Text"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"
ohos:text_font="serif"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
ohos:background_element="$graphic:background_text"/>

效果图

3.4 设置文本对齐方式

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Text
ohos:id="$+id:text"
ohos:width="300vp"
ohos:height="100vp"
ohos:text="Text"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"
ohos:text_font="serif"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
ohos:text_alignment="horizontal_center|bottom"
ohos:background_element="$graphic:background_text"/>

效果图

3.5 设置文本换行和最大显示行数

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
<Text
ohos:id="$+id:text"
ohos:width="75vp"
ohos:height="match_content"
ohos:text="TextText"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"
ohos:text_font="serif"
ohos:multiple_lines="true"
ohos:max_text_lines="2"
ohos:background_element="$graphic:background_text"/>

效果图

3.6 跑马灯效果

布局文件

1
2
3
4
5
6
7
8
9
10
11
<Text
ohos:id="$+id:text"
ohos:width="75vp"
ohos:height="match_content"
ohos:text="TextText"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"
ohos:text_font="serif"
ohos:background_element="$graphic:background_text"/>

代码设置

1
2
3
4
5
6
// 跑马灯效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 始终处于自动滚动状态
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
// 启动跑马灯效果
text.startAutoScrolling();

效果图

四参考

Text