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

详解

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

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

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

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

文本的截取

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

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

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

BoringLayoutStaticLayoutDynamicLayout 三个工具类

  • 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_CENTERALIGN_NORMALALIGN_OPPOSITE 三种
  • float spacingmult:行间距倍数,相当于android:lineSpacingMultiplier
  • float spacingadd:额外增加的行间距,相当于android:lineSpacingExtra
  • boolean includepad:是否包含padding
  • TextUtils.TruncateAt ellipsize:省略的位置,TruncateAt是一个enum,有STARTMIDDLEENDMARQUEE(跑马灯),还有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 对象之后,可以通过 StaticLayoutgetLineCount() 方法知道文本是否会超出我们设置的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 在展开和收起状态的高度就需要在处理文本是通过 StaticLayoutgetHeight() 来获取了。还有就是动画前后 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());为展开和收起添加点击事件,导致收起的动画不正确。最后发现TextViewscrollY的值在执行动画过程被改变了,于是在属性动画监听的applyTransformation方法中调用TextViewsetScrollY(0)方法就可以解决了,对于需求TextView本身不需要滑动,这么处理暂时没有发现什么问题。

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

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

源码地址:https://github.com/MrTrying/ExpandableText-Example/tree/master

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

最后

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

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

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

原文地址:https://blog.51cto.com/14573572/2443925

时间: 2024-11-08 00:47:42

Android 仿小红书自定义展开 收起的TextView的相关文章

商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)

本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城--自定义 Toolbar (一)>中已经对 Toolbar 的一些基本属性以及简单使用做了介绍了,这篇文章就开始介绍如何定义属于自己的 Style 的 Toolbar 了. 自定义 Theme 修改 application 的 style -- AppTheme,自己设置 Toolbar 的背景色以及

html5仿小红书的图片标签功能

最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼. 上传页示例如下图: 可以看到最上面的①是展示区域,也是编辑标签的操作区域:中间②是可滑动的缩略图,在此选择要编辑的图片:最下面③是"添加图片"和"添加标签"两个按钮. 废话不多说,下面介绍具体实现思路. 首先就是要有"选择图片"的按钮. 1 <input type="file" name="fileToUpload"

Android的ExpandableListView的动画展开效果和使用traceview的性能优化

Android的原生提供和展开分组的ListView:ExpandableListView,然而相比于iOS上原生提供的UITableView,其UI能力不足,比如没有原生的动画展开和收起效果支持. 然而性能的优化是没有止境的,当分组内的子view(childView)变得复杂,或者ListView的parent结构复杂,例如内嵌与其它 LinearLayout, FrameLayout或者ScrollView之中,并且parent的使用自定义的重写的onMeasure()方法时,生成child

android 仿ppt进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效果,向内溶解效果,圆形扩展效果, 适用于各种view和viewgroup,activity即用于页面根部viewgroup, 自定义viewgroup自动换行layout, 看效果图 Series of entrance animation effects just like ppt in A

超实用教程,教你用墨刀做出小红书app原型

一个新手怎么用1小时快速学会APP原型设计? 1小时很短,这意味着学习时必须把握APP原型设计中的重点.难点,而非面面俱到. 要在短时间内理解.掌握一个工具的使用,最有效的方式莫过于临摹: 看实例视频教程,并跟着教程在实例素材上操作. 基于这2个点,我们精心挑选了一个在原型效果实现中具有典型性的APP--小红书APP作为案例,结合视频+原型素材+配套教程文档的方式做了一套流程完整.让新手能快速学会APP原型设计的教程! 下面咱们来了解一下这套视频教程有什么吧! 一 基础设置 1.项目类型.尺寸设

Android仿京东首页轮播文字(又名垂直跑马灯)

Android仿京东首页轮播文字(又名垂直跑马灯) 京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个

【Android 仿微信通讯录 导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表

[Android 仿微信通讯录 导航分组列表-上]使用ItemDecoration为RecyclerView打造带悬停头部的分组列表 一 概述 本文是Android导航分组列表系列上,因时间和篇幅原因分上下,最终上下合璧,完整版效果如下: 上部残卷效果如下:两个ItemDecoration,一个实现悬停头部分组列表功能,一个实现分割线(官方demo) 网上关于实现带悬停分组头部的列表的方法有很多,像我看过有主席的自定义ExpandListView实现的,也看过有人用一个额外的父布局里面套 Rec

类似小红书标签效果(补间动画)

昨天老大给布置个任务,为我们的app做下调研,app中有标签的存在,类似小红书和nice的添加标签模式,于是我就试着做出那个一闪一闪的标注点~   仔细看了看小红书的闪闪的标签,得出一个结论: 它是个动画   好吧,这简直是废话. 其实一开始我的思路是拿来主义,去网上找了找类似的“小红书标签效果”等等,然后我发现他们用自定义控件完成了一个这样的动画..就这样,我华丽丽的跑偏了呃呃呃..   自定义控件我不熟啊!! 学. 花了半个下午研究自定义控件,好不容易写出了动画效果. 这个效果的原理是这个样

Android 仿微信朋友圈发动态功能(相册图片多选)

代码分享 代码名称: 仿微信朋友圈发动态功能(相册图片多选) 代码描述: 仿微信朋友圈发动态功能(相册图片多选) 代码托管地址: http://www.apkbus.com/android-152760-1-1.html 代码作者: 楼主 代码效果图: 本帖最后由 ^.^ 于 2014-7-8 16:23 编辑 <ignore_js_op> <ignore_js_op> <ignore_js_op> DEMO一共13个类 大约2000行代码,童鞋们耐心点看基本思路是:1