概述

本章内容，我们将学习Text、TextField控件的基本属性以及他们如何使用。Text是用来显示字符串的组件，在界面上显示为一块文本区域。而TextField提供了一种文本输入框。TextField继承于Text，在Text控件上进行功能扩展。
接下来让我们先介绍一下Text控件的创建属性以及它的使用。

1、Text控件

Text控件是用来显示字符串的组件，我们在界面上显示文本，就可以使用此控件。

代码实现：

    <Text
        ohos:id="$+id:tv_test"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:bottom_padding="5vp"
        ohos:end_padding="8vp"
        ohos:start_padding="8vp"
        ohos:text="$string:test_content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:top_padding="5vp"/>
复制代码

1.1、Text控件常用的XML属性

1.2、案例解析

下面我们通过几个常用案例来进一步了解Text控件。

1.2.1、Text控件实现在文本框结尾处使用省略号截断

代码实现：

    <Text
        ohos:id="$+id:tv_test"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:center_in_parent="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:bottom_padding="5vp"
        ohos:end_padding="8vp"
        ohos:start_padding="8vp"
        ohos:max_text_lines="1"
        ohos:truncation_mode="ellipsis_at_end"
        ohos:text="$string:test_content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:top_padding="5vp"/>
复制代码

1.2.2、自动调整字体大小

多次点击后

代码实现：

XML代码：
    <Text
        ohos:id="$+id:tv_test"
        ohos:height="50vp"
        ohos:width="100vp"
        ohos:center_in_parent="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:bottom_padding="5vp"
        ohos:end_padding="8vp"
        ohos:start_padding="8vp"
        ohos:text="Text"
        ohos:text_alignment="center"
        ohos:text_weight="700"
        ohos:auto_font_size="true"
        ohos:italic="true"
        ohos:text_size="20fp"
        ohos:top_padding="5vp"/>
        
Java代码：
        Text text = (Text) findComponentById(ResourceTable.Id_tv_test);
        text.setAutoFontSizeRule(10,100,1);
        text.setClickedListener((component -> {
            text.setText(text.getText()+"T");
        }));
复制代码

实现该功能必须在XML中添加auto_font_size属性，并取值为true。并在Java代码中通过setAutoFontSizeRule来限制字体的大小，单位为px。注意：如果Text控件的宽高设置为match_content，控件大小也会随着改变。

1.2.3、Text控件实现跑马灯效果

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

代码实现：

XML代码：
    <Text
        ohos:id="$+id:tv_test"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:center_in_parent="true"
        ohos:background_element="$graphic:shape_bottom_bg"
        ohos:bottom_padding="5vp"
        ohos:end_padding="8vp"
        ohos:start_padding="8vp"
        ohos:text="$string:test_content"
        ohos:text_alignment="center"
        ohos:text_weight="700"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        ohos:italic="true"
        ohos:text_size="20fp"
        ohos:top_padding="5vp"/>

Java代码：
    private void testText(){
        Text text = (Text) findComponentById(ResourceTable.Id_tv_test);
        //设置文本超长时滚动显示全部文本
        text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        //循环滚动
        text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
        //启动跑马灯效果
        text.startAutoScrolling();
    }
复制代码

2、TextField控件

TextField控件继承于Text控件，所以其拥有与Text控件一样的属性。在这里我们介绍TextField控件独有的basement属性以及有关文本气泡bubble_xx属性。

2.1、basement属性及bubble_xx属性

basement输入框基线，就是我们平时看到编辑框底部的横线，其实我们在开发过程中一般不会使用到，TextField控件也默认不显示这条线。所以我们必须手动添加basement。
代码如下：

    <TextField
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:hint="$string:test_content"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        ohos:center_in_parent="true"
        ohos:text_size="20fp"
        ohos:basement="#000000"
        />
复制代码

在上面的例子中，你肯定会好奇，当输入框获得焦点时，输入框旁边怎么有个圆圈。其实这个就是所谓的文本气泡，我们可以使用bubble_xxx属性来对齐进行控制，例如我们想让这个气泡消失，我们可以设置该气泡的宽高都为0vp。效果：

代码实现：

    <TextField
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:hint="$string:test_content"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        ohos:center_in_parent="true"
        ohos:text_size="20fp"
        ohos:basement="#000000"
        ohos:bubble_height="0vp"
        ohos:bubble_width="0vp"
        />
复制代码

2.2、通过ShapeElement为TextField控件设置背景

在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“graphic”文件夹。在该文件夹中，我们用XML格式来为控件编写背景。
例如：创建shape_text_field_white_bg.xml作为TextField控件背景展示。实现效果如下：

代码如下：

shape_text_field_white_bg.xml代码：
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <solid ohos:color="#FFFFFF"/>
    <corners ohos:radius="50vp"/>
</shape>

XML代码：
    <TextField
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:min_width="200vp"
        ohos:hint="$string:test_content"
        ohos:multiple_lines="false"
        ohos:max_text_lines="1"
        ohos:center_in_parent="true"
        ohos:text_size="20fp"
        ohos:start_padding="12vp"
        ohos:end_padding="12vp"
        ohos:top_padding="5vp"
        ohos:bottom_padding="5vp"
        ohos:background_element="$graphic:shape_text_field_white_bg"
        />
复制代码

在定义shape相关XML文件时，ohos:shape=”xxx”属性必须写出来，不然无法正常展示。

2.3、响应焦点变化

    private void testTextField() {
        TextField textField = (TextField) findComponentById(ResourceTable.Id_tf_test);
        textField.setFocusChangedListener((component, isFocused) -> {
            if (isFocused) {// 获取到焦点
                
            } else {// 失去焦点

            }
        });
    }
复制代码

3、小结

上面我们学习了Text控件以及TextField控件的常用属性以及他们的使用。我们只需要有空的时候多看几次这些常用属性，在开发的过程中我们就会很顺手，不需要去背，忘记了就可以再回来查。我们也实战了这些控件在日常开发中常见的使用场景，使用起来也很简单。

思考总结

1. Text控件以及TextField控件常用的XML属性有哪些？
2. 如何实现长文本的截断，并在结尾使用省略号截断？
3. 如何实现自动调节字体大小以及跑马灯的实现？
4. 什么是文本气泡，怎么进行文本气泡大小设置？