关于ExpandableTextView几点优化

本文详细记录了在使用ExpandableTextView实现类似朋友圈效果时遇到的问题,包括内容超出一屏高度计算错误、点击事件无效以及多次点击后文字消失的情况。通过分析和调试,找到了解决方案,涉及RecyclerView的适配器逻辑、事件处理和动画效果优化。
摘要由CSDN通过智能技术生成

前一段时间公司项目需要用到类似于朋友圈效果的折叠和收起功能。具体功能如下:1.点击翻译时,全文展开,并显示下方翻译结果;2.点击收起翻译时,全文收起,翻译结果隐藏;3.item展开或收起状态需要保存。上网搜索到了Manabu-GT/ExpandableTextViewChen-Sir/ExpandableTextView,三下五除二快速完成交给测试,简直so easy!

但是随后测试提交给我的bug却给我了很大的难题:

1.内容足够长,超出一屏, mCollapsedHeight计算的有问题;
2.当显示文字的View错位的时候,点击“收起/展开”事件无效。
3.多次滑动列表过程中,重复点击“收起/展开”操作时,有时文字不可见,并“收起/展开”按钮消失;

图1 APP效果图展示.png

为何会出现上述情况,首页先ExpandableTextView看看有木有解决办法,但是看了一圈的Issue,上面出现的问题依然没有得到解决。下面记录着我是如何解决问题和分享问题的思路,仅供参考,不一定适用于所用项目。

一、内容足够长,超出一屏, mCollapsedHeight为0的解决方法

从下面的ExpandableTextView可以看出折叠高度在OnMeasure获取,当点击“收起/展开”按钮时,将高度赋给View,目前按程序代码上看没有什么大的问题。那么就只能从Debug出手,在Debug跟踪过程中,我们发现在点击“收起”时,mCollapsedHeight高度为0。明明我们存储高度,为何高度为0呢?Why??

   @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (!mRelayout || getVisibility() == View.GONE) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            return;
        }
        mRelayout = false;
        ...
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (mTv.getLineCount() <= mMaxCollapsedLines) {
            return;
        }
        ...
        // Re-measure with new setup
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (mCollapsed) {
            ...
            mCollapsedHeight = getMeasuredHeight();
            if (mListener != null) {
                mListener.onCollapsedHeight(mCollapsedHeight);
            }
        }
    }

    @Override
    public void onClick(View view) {
        ...
        Animation animation;
        if (mCollapsed) {
            animation = new ExpandCollapseAnimation(this, getHeight(), mCollapsedHeight);
        } else {
            animation = new ExpandCollapseAnimation(this, getHeight(), getHeight() +
                    mTextHeightWithMaxLines - mTv.getHeight());
        }
        ...
    }

   class ExpandCollapseAnimation extends Animation {
        private final View mTargetView;
  
以下是实现TextView展开与收起效果的方法: 1. 使用MaxLines属性和Ellipsize属性: ```xml <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="2" android:ellipsize="end" android:text="这是一段很长的文本,需要展开和收起" /> ``` 在布局文件中,将TextView的maxLines属性设置为2,表示最多显示两行文本,然后将ellipsize属性设置为end,表示超出两行的文本以省略号显示。 2. 使用ExpandableTextView库: 可以使用第三方库ExpandableTextView来实现TextView的展开与收起效果。首先,在build.gradle文件中添加以下依赖: ```groovy implementation 'com.ms-square:expandableTextView:0.1.4' ``` 然后,在布局文件中使用ExpandableTextView: ```xml <com.ms.square.android.expandabletextview.ExpandableTextView android:id="@+id/expandableTextView" android:layout_width="match_parent" android:layout_height="wrap_content" app:animDuration="200" app:maxCollapsedLines="2" app:animAlphaStart="0.7" app:expandDrawable="@drawable/ic_expand" app:collapseDrawable="@drawable/ic_collapse" app:expandDuration="200" app:collapseAnimDuration="200" app:trimCollapsedText="...展开" app:trimExpandedText="收起" app:trimMode="trim" app:trimLength="80" app:trimLines="2" app:trimCollapsedTextColor="@color/colorAccent" app:trimExpandedTextColor="@color/colorPrimary" app:trimEllipsize="end" app:trimClickable="true" app:trimExpandedTextGravity="left" app:trimCollapsedTextGravity="left" app:trimShowLess="true" app:trimShowMore="true" app:trimTypeface="fonts/Roboto-Regular.ttf" app:trimCollapsedTextSize="14sp" app:trimExpandedTextSize="14sp" app:trimCollapsedTextAppearance="@style/TextAppearance.AppCompat.Body1" app:trimExpandedTextAppearance="@style/TextAppearance.AppCompat.Body1" /> ``` 这样就可以实现TextView的展开与收起效果
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值