《Android 常用控件》TextView

什么是 TextView ？

TextView 是 Android 里用来显示文本的控件，比较基础的控件，但也是用法颇多的控件，不要因为基础就觉的简单，本篇我们会详细介绍它的各种用法。

如何使用 TextView ？

首先我们看一下 TextView 的基本使用，例如，给 TextView 设置宽高、设置文字、设置颜色、设置字体大小、设置粗体。

在布局文件中直接设置

我们可以在画页面布局的时候，在xml文件中直接设置相关的属性：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="天哥在奔跑"
        android:textColor="#000000"
        android:textSize="24sp"
        android:textStyle="bold"/>

</LinearLayout>

属性	值	说明
id	@+id/tv_1	设定一个id标识
layout_width	wrap_content	宽度：包裹内容
layout_height	wrap_content	高度：包裹内容
text	天哥在奔跑	TextView显示的文字
textColor	#000000	TextView的文字颜色：黑色
textSize	24sp	文字大小，注意单位是sp
textStyle	bold	文字风格：粗体

这里宽度和高度的值设置的是 wrap_content ，标示文字的内容有多少，宽度就是多少，不会比文字还宽，高度同理。当然，这个值还可以是 match_parent ，表示匹配父控件，跟文字多少无关。也可以是一个具体值，比如100dp，则是固定了TextView的宽度。

我们通过下面这个图直观感受一下

layout_width

textSize 的单位要注意一下，我们这里用的是 sp ，使用 sp 作为字体的单位，这样能够根据不同屏幕分辨率自适应，如果写成 px 的画，则达不到这种效果。这里要说明一下，通常是使用 sp 作为字体单位的，不代表其他单位不可以使用，实际开发中也有情况我们是使用 px 或者 dp 作为单位的，根据具体的需求场景来确定。

在Java代码中设置

有的时候我们需要动态设置相关的属性，不能在xml文件中写死，这时候可以通过Java代码来设置：

        //设置文字
        textView.setText("天哥在奔跑");
        //设置文字颜色
        textView.setTextColor(ActivityCompat.getColor(this,R.color.colorBlack));
        //设置文字大小
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,24);
        //设置加粗
        TextPaint tp = textView.getPaint();
        tp.setFakeBoldText(true);

除了给 TextView 设置一些属性，我们还可以给 TextView 设置点击事件：

textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //点击之后执行的代码写在这里
            }
        });

上面这些是最基本的用法，不过在项目开发中，我们会遇到各种形态的需求，这些是远远不够应对的，我们通过10个实际需求来学习一下，请接着往下看。

10个实际需求

需求1：显示不下用“...”展示。

效果图

这是比较常见的需求，当文字过长时，我们需要在结尾使用“...”，其实只需要 maxLines 和 ellipsize 两个属性即可：

<TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="天哥在奔跑天哥在奔跑天哥在奔跑天哥在奔跑天哥在奔跑天哥在奔跑天哥在奔跑"
        android:textColor="#000000"
        android:maxLines="2"
        android:ellipsize="end"
        android:textSize="24sp" />

maxLines 是设置文本最大的行数，ellipsize 是这是“...”显示的位置，这里 end 表示在文末，也可以设置在前面或者中间。

需求2：在文字底部加下划线，比如登陆页面有个功能叫忘记密码，通常忘记密码可能会加下划线。

效果图

方法1:

textView.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);

方法2:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
            textView.setText(Html.fromHtml("<u>忘记密码？</u>", Html.FROM_HTML_MODE_LEGACY));
        } else {
            textView.setText(Html.fromHtml("<u>忘记密码？</u>"));
        }

需求3：给文字加中划线，比如展示价格的话，一个是市场价，一个促销价，那么可能会给市场价加个中划线。

效果图

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="市场价：100"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="促销价：88"
        android:textColor="#000000"
        android:textSize="20sp"
        android:layout_marginStart="10dp"/>

</LinearLayout>

Java代码：

textView = (TextView) findViewById(R.id.tv_1);
textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);//中划线
textView.getPaint().setAntiAlias(true);//去除锯齿

需求4：部分文字用不同颜色标注，比如“我是天哥”，要求“天哥”两个字用红色标注。

效果图

String text = "我是天哥";
SpannableString spannableString = new SpannableString(text);
spannableString.setSpan(new ForegroundColorSpan(Color.RED), 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

这里主要是通过 SpannableString 来实现的，SpannableString 是可以设置各种属性的字符串，实用性还是蛮高的，不止颜色，还可以设置不同的字体大小、背景颜色、给部分文字设置点击事件等等，具体大家可以详细查阅 SpannableString 的用法。

需求5：文字左边加一个图标，右边、上边、下面也有可能，这时候并不需要用一个 ImageView 和一个 TextView 来实现，仅 TextView 就能完成。

效果图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="联系客服"
        android:drawableLeft="@drawable/icon_user"
        android:drawablePadding="5dp"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="联系客服"
        android:drawableRight="@drawable/icon_user"
        android:drawablePadding="5dp"
        android:textColor="#000000"
        android:textSize="20sp"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="联系客服"
        android:drawableTop="@drawable/icon_user"
        android:drawablePadding="5dp"
        android:textColor="#000000"
        android:textSize="20sp"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="联系客服"
        android:drawableBottom="@drawable/icon_user"
        android:drawablePadding="5dp"
        android:textColor="#000000"
        android:textSize="20sp"
        android:layout_marginTop="50dp"/>

</LinearLayout>

属性	说明
drawableLeft	设置文字左边的图标
drawableRight	设置文字右边的图标
drawableTop	设置文字上边的图标
drawableBottom	设置文字下边的图标
drawablePadding	设置图标和文字之间的距离

icon_user 这张图片存放在项目目录 src/res/drawable-xxhdpi 下面，没有这个文件夹的化可以自己新建一个。

图片目录

需求6：给文字添加背景，圆角的。

效果图

首先我们在 src/res/drawable 目录下新建一个 xml 文件，使用 shape 画出圆角背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#ffffff"/>

    <corners
        android:radius="5dp"/>

    <solid
        android:color="#226DDD"/>
</shape>

属性	说明
stroke	描边
corners	圆角
solid	填充

然后给 TextView 设置背景 background 属性，这里我们同时还设置了内边距 padding 属性：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#000000">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="天哥在奔跑"
        android:background="@drawable/bg_round_blue"
        android:padding="5dp"
        android:textColor="#ffffff"
        android:textSize="20sp" />

</LinearLayout>

我们把布局的背景颜色设置成了黑色，这样我们能看到文字的背景是有白色描边的，是圆角的，是填充蓝色的。如果你不需要描边的话，可以不设置 stroke ，同理，solid 也可以不用设置，根据自己的需要来设置。圆角也可以只设置一个或几个，例如：android:topLeftRadius="5dp"，设置左上为圆角。

需求7：TextView 加载HTML。

这个需求其实上面我们已经示范过了，就是通过 Html.fromHtml 来实现，这样我们的 TextView 也能支持 Html 的相关属性。

textView.setText(Html.fromHtml("<html>...</html>"));

需求8：TextView 实现图文混排。

图文混排也是通过 Html 来实现，这里不重复演示了。但是在实际开发中，并不常用 TextView 来实现图文混排，有其它更好的方案，TextView 实现的效果并不能满足我们的设计需求，只能很简单的实现。

需求9：设置跑马灯效果，也就是文字一直在循环轮播。

跑马灯效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:padding="5dp"
        android:singleLine="true"
        android:text="大家好，我是天哥，这是演示的TextView跑马灯效果"
        android:textColor="#000000"
        android:textSize="20sp" />

</LinearLayout>

需要注意的是，singleLine 表示单行显示，这个属性已经被废弃，写出来会有中划线，代替它的是 maxLines ，但是这里千万不要使用 maxLines 来代替，不然没有效果，或许这就是自身的 bug 吧。

需求10：给文字添加动画效果，例如，点击一个按钮，让文字执行一段动画，改变位置。

这里我们用一个简单的动画带大家熟悉一下，更加复杂的用法在学习动画的时候会详细阐述。

简单动画效果

        //给button设置点击事件
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //textview沿Y轴移动
                textView.animate().translationYBy(200).setDuration(1000);
            }
        });

translationYBy 是沿Y轴移动的距离；setDuration 是动画的时间。