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)方法设置绘制格式，在这里设置颜色和取消下划线，如果需要其他特殊效果的话也在这里处理。

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