实现可在 RecyclerView 中展开和收缩的 TextView

前言&常用做法

效果类似微信朋友圈 - 查看全文的“展开”“收缩”效果,这里就不贴图了,相信大家都不会陌生。

一般情况下,第一个想到的做法是通过 TextView#setMaxLines(int maxLines) 来控制 TextView 显示的行数。

了解 View 模型的同学都知道,在 View 没有“呈现”之前,我们是无法获取到当前 TextView 显示的文字的具体行数。所以,有了下面的一种方法:

...
boolean expandable = false;
boolean expanded = false;
final TextView tv = findViewById(R.id.tv);
tv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        tv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        int lineCount = tv.getLineCount();
        if (lineCount > 3) {
            tv.setMaxLines(3);
            expandable = true;
        }
    }
});
tv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (expandable) {
            if (!expanded) {
                tv.setMaxLines(Integer.MAX_VALUE);
            } else {
                tv.setMaxLines(3);
            }
            expanded = !expanded;
        }
    }
});
...

这段代码如果不在 RecyclerView 或者 ListView 中使用是没有太大问题的。我们都知道,RV 或者 LV 是会复用 View 的,所以这段代码有两个问题:

  1. 如果某个 View 执行了 ViewTreeObserver.onGlobalLayoutListener 回调,在它再次被复用的时候,是不会再次触发这个回调了。
  2. 在滚动的情况下,TextView#getLineCount() 这个方法返回的行数,可能不是你当前看到的实际行数。

基于以上两个原因,在 RV 或者 LV 中,通过 TextView#setMaxLines(int maxLines) 来控制的方法就行不通了。

思考

换个思路,如果我们能“测量”出一段文字显示的行数,和每一行文字显示需要的“高度”,那么就可以通过改变 TextView 的高度,来让用户看到“展开”“收缩”文字的效果了。

那么这个工具有吗?很庆幸,Android Api 给我们提供了一个用来测量文字大小、宽度等数据的工具,它就是:StaticLayout

StaticLayout

引用 hencoder 一篇文章中对 StaticLayout 的介绍:

StaticLayout 的构造方法是 StaticLayout(CharSequence source, TextPaint paint, int width, Layout.Alignment align, float spacingmult, float spacingadd, boolean includepad),其中参数里:
width 是文字区域的宽度,文字到达这个宽度后就会自动换行;
align 是文字的对齐方向;
spacingmult 是行间距的倍数,通常情况下填 1 就好;
spacingadd 是行间距的额外增加值,通常情况下填 0 就好;
includeadd 是指是否在文字上下添加额外的空间,来避免某些过高的字符的绘制出现越界。

通过 StaticLayout,这里实现了一个 ExpandTextView,代码不多,注释非常全:

public class ExpandTextView extends android.support.v7.widget.AppCompatTextView {
  /**
   * true:展开,false:收起
   */
  boolean mExpanded;
  /**
   * 状态回调
   */
  Callback mCallback;
  /**
   * 源文字内容
   */
  String mText;
  /**
   * 最多展示的行数
   */
  final int maxLineCount = 3;
  /**
   * 省略文字
   */
  final String ellipsizeText = "...";

  public ExpandTextView(Context context, @Nullable AttributeSet attrs) {
      super(context, attrs);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      // 文字计算辅助工具
      StaticLayout sl = new StaticLayout(mText, getPaint(), getMeasuredWidth() - getPaddingLeft() - getPaddingRight()
            , Layout.Alignment.ALIGN_CENTER, 1, 0, true);
      // 总计行数
      int lineCount = sl.getLineCount();
      if (lineCount > maxLineCount) {
          if (mExpanded) {
              setText(mText);
              mCallback.onExpand();
          } else {
              lineCount = maxLineCount;
            
              // 省略文字的宽度
              float dotWidth = getPaint().measureText(ellipsizeText);
            
              // 找出第 showLineCount 行的文字
              int start = sl.getLineStart(lineCount - 1);
              int end = sl.getLineEnd(lineCount - 1);
              String lineText = mText.substring(start, end);
            
              // 将第 showLineCount 行最后的文字替换为 ellipsizeText
              int endIndex = 0;
              for (int i = lineText.length() - 1; i >= 0; i--) {
                  String str = lineText.substring(i, lineText.length());
                  // 找出文字宽度大于 ellipsizeText 的字符
                  if (getPaint().measureText(str) >= dotWidth) {
                      endIndex = i;
                      break;
                  }
              }
            
              // 新的第 showLineCount 的文字
               String newEndLineText = lineText.substring(0, endIndex) + ellipsizeText;
              // 最终显示的文字
              setText(mText.substring(0, start) + newEndLineText);
            
              mCallback.onCollapse();
          }
      } else {
          setText(mText);
          mCallback.onLoss();
      }
    
      // 重新计算高度
      int lineHeight = 0;
      for (int i = 0; i < lineCount; i++) {
          Rect lineBound = new Rect();
          sl.getLineBounds(i, lineBound);
          lineHeight += lineBound.height();
      }
      lineHeight += getPaddingTop() + getPaddingBottom();
      setMeasuredDimension(getMeasuredWidth(), lineHeight);
  }

  /**
   * 设置要显示的文字以及状态
   * @param text
   * @param expanded true:展开,false:收起
   * @param callback
   */
  public void setText(String text, boolean expanded, Callback callback) {
      mText = text;
      mExpanded = expanded;
      mCallback = callback;
    
      // 设置要显示的文字,这一行必须要,否则 onMeasure 宽度测量不正确
      setText(text);
  }

  /**
   * 展开收起状态变化
   * @param expanded
   */
  public void setChanged(boolean expanded) {
      mExpanded = expanded;
      requestLayout();
  }

  public interface Callback {
      /**
       * 展开状态
       */
      void onExpand();
    
      /**
       * 收起状态
       */
      void onCollapse();
    
      /**
       * 行数小于最小行数,不满足展开或者收起条件
       */
      void onLoss();
  }
}

在 RecyclerView 中使用:

...
public void onBindViewHolder(VH holder, int position) {
    ....
    
    /**
     * item.getText():    显示的文本
     * item.isExpanded(): 保存的是当前行是否是展开状态
     */
    tvContent.setText(item.getText(), item.isExpanded(), new ExpandTextView.Callback() {
            @Override
            public void onExpand() {
                // 展开状态,比如:显示“收起”按钮
            }

            @Override
            public void onCollapse() {
                // 收缩状态,比如:显示“全文”按钮
            }

            @Override
            public void onLoss() {
                // 不满足展开的条件,比如:隐藏“全文”按钮
            }
        });
    }
    tvContent.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 保存当前行的状态
            item.setExpanded(!item.setExpanded());
            // 切换状态
            tvContent.setChanged(item.isExpanded());
        }
    });
}
...
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 198,030评论 5 464
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,198评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,995评论 0 327
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,973评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,869评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,766评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,967评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,599评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,886评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,901评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,728评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,504评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,967评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,128评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,445评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,018评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,224评论 2 339

推荐阅读更多精彩内容