android开发游记：textview超过长度点击展开自动滚动(在一个TextView中实现，不增加布局复杂度)

最近有需求需要在一个有限高度的页面上显示超过其高度的文字，当文字超过最大行之后显示省略号和查看更多，然后点击查看更多显示完整的信息，并且可以滚动。

先看效果图：



功能很简单，网上搜的有人使用了scrollview来滚动，再添加一个按钮”查看更多”，然后点击后把消息全部展示，再把按钮隐藏。

但是这样做不是觉得很复杂，其实所有的工作在一个textView里就可以完成了，包括滚动效果，包括查看更多的按钮。这些都可以在同一个textView里处理完，先上代码，后面再解释其原理。

我封装成了一个工具类，使用该工具类来处理TextView的显示逻辑

使用方法：

导入下面的工具类MoreTextUtil，在你需要设置TextView拥有展开效果的时候添加下面代码：

textView.setText("你要显示的内容");
MoreTextUtil.setMore(textView);

1
2

你也可以这样，使用重载的方法：

MoreTextUtil.setMore(textView,"你要显示的内容");

1

默认最大可显示行数为5行，如果需要自定义就给自己的TextView的布局加上下面的属性：

android:maxLines="9"    //最多显示9行

1

用法很简单吧，下面上源码：

package com.shelwee.update.utils;

import android.annotation.SuppressLint;
import android.text.Layout;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextPaint;
import android.text.TextUtils.TruncateAt;
import android.text.method.LinkMovementMethod;
import android.text.method.ScrollingMovementMethod;
import android.text.style.ClickableSpan;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.TextView;

import com.shelwee.updater.R;

public class MoreTextUtil {

public static boolean hasMesure = false;    //是否已经执行过一次

public static void setMore(TextView textV,String content){
textV.setText(content);
setMore(textV,"...","查看更多");
}

public static void setMore(TextView textV){
setMore(textV,"...","查看更多");
}

@SuppressLint("NewApi")
public static void setMore(final TextView textV, final String ellipsis, final String strmore) {
if (textV == null) {
return;
}
if (2147483647 == textV.getMaxLines()) textV.setMaxLines(5);
textV.setEllipsize(TruncateAt.END);
textV.setVerticalScrollBarEnabled(true);

hasMesure = false;

//添加布局变化监听器,view 布局完成时调用，每次view改变时都会调用
ViewTreeObserver vto = textV.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (!hasMesure) {
int maxLines = textV.getMaxLines();
int lines = textV.getLineCount();

//如果文字的行数超过最大行数，展示缩略的textview
if (lines >= maxLines) {
Layout layout=textV.getLayout();
String str=layout.getText().toString();
int end = layout.getLineEnd(maxLines-2);
str = str.substring(0, end);                    //缩略的文字
String strall = textV.getText().toString();     //完整的文字
hasMesure = true;

SpannableString spanstr;
//如果以换行符结尾，则不再换行
if (str.endsWith("\n")) {
spanstr = new SpannableString(str + ellipsis + strmore);
}else {
spanstr = new SpannableString(str + "\n" + ellipsis + strmore);
}

//设置“查看更多”的点击事件
spanstr.setSpan(new MyClickableSpan(strall,textV.getResources().getColor(android.R.color.holo_green_dark)), spanstr.length() - strmore.length(),
spanstr.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

textV.setText(spanstr);
//移除默认背景色
textV.setHighlightColor(textV.getResources().getColor(android.R.color.transparent));
textV.setMovementMethod(LinkMovementMethod.getInstance());
}
}
}
});

}

static class MyClickableSpan extends ClickableSpan{
private String str;
private int color;
public MyClickableSpan(String str,int color) {
this.str = str;
this.color = color;
}

@Override
public void onClick(View view) {
((TextView)view).setMovementMethod(new ScrollingMovementMethod());
((TextView)view).setText(str);
}

@Override
public void updateDrawState(TextPaint ds) {
super.updateDrawState(ds);
ds.setColor(color);         //设置“查看更多”字体颜色
ds.setUnderlineText(false); //设置“查看更多”无下划线，默认有
ds.clearShadowLayer();
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

代码中的注释很清楚，说下重点： 

代码中为什么要使用布局变化监听器呢，如下：

ViewTreeObserver vto = textV.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener(){
....
});

1
2
3
4

原因是TextView会根据字符的排版规则自动换行，这种换行受字体大小的影响，而且英文字母符号中文等不同字符占的宽并不同，而且TextView还会自动匹配单词选择性换行，所以我们几乎无法通过一个字符串计算出TextView会在什么时候换行，我们也无法计算出在字符串的哪个位置会因为显示不下而出现截断。

那么我们就换一种方式，直接把字符串绘制到TextView中，在TextView生成布局渲染完成后把字符设置到页面前一刻再回调我们的方法，这样我们就可以得到TextView具体绘制了多少行，每行的字符是什么，这也就是为什么要使用ViewTreeObserver 添加 OnGlobalLayoutListener 的原因。在onGlobalLayout回调方法中完成我们的业务逻辑。

但是值得注意的是，OnGlobalLayoutListener 会在绘制过程中被调用多少，而我们的业务逻辑只需要处理一次就可以了，为了避免不必要的性能损失，我们得加以控制，通过hasMesure 这个布尔变量来控制代码只执行一次。

另外一个重要的地方就是，我们没有添加按钮，那就以为着我们的TextView必须要支持局部点击事件，就是说，点击“查看更多”的时候要有响应，而点其他地方没有。还好TextView的SpannableString (复合文本) 支持多事件和样式的处理，如下：

//设置“查看更多”的点击事件
spanstr.setSpan(new MyClickableSpan(strall,textV.getResources().getColor(R.color.cc_orage)),
spanstr.length() - strmore.length(),
spanstr.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

textV.setText(spanstr);

1
2
3
4
5
6

这里就使用了复合文本格式来设置局部的点击事件，方法原型如下：

spanstr.setSpan(Object what,int start,int end,int flags)

1

what 参数可以设置一个监听器 

start 指定了设置的字符的开始位置 

end 是指定字符的结束位置 

flags 是间隔模式，SPAN_EXCLUSIVE_EXCLUSIVE表示不影响前后相邻的字符

接着看复合文本事件监听器：

static class MyClickableSpan extends ClickableSpan{
private String str;
private int color;
public MyClickableSpan(String str,int color) {
this.str = str;
this.color = color;
}

@Override
public void onClick(View view) {
((TextView)view).setMovementMethod(new ScrollingMovementMethod());
((TextView)view).setText(str);
}

@Override
public void updateDrawState(TextPaint ds) {
super.updateDrawState(ds);
ds.setColor(color);         //设置“查看更多”字体颜色
ds.setUnderlineText(false); //设置“查看更多”无下划线，默认有
ds.clearShadowLayer();
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

构造方法我传入了完整的字符串和一个颜色值，当点击后把显示的字符串换成完整的字符，并设置可以滚动就ok，至于颜色值，我希望“查看更多”这4个字拥有不同的颜色，当然你不设置也没有什么关系，丑一点而已。 

在点击事件执行之前，会先调用updateDrawState(TextPaint ds)方法设置绘制格式，在这里设置颜色和取消下划线，如果需要其他特殊效果的话也在这里处理。

觉得不错的下面有个顶，可以点一下 :）