美文网首页Android-ui效果自定义view优秀案例
朋友圈的“全文”“收起”实现

朋友圈的“全文”“收起”实现

作者: CrazyPumPkin | 来源:发表于2016-08-02 21:25 被阅读4758次

朋友圈列表的点击“全文”展开、点击“收起”折叠,实现起来很简单,主要是以下两步:

  • 获取item文本的行数
  • 记录item文本的状态

1.获取文本的行数

很容易想到获取文本的行数,超出规定行数便折叠文本,但没有方法可以直接根据字数计算出TextView的行数,所以只能用

content.setText();
content.getLineCount();

这时会发现这样获取到的行数为0,因为setText()后立即调用getLineCount()TextView还未完成measure,要想准确获取到TextView的行数有两种方法:

  • ViewTreeObserver监听View初始化的各种状态
    使用它的OnPreDrawListener在TextView完成测量和定位即将绘制时调用 getLineCount()即可得到TextView的真实行数
  • View.post(Runnable r)方法
    这个Runnable会被添加到一个顺序执行的UI事件队列,等执行到里面的代码时,View已经完成了measure和layout等一系列初始化工作,所以可以正确获取到View的高度等信息,很好用的方法,相比第一种方法的好处就是代码少且只执行一次,不用取消监听

    The UI event queue will process events in order. After setContentView() is invoked, the event queue will contain a message asking for a relayout, so anything you post to the queue will happen after the layout pass

这里还是用了第一种方法ViewTreeObserver,感觉语义性更好

holder.content.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                   @Override
                   public boolean onPreDraw() {
                       //这个回调会调用多次,获取完行数记得注销监听
                       holder.content.getViewTreeObserver().removeOnPreDrawListener(this);
                       if(holder.content.getLineCount() > MAX_LINE_COUNT){
                           holder.content.setMaxLines(MAX_LINE_COUNT);
                           holder.expandOrCollapse.setVisibility(View.VISIBLE);
                           holder.expandOrCollapse.setText("全文");
                       }else{
                           holder.expandOrCollapse.setVisibility(View.GONE);
                       }
                       return true;
                   }
               });
holder.content.setMaxLines(Integer.MAX_VALUE);
holder.content.setText(Util.getContent(position));

2.记录item文本的状态

如果只是像上面写的那样每次初始化item时去获取文本的行数,然后根据行数选择是否折叠文本的话,会引发一个问题:
**
即已经获取过行数的position item滑出可视范围又滑回来时,根据RecyclerView的复用,TextView又会被重新测量高度行数然后是否折叠,有兴趣的同学可以试试,从列表顶部往下滑是没问题,但从底部往上滑,列表会不断跳动,在文字多的情况下甚至滑不回顶部,因为上面即将进入可视范围的item始终处于measure(展开)和超出行数折叠文本的死循环
**

所以当获取完每个position上的item文本行数后应把信息存起来,在这里我们定义三种状态并在每个item初始化时保存起来:
STATE_NOT_OVERFLOW //文本不超过规定行数
STATE_COLLAPSED //文本超过了规定行数,处于折叠状态
STATE_EXPANDED //文本超过了规定行数,被点击后处于展开状态

代码如下:

int state = mTextStateList.get(position, STATE_UNKNOW);
    //如果该item是第一次初始化,则去获取文本的行数
    if(state == STATE_UNKNOW){
        holder.content.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                //这个回调会调用多次,获取完行数记得注销监听
                holder.content.getViewTreeObserver().removeOnPreDrawListener(this);
                //记录文本的状态
                if(holder.content.getLineCount() > MAX_LINE_COUNT){
                    holder.content.setMaxLines(MAX_LINE_COUNT);
                    holder.expandOrCollapse.setVisibility(View.VISIBLE);
                    holder.expandOrCollapse.setText("全文");
                    mTextStateList.put(position, STATE_COLLAPSED);
                }else{
                    holder.expandOrCollapse.setVisibility(View.GONE);
                    mTextStateList.put(position, STATE_NOT_OVERFLOW);
                }
                return true;
            }
        });
        holder.content.setMaxLines(Integer.MAX_VALUE);
        holder.content.setText(Util.getContent(position));
    }else{
        //如果之前已经初始化过了,则使用保存的状态,无需再获取一次
        switch (state){
            case STATE_NOT_OVERFLOW:
                holder.expandOrCollapse.setVisibility(View.GONE);
                break;
            case STATE_COLLAPSED:
                holder.content.setMaxLines(MAX_LINE_COUNT);
                holder.expandOrCollapse.setVisibility(View.VISIBLE);
                holder.expandOrCollapse.setText("全文");
                break;
            case STATE_EXPANDED:
                holder.content.setMaxLines(Integer.MAX_VALUE);
                holder.expandOrCollapse.setVisibility(View.VISIBLE);
                holder.expandOrCollapse.setText("收起");
                break;
        }
        holder.content.setText(Util.getContent(position));
    }

最后设置点击事件:

holder.expandOrCollapse.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int state = mTextStateList.get(position, STATE_UNKNOW);
                    if(state == STATE_COLLAPSED){
                        holder.content.setMaxLines(Integer.MAX_VALUE);
                        holder.expandOrCollapse.setText("收起");
                        mTextStateList.put(position, STATE_EXPANDED);
                    }else if(state == STATE_EXPANDED){
                        holder.content.setMaxLines(MAX_LINE_COUNT);
                        holder.expandOrCollapse.setText("全文");
                        mTextStateList.put(position, STATE_COLLAPSED);
                    }
                }
            });

最终效果图如下:


chip.gif

github地址:https://github.com/CrazyPumPkin/ExpandableText

相关文章

网友评论

  • 码农阿孝:收起和全文有bug 会乱跳
  • feary:我们项目很久之前是这么实现的,其实有bug,大段文字一页显示不下时是获取不到行数的,这个回调也不会直接触发
    feary: @CrazyPumPkin 当时着急解bug,做法非常之挫,当为零时判断为长文😂按理应该有更合适的解法的,一直没来得及去尝试,当时在网上搜了一下感觉做法都大同小异。
    CrazyPumPkin: @feary 这样子啊,我今晚看看,最后你们是怎么解决的呢?
  • ChangQin:思路很赞,学习了 :smile:
  • jon_ly:可以两个TextView交替显示 一个显示全文 一个显示收起
  • 68768b474bfc:这是一个不错简单的实现,但真实项目中还是会用轮子吧。
    CrazyPumPkin:@TellH 可以封装一下
  • 捡淑:66666
  • blink_dagger:用lineNum=textView.getHeight()/textView.getLineHeight();,而不去post
    可以直接获取到吗?
    CrazyPumPkin:@blink_dagger getheight应该也是0,你可以试试
  • hackware:哪里用得着这么麻烦
    CrazyPumPkin: @hackware 请指教,我也觉得有点麻烦

本文标题:朋友圈的“全文”“收起”实现

本文链接:https://www.haomeiwen.com/subject/ruoxsttx.html