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

时间  2019-11-05
标签 android 自定义 展开 收起 textview 栏目 Android 繁體版
原文   原文链接

故事是这么开始的，有个产品需求需求，要作一个小红书文本折叠的功能，因而就有了后面一系列的东西。不过实现了以后，本身对 TextView 截取文本也了解了很多，具体效果以下：java

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

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

若是概括的不完善，还请指出，不想看过程了能够直接跳到文末查看ExpandableTextView代码git

文本的截取

参考了好些文章，不少实现都是截取文本的最大行，在文本的下一行添加一个按钮，这个作法并不符合需求，因此直接能够PASS了。github

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

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

有BoringLayout、StaticLayout 和 DynamicLayout 三个工具类ide

  • 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);
}
复制代码

最终效果

使用说明

方法 说明
initWidth(int width) 初始化ExpandableText宽度，必须在setOriginalText()以前调用
setMaxLines(int maxLines) 设置最多显示行数
setOpenSuffix(String openSuffix) 设置须要展开时显示的文字，默认为展开
setOpenSuffixColor(@ColorInt int openSuffixColor) 设置须要展开时显示的文字的文字颜色
setCloseSuffix(String closeSuffix) 设置须要收起时显示的文字，默认为收起
setCloseSuffixColor(@ColorInt int closeSuffixColor) 设置须要收起时显示的文字的文字颜色
setCloseInNewLine(boolean closeInNewLine) 设置须要收起时收起文字是否另起一行
setOpenAndCloseCallback(OpenAndCloseCallback callback) 设置展开&收起的点击Callback
setCharSequenceToSpannableHandler(CharSequenceToSpannableHandler handler) 设置文本转换成Spannable的预处理回调，能够处理特殊的文本样式

终于完了

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

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

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

源码地址：ExpandableText-Example

参考文章： 自定义可展开收起TextView，展开收起按钮紧跟文本内容 Android TextView实现查看所有和收起功能

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程