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

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

  • 获取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

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

推荐阅读更多精彩内容