故事是这么开始的，有个产品需求需求，要做一个小红书文本折叠的功能，于是就有了后面一系列的东西。不过实现了之后，自己对 TextView 截取文本也了解了不少，具体效果如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Fq7gb3U-1570712800064)(https://upload-images.jianshu.io/upload_images/15679108-cfbfbdc52eb158ae?imageMogr2/auto-orient/strip)]
先总结一下实现的时候需要注意的几个点：
- 显示 “…展开” 时，是截取的一定行数之后，在最后一行的末尾直接显示
- “收起” 显示在全部文本的下一行，并且是右对齐
- 展开和收起的动画效果
如果归纳的不完善，还请指出，不想看过程了可以直接跳到文末查看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);
}
最终效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLW0yRH5-1570712800065)(https://upload-images.jianshu.io/upload_images/15679108-1e2575a30a98bc26?imageMogr2/auto-orient/strip)]
使用说明
| 方法 | 说明 |
|---|---|
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整个的实现过程和思路，分享出来，如果有更好的方法欢迎评论中讨论源码地址：https://github.com/MrTrying/ExpandableText-Example/tree/master
扫一扫
2241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
