Android-仿小红书自定义展开-收起的TextView

38次阅读

共计 6863 个字符，预计需要花费 18 分钟才能阅读完成。

详解

故事是这么开始的，有个产品需求需求，要做一个小红书文本折叠的功能，于是就有了后面一系列的东西。不过实现了之后，自己对 TextView 截取文本也了解了不少，具体效果如下：

先总结一下实现的时候需要注意的几个点：

  1. 显示“…展开”时，是截取的一定行数之后，在最后一行的末尾直接显示
  2. “收起”显示在全部文本的下一行，并且是右对齐
  3. 展开和收起的动画效果

如果归纳的不完善，还请指出，不想看过程了可以直接跳到文末查看 ExpandableTextView 代码

文本的截取

参考了好些文章，很多实现都是截取文本的最大行，在文本的下一行添加一个按钮，这个做法并不符合需求，所以直接可以 PASS 了。

转换一下思路，会发现其实这个效果与 TextView 设置 android:maxLines 之后，再设置 android:ellipsize 为 end 很相似，只是 … 替换换成了 …展开，遗憾的是系统并没有提供直接替换 … 的 API。

但是，在涉及到 android:ellipsize 属性处理的 TextView 的源码中可以看到使用了 StaticLayout 了一个可以帮助我们实现效果的工具类 StaticLayout，StaticLayout 是 android 中处理文字换行的一个工具类。

有BoringLayout、StaticLayout 和 DynamicLayout 三个工具类

  • BoringLayout 是单行显示时使用的
  • StaticLayout 是针对不可以变的文本
  • DynamicLayout 则是针对可编辑改变的文本，并且会更新自身。

接下来，就需要知道 StaticLayout 怎么使用了，我们可以直接使用的构造函数有三个

public StaticLayout(CharSequence source, TextPaint paint,
                    int width,
                    Alignment align, float spacingmult, float spacingadd,
                    boolean includepad) {this(source, 0, source.length(), paint, width, align,
         spacingmult, spacingadd, includepad);
}

public StaticLayout(CharSequence source, int bufstart, int bufend,
                    TextPaint paint, int outerwidth,
                    Alignment align,
                    float spacingmult, float spacingadd,
                    boolean includepad) {
    this(source, bufstart, bufend, paint, outerwidth, align,
         spacingmult, spacingadd, includepad, null, 0);
}

public StaticLayout(CharSequence source, int bufstart, int bufend,
        TextPaint paint, int outerwidth,
        Alignment align,
        float spacingmult, float spacingadd,
        boolean includepad,
        TextUtils.TruncateAt ellipsize, int ellipsizedWidth) {
    this(source, bufstart, bufend, paint, outerwidth, align,
            TextDirectionHeuristics.FIRSTSTRONG_LTR,
            spacingmult, spacingadd, includepad, ellipsize, ellipsizedWidth, Integer.MAX_VALUE);
}

使用之前，稍微了解一下方法中参数的作用，以下是比较全的参数说明

  • CharSequence source：需要分行的字符串
  • int bufstart：需要分行的字符串从第几个位置开始
  • int bufend：需要分行的字符串到哪里结束
  • TextPaint paint：画笔对象
  • int outerwidth：layout 的宽度，字符超出宽度时自动换行，也就是内容要显示的宽度
  • Alignment align：对齐方式，有 ALIGN_CENTER、ALIGN_NORMAL、ALIGN_OPPOSITE 三种
  • float spacingmult：行间距倍数，相当于android:lineSpacingMultiplier
  • float spacingadd：额外增加的行间距，相当于android:lineSpacingExtra
  • boolean includepad：是否包含padding
  • TextUtils.TruncateAt ellipsize：省略的位置，TruncateAt是一个 enum，有START、MIDDLE、END、MARQUEE（跑马灯），还有END_SMALL 但是被隐藏了
  • int ellipsizedWidth：开始省略的位置

我们只需要使用参数最少的那个构造方法就能满足了

private Layout createStaticLayout(SpannableStringBuilder spannable) {int contentWidth = initWidth - getPaddingLeft() - getPaddingRight();
    return new StaticLayout(spannable, getPaint(), contentWidth, Layout.Alignment.ALIGN_NORMAL,
            getLineSpacingMultiplier(), getLineSpacingExtra(), false);
}

获取到对应文本的 StaticLayout 对象之后，可以通过 StaticLayout 的 getLineCount() 方法知道文本是否会超出我们设置的maxLines，配合getLineEnd(int line) 方法可以找到最后一行的最后一个字符在文本中的位置。关键代码如下：

Layout layout = createStaticLayout(tempText);
mExpandable = layout.getLineCount() > maxLines;
if(mExpandable){
    // 计算原文截取位置
    int endPos = layout.getLineEnd(maxLines - 1);
    mCloseSpannableStr = charSequenceToSpannable(originalText.subSequence(0, endPos));
    SpannableStringBuilder tempText2 = charSequenceToSpannable(mCloseSpannableStr).append(ELLIPSIS_STRING);
    if (mOpenSuffixSpan != null) {tempText2.append(tempText2);
    }
    // 循环判断，收起内容添加展开后缀后的内容
    Layout tempLayout = createStaticLayout(tempText2);
    while (tempLayout.getLineCount() > maxLines) {int lastSpace = mCloseSpannableStr.length() - 1;
        if (lastSpace == -1) {break;}
        mCloseSpannableStr = charSequenceToSpannable(originalText.subSequence(0, lastSpace));
        tempText2 = charSequenceToSpannable(mCloseSpannableStr).append(ELLIPSIS_STRING);
        if (mOpenSuffixSpan != null) {tempText2.append(mOpenSuffixSpan);
        }
        tempLayout = createStaticLayout(tempText2);
    }
    // 计算收起的文本高度
    mCLoseHeight = tempLayout.getHeight() + getPaddingTop() + getPaddingBottom();

    mCloseSpannableStr.append(ELLIPSIS_STRING);
    if (mOpenSuffixSpan != null) {mCloseSpannableStr.append(mOpenSuffixSpan);
    }
}

这样一来，文本的截取问题就解决了。代码中的 mCloseSpannableStr 就是被折叠之后需要显示的文本对象，考虑到文本中会存在表情或者图片的可能，所以使用 SpannableStringBuilder 来作为文本对象。

“收起”右对齐

对收起文字的处理，使用 SpannableString，设置new AlignmentSpan.Standard(Layout.Alignment.ALIGN_OPPOSITE) 就可以将收起文字显示成右对齐，换行的话，需要在原始文本和收起文字之间在添加 ’n’ 就可以了。

private void updateCloseSuffixSpan() {if (TextUtils.isEmpty(mCloseSuffixStr)) {
        mCloseSuffixSpan = null;
        return;
    }
    mCloseSuffixSpan = new SpannableString(mCloseSuffixStr);
    mCloseSuffixSpan.setSpan(new ForegroundColorSpan(mCloseSuffixColor), 0, mCloseSuffixStr.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    if (mCloseInNewLine) {AlignmentSpan alignmentSpan = new AlignmentSpan.Standard(Layout.Alignment.ALIGN_OPPOSITE);
        mCloseSuffixSpan.setSpan(alignmentSpan, 0, mCloseSuffixStr.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    }
}

动画效果

动画效果就比较简单了，执行动画时在 applyTransformation 方法中改变 TextView 的高度就可以了

class ExpandCollapseAnimation extends Animation {
    private final View mTargetView;// 动画执行 view
    private final int mStartHeight;// 动画执行的开始高度
    private final int mEndHeight;// 动画结束后的高度

    ExpandCollapseAnimation(View target, int startHeight, int endHeight) {
        mTargetView = target;
        mStartHeight = startHeight;
        mEndHeight = endHeight;
        setDuration(400);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        // 计算出每次应该显示的高度，改变执行 view 的高度，实现动画
        mTargetView.getLayoutParams().height = (int) ((mEndHeight - mStartHeight) * interpolatedTime + mStartHeight);
        mTargetView.requestLayout();}
}

而 TextView 在展开和收起状态的高度就需要在处理文本是通过 StaticLayout 的 getHeight() 来获取了。还有就是动画前后 TextView 高度和文本的更新问题，具体代码如下：

/** 执行展开动画 */
private void executeOpenAnim() {
    // 创建展开动画
    if (mOpenAnim == null) {mOpenAnim = new ExpandCollapseAnimation(this, mCLoseHeight, mOpenHeight);
        mOpenAnim.setFillAfter(true);
        mOpenAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {ExpandableTextView.super.setMaxLines(Integer.MAX_VALUE);
                setText(mOpenSpannableStr);
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //  动画结束后 textview 设置展开的状态
                getLayoutParams().height = mOpenHeight;
                requestLayout();
                animating = false;
            }

            @Override
            public void onAnimationRepeat(Animation animation) {}});
    }

    if (animating) {return;}
    animating = true;
    clearAnimation();
    //  执行动画
    startAnimation(mOpenAnim);
}

/** 执行收起动画 */
private void executeCloseAnim() {
    // 创建收起动画
    if (mCloseAnim == null) {mCloseAnim = new ExpandCollapseAnimation(this, mOpenHeight, mCLoseHeight);
        mCloseAnim.setFillAfter(true);
        mCloseAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) { }

            @Override
            public void onAnimationEnd(Animation animation) {
                animating = false;
                ExpandableTextView.super.setMaxLines(mMaxLines);
                setText(mCloseSpannableStr);
                getLayoutParams().height = mCLoseHeight;
                requestLayout();}

            @Override
            public void onAnimationRepeat(Animation animation) {}});
    }

    if (animating) {return;}
    animating = true;
    clearAnimation();
    //  执行动画
    startAnimation(mCloseAnim);
}

最终效果

使用说明

终于完了

添加动画效果之后，使用 setMovementMethod(LinkMovementMethod.getInstance()); 为展开和收起添加点击事件，导致收起的动画不正确。最后发现 TextView 的scrollY的值在执行动画过程被改变了，于是在属性动画监听的 applyTransformation 方法中调用 TextView 的setScrollY(0)方法就可以解决了，对于需求 TextView 本身不需要滑动，这么处理暂时没有发现什么问题。

同时还考虑到 ExpandableTextView 并不应该处理 emoji 表情等等一些特殊的文本形式，所以提供了CharSequenceToSpannableHandler 扩展接口，可以自行扩展处理文本的显示。

以上就是 ExpandableTextView 整个的实现过程和思路，分享出来，如果有更好的方法欢迎评论中讨论

源码地址：https://github.com/MrTrying/E…

Android 学习 PDF+ 架构视频 + 面试文档 + 源码笔记

最后

感谢大家能耐着性子，看完这篇文章。

在这里我也分享一份自己收录整理的 Android 学习 PDF+ 架构视频 + 面试文档 + 源码笔记，还有 高级架构技术进阶脑图、Android 开发面试专题资料，高级进阶架构资料 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习

如果你有需要的话，可以 点赞 ， 关注我，然后加入Android 开发交流群（820198451）免费领取

正文完
android 移动应用开发 程序员
发表至：无分类
2019-10-19
 0