Android 仿小红书自定义展开 收起的TextView
2019-10-19 21:09
3351 查看
详解
故事是这么开始的,有个产品需求需求,要做一个小红书文本折叠的功能,于是就有了后面一系列的东西。不过实现了之后,自己对
TextView截取文本也了解了不少,具体效果如下:
先总结一下实现的时候需要注意的几个点:
- 显示 “…展开” 时,是截取的一定行数之后,在最后一行的末尾直接显示
- “收起” 显示在全部文本的下一行,并且是右对齐
- 展开和收起的动画效果
如果归纳的不完善,还请指出,不想看过程了可以直接跳到文末查看
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/ExpandableText-Example/tree/master
最后
感谢大家能耐着性子,看完这篇文章。
在这里我也分享一份自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记,还有高级架构技术进阶脑图、Android开发面试专题资料,高级进阶架构资料帮助大家学习提升进阶,也节省大家在网上搜索资料的时间来学习,也可以分享给身边好友一起学习
如果你有需要的话,可以点赞,关注我,然后加入Android开发交流群(820198451)免费领取
相关文章推荐
- Android中SpannableString学习以及实现自定义TextView的显示更多(展开)和收起功能
- android TextView 文本内容收起,展开的效果实现
- 自定义可展开收起TextView,展开收起按钮紧跟文本内容
- 自定义view实现TextView展开收起效果
- android ExpandableTextView-自定义可以动态展开/收缩显示长文本的TextView
- android ExpandableTextView-自定义可以动态展开/收缩显示长文本的TextView
- [Android]自定义可展开的ExpandTextView
- Android自定义View——从零开始实现可展开收起的水平菜单栏
- Android自定义TextView仿微信朋友圈文字展开全文功能
- Android自定义控件之全文收起TextView(继承TextView法)
- Android自定义控件之自定义TextView,实现drawableLeft可以和文字一起居中
- Android实现可以展开的TextView
- Android进阶学习-使用Canvas自定义简单TextView(1)
- Android自定义TextView 自定义设置圆角背景色
- android 自定义textview属性配置
- Android中为TextView增加自定义的HTML标签
- Android自定义控件之TextView的展开与折叠
- 自定义android控件——TextView 并添…
- android自定义View-垂直滚动的TextView
- Android TextView多文本折叠展开效果