Android - 仿小紅書自定義展開/收起的TextView

圖片發(fā)自簡書App

故事是這么開始的，有個產(chǎn)品需求需求，要做一個小紅書文本折疊的功能，于是就有了后面一系列的東西。不過實現(xiàn)了之后，自己對 TextView 截取文本也了解了不少，具體效果如下：

圖片發(fā)自簡書App

先總結一下實現(xiàn)的時候需要注意的幾個點：

  1. 顯示 “...展開” 時，是截取的一定行數(shù)之后，在最后一行的末尾直接顯示
  2. “收起” 顯示在全部文本的下一行，并且是右對齊
  3. 展開和收起的動畫效果

如果歸納的不完善，還請指出，不想看過程了可以直接跳到文末查看ExpandableTextView代碼

文本的截取

參考了好些文章，很多實現(xiàn)都是截取文本的最大行，在文本的下一行添加一個按鈕，這個做法并不符合需求，所以直接可以PASS了。

轉(zhuǎn)換一下思路，會發(fā)現(xiàn)其實這個效果與 TextView 設置 android:maxLines 之后，再設置 android:ellipsize 為 end 很相似，只是 ... 替換換成了 ...展開 ，遺憾的是系統(tǒng)并沒有提供直接替換 ... 的API。

但是，在涉及到 android:ellipsize 屬性處理的 TextView 的源碼中可以看到使用了 StaticLayout 了一個可以幫助我們實現(xiàn)效果的工具類 StaticLayout，StaticLayout 是android中處理文字換行的一個工具類。

有BoringLayout、StaticLayout 和 DynamicLayout 三個工具類

  • BoringLayout 是單行顯示時使用的
  • StaticLayout 是針對不可以變的文本
  • DynamicLayout 則是針對可編輯改變的文本，并且會更新自身。

接下來，就需要知道 StaticLayout 怎么使用了，我們可以直接使用的構造函數(shù)有三個

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);
}

使用之前，稍微了解一下方法中參數(shù)的作用，以下是比較全的參數(shù)說明

  • CharSequence source：需要分行的字符串
  • int bufstart：需要分行的字符串從第幾個位置開始
  • int bufend：需要分行的字符串到哪里結束
  • TextPaint paint：畫筆對象
  • int outerwidth：layout的寬度，字符超出寬度時自動換行，也就是內(nèi)容要顯示的寬度
  • Alignment align：對齊方式，有 ALIGN_CENTER、ALIGN_NORMAL、ALIGN_OPPOSITE 三種
  • float spacingmult：行間距倍數(shù)，相當于android:lineSpacingMultiplier
  • float spacingadd：額外增加的行間距，相當于android:lineSpacingExtra
  • boolean includepad：是否包含padding
  • TextUtils.TruncateAt ellipsize：省略的位置，TruncateAt是一個enum，有START、MIDDLE、END、MARQUEE（跑馬燈），還有END_SMALL但是被隱藏了
  • int ellipsizedWidth：開始省略的位置

我們只需要使用參數(shù)最少的那個構造方法就能滿足了

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);
    }
    //循環(huán)判斷，收起內(nèi)容添加展開后綴后的內(nèi)容
    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);
    }
}

動畫效果

動畫效果就比較簡單了，執(zhí)行動畫時在applyTransformation方法中改變TextView的高度就可以了

class ExpandCollapseAnimation extends Animation {
    private final View mTargetView;//動畫執(zhí)行view
    private final int mStartHeight;//動畫執(zhí)行的開始高度
    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) {
        //計算出每次應該顯示的高度，改變執(zhí)行view的高度，實現(xiàn)動畫
        mTargetView.getLayoutParams().height = (int) ((mEndHeight - mStartHeight) * interpolatedTime + mStartHeight);
        mTargetView.requestLayout();
    }
}

而 TextView 在展開和收起狀態(tài)的高度就需要在處理文本是通過 StaticLayout 的 getHeight() 來獲取了。還有就是動畫前后 TextView 高度和文本的更新問題，具體代碼如下：

/** 執(zhí)行展開動畫 */
private void executeOpenAnim() {
    //創(chuàng)建展開動畫
    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設置展開的狀態(tài)
                getLayoutParams().height = mOpenHeight;
                requestLayout();
                animating = false;
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

    if (animating) {
        return;
    }
    animating = true;
    clearAnimation();
    //  執(zhí)行動畫
    startAnimation(mOpenAnim);
}

/** 執(zhí)行收起動畫 */
private void executeCloseAnim() {
    //創(chuàng)建收起動畫
    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();
    //  執(zhí)行動畫
    startAnimation(mCloseAnim);
}

最終效果

圖片發(fā)自簡書App

使用說明

方法 說明
initWidth(int width) 初始化ExpandableText寬度，必須在setOriginalText()之前調(diào)用
setMaxLines(int maxLines) 設置最多顯示行數(shù)
setOpenSuffix(String openSuffix) 設置需要展開時顯示的文字，默認為展開
setOpenSuffixColor(@ColorInt int openSuffixColor) 設置需要展開時顯示的文字的文字顏色
setCloseSuffix(String closeSuffix) 設置需要收起時顯示的文字，默認為收起
setCloseSuffixColor(@ColorInt int closeSuffixColor) 設置需要收起時顯示的文字的文字顏色
setCloseInNewLine(boolean closeInNewLine) 設置需要收起時收起文字是否另起一行
setOpenAndCloseCallback(OpenAndCloseCallback callback) 設置展開&收起的點擊Callback
setCharSequenceToSpannableHandler(CharSequenceToSpannableHandler handler) 設置文本轉(zhuǎn)換成Spannable的預處理回調(diào)，可以處理特殊的文本樣式

終于完了

添加動畫效果之后，使用setMovementMethod(LinkMovementMethod.getInstance());為展開和收起添加點擊事件，導致收起的動畫不正確。最后發(fā)現(xiàn)TextView的scrollY的值在執(zhí)行動畫過程被改變了，于是在屬性動畫監(jiān)聽的applyTransformation方法中調(diào)用TextView的setScrollY(0)方法就可以解決了，對于需求TextView本身不需要滑動，這么處理暫時沒有發(fā)現(xiàn)什么問題。

同時還考慮到 ExpandableTextView 并不應該處理emoji表情等等一些特殊的文本形式，所以提供了CharSequenceToSpannableHandler 擴展接口，可以自行擴展處理文本的顯示。

以上就是ExpandableTextView整個的實現(xiàn)過程和思路，分享出來，如果有更好的方法歡迎評論中討論

源碼地址：ExpandableText-Example

參考文章：
自定義可展開收起TextView，展開收起按鈕緊跟文本內(nèi)容
Android TextView實現(xiàn)查看全部和收起功能

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容