3.1【HarmonyOS鸿蒙开发】组件Text

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

Text是用来显示字符串的组件,在界面上显示为一块文本区域。Text作为一个基本组件,有很多扩展,常见的有按钮组件Button,文本编辑组件TextField。

一、支持的XML属性

Text的共有XML属性继承自:Component

属性名称中文描述取值取值说明使用案例
id控件identity,用以识别不同控件对象,每个控件唯一integer类型仅可用于配置控件的id。ohos:id="$+id:component_id"
theme样式引用仅可引用pattern资源。ohos:theme="$pattern:button_pattern"
width宽度,必填项float类型,match_parent,match_contentohos:width=“20"
ohos:width=“10vp"
ohos:width=”$float:size_value”
height高度,必填项float类型,match_parent,match_contentohos:height=“20”
ohos:height=“20vp”
ohos:height="$float:size_value"
min_width最小宽度float类型ohos:min_width=“20"
ohos:min_width=“20vp"
ohos:min_width=”$float:size_value”
min_height最小高度float类型ohos:min_height=“20"
ohos:min_height=“20vp"
ohos:min_height=”$float:size_value”
alpha透明度float类型取值范围在0~1。ohos:alpha=“0.86"
ohos:alpha=”$float:value"
enabled是否启用boolean类型ohos:enabled=“true"
ohos:enabled=”$boolean:true"
visibility可见性visible,invisible,hideohos:visibility=“visible”
padding内间距float类型
margin外边距float类型

Text的自有XML属性,以下列举了一些常用的,其他更多的属性,详见官方文档

属性名称中文描述取值取值说明使用案例
text显示文本string类型可以直接设置文本字串,也可以引用string资源。ohos:text=“熄屏时间"
ohos:text=”$string:test_str"
hint提示文本string类型可以直接设置文本字串,也可以引用string资源。ohos:hint=“联系人"
ohos:hint=”$string:test_str"
text_font字体sans-serif,sans-serif-medium等可以设置的字体如表中所列。ohos:text_font=“HwChinese-medium”
truncation_mode长文本截断方式none,ellipsis_at_start,ellipsis_at_middle,ellipsis_at_end,auto_scrollingohos:truncation_mode=“none”
text_size文本大小float类型表示字体大小的float类型。可以是浮点数值,其默认单位为px;也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。ohos:text_size=“30"
ohos:text_size=“16fp"
ohos:text_size=”$float:size_value”

二、创建Text

在layout目录下的xml文件中创建Text。

<Text
      ohos:id="$+id:text1"
      ohos:height="match_content"
      ohos:width="match_content"
      ohos:layout_alignment="horizontal_center"
      ohos:text="我的第一个文本"
      />

ohos:height=“match_content”,文本高度
ohos:width=“match_content”,文本宽度

三、设置Text

  • 在xml中设置Text的背景。

    layout目录下xml文件的代码示例如下:

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

    常用的背景如常见的文本背景、按钮背景,可以采用XML格式放置在graphic目录下。

    在“Project”窗口,打开“entry > src > main > resources > base”,右键点击“graphic”文件夹,选择“New > File”,命名为“background_text.xml”,在background_text.xml中定义文本的背景。

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

    ohos:radius=“30”,圆角

    图1 使用xml设置Text背景的效果

    WX20210601-154425@2x

  • 设置字体大小和颜色

    上面的效果,文字好小一扣扣,我们来设置一下字体大小和颜色:

    <Text
            ohos:id="$+id:text1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="程序咖"
          
            ohos:text_color="#FF0000"
            ohos:text_size="28fp"
          
          	ohos:background_element="$graphic:background_text"
            />
    

    图2 设置字体大小和颜色的效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HbqAYr3Y-1624928709105)(https://img.chengxuka.com/WX20210601-154526@2x.png/mark)]

ohos:text_color="#FF0000",文本颜色
ohos:text_size=“28fp”,字体大小

  • 设置边距效果

    还有有点丑,我们加一些边距

    <Text
            ohos:id="$+id:text1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="程序咖"
    
            ohos:text_color="#FF0000"
            ohos:text_size="28fp"
    
            ohos:left_margin="15vp"
            ohos:top_margin="30vp"
    
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
    
            ohos:background_element="$graphic:background_text"
            />
    

    设置了外边距和内边距的效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YaTZnI4c-1624928709107)(https://img.chengxuka.com/WX20210601-154803@2x.png/mark)]

    ohos:left_margin=“15vp”,左外边距
    ohos:top_margin=“30vp”,上外边距
    ohos:right_margin=,右外边距
    ohos:bottom_margin=,下外边距

ohos:right_padding=“15vp”,右内边距
ohos:left_padding=“15vp”,左内边距
ohos:top_padding=“8vp”,上内边距
ohos:bottom_padding=“8vp”,下内边距

  • 设置字体风格和字重

    <Text
            ohos:id="$+id:text1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="ChengXuKa"
    
            ohos:text_color="#FF0000"
            ohos:text_size="28fp"
    
            ohos:left_margin="15vp"
            ohos:top_margin="30vp"
    
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
    
            ohos:italic="true"
            ohos:text_weight="700"
            ohos:text_font="serif"
    
            ohos:background_element="$graphic:background_text"
            />
    

    图3 设置字体风格和字重的效果
    WX20210608-160117@2x

    ohos:italic=“true”,倾斜

    ohos:text_weight=“700” ,字重

    ohos:text_font="serif"字体

  • 设置文本对齐方式

    <Text
            ohos:id="$+id:text1"
            ohos:height="100vp"
            ohos:width="300vp"
            ohos:text="ChengXuKa"
    
            ohos:text_color="#FF0000"
            ohos:text_size="28fp"
    
            ohos:left_margin="15vp"
            ohos:top_margin="30vp"
    
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
    
            ohos:italic="true"
            ohos:text_weight="700"
            ohos:text_font="serif"
    
            ohos:text_alignment="horizontal_center|bottom"
    
            ohos:background_element="$graphic:background_text"
            />
    

    图4 设置文本对齐方式的效果

    WX20210601-160338@2x

ohos:text_alignment=“horizontal_center|bottom”,文本对齐方式,可以设置取值项如表中所列,也可以使用“|”进行多项组合。

left,表示文本靠左对齐。

top,表示文本靠顶部对齐。

right,表示文本靠右对齐。

bottom,表示文本靠底部对齐。

horizontal_center,表示文本水平居中对齐。

vertical_center,表示文本垂直居中对齐。

center,表示文本居中对齐。

start,表示文本靠起始端对齐。

end,表示文本靠结尾端对齐。

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

    <Text
            ohos:id="$+id:text1"
            ohos:height="match_content"
            ohos:width="100vp"
            ohos:text="ChengXuKa"
    
            ohos:text_color="#FF0000"
            ohos:text_size="28fp"
    
            ohos:left_margin="15vp"
            ohos:top_margin="30vp"
    
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
    
            ohos:italic="true"
            ohos:text_weight="700"
            ohos:text_font="serif"
    
            ohos:multiple_lines="true"
            ohos:max_text_lines="3"
    
            ohos:background_element="$graphic:background_text"
            />
    

    图5 设置文本换行和最大显示行数的效果
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7W2YZcy2-1624928709110)(https://img.chengxuka.com/WX20210601-160835@2x.png/mark)]

ohos:multiple_lines=“true”,多行模式设置,可以直接设置true/false,也可以引用boolean资源。
ohos:max_text_lines=“3”

四、自动调节字体大小

Text对象支持根据文本长度自动调整文本的字体大小和换行。

  1. 设置自动换行、最大显示行数和自动调节字体大小。

     <Text
            ohos:id="$+id:text2"
            ohos:width="90vp"
            ohos:height="match_content"
            ohos:min_height="30vp"
            ohos:text="T"
            ohos:text_color="#0000FF"
            ohos:top_margin="20vp"
            ohos:left_margin="20vp"
            ohos:right_padding="8vp"
            ohos:left_padding="8vp"
    
            ohos:italic="true"
            ohos:text_weight="700"
            ohos:text_font="serif"
    
            ohos:auto_font_size="true"
            ohos:multiple_lines="true"
            ohos:max_text_lines="1"
            ohos:background_element="$graphic:background_text"/>
    
    
  2. 通过setAutoFontSizeRule设置自动调整规则,三个入参分别是最小的字体大小、最大的字体大小、每次调整文本字体大小的步长。

    				Text text2 =(Text) findComponentById(ResourceTable.Id_text2);
            // 设置自动调整规则
            text2.setAutoFontSizeRule(30, 100, 1);
            // 设置点击一次增多一个"T"
            text2.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    text2.setText(text2.getText() + "T");
                }
            });
    

图6 自动调节字体大小
0000000000011111111.20210521145409.86837894660409293553473149818453

五、跑马灯效果

当文本过长时,可以设置跑马灯效果,实现文本滚动显示。前提是文本换行关闭且最大显示行数为1,默认情况下即可满足前提要求。

<Text
        ohos:id="$+id:text3"
        ohos:width="200vp"
        ohos:height="match_content"
        ohos:text="王二狗约李小花看电影,李小花不去,王二狗就和王三狗去了,看的博人转"
        ohos:text_size="28fp"
        ohos:top_margin="20vp"
        ohos:left_margin="20vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        ohos:text_color="#0000FF"
        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"

        ohos:background_element="$graphic:background_text"/>

Java代码:

 				Text text3 =(Text) findComponentById(ResourceTable.Id_text3);
        // 跑马灯效果
        text3.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        // 始终处于自动滚动状态,指示文本的自动滚动计数,该计数必须大于或等于1,或永远滚动
        text3.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
        // 启动跑马灯效果
        text3.startAutoScrolling();

图7 跑马灯效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CnQQVgQd-1624928709111)(https://img.chengxuka.com/pamadeng1.gif)]

六、写个例子

利用文本组件实现一个标题栏和详细内容的界面。

图8 界面效果

WX20210601-173211@2x

源码示例:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text_size="25fp"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"

        ohos:top_padding="10vp"
        ohos:bottom_padding="10vp"

        ohos:background_element="$graphic:background_text"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_parent"
        ohos:height="640vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="100vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:below="$id:text2"
        ohos:left_of="$id:button2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="100vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text2"
        ohos:text_font="serif"/>
</DependentLayout>

color_light_gray_element.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#EDEDED"/>
</shape>

background_text.xml:

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

更多内容:

1、社区:鸿蒙巴士https://www.harmonybus.net/

2、公众号:HarmonyBus

3、技术交流QQ群:714518656

4、视频课:https://www.chengxuka.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值