Android 可摺疊TextView

本篇文章已受權微信公衆號 guolin_blog （郭霖）獨家發佈

當文字內容超過指定行數後，顯示省略號和全文。

上圖的效果在微博，b站上都有。這裏我選擇繼承AppCompatTextView實現。

實現思路

• 當內容超過指定行數後，計算最大行數第一個(start)和最後一個字符(end)在整個字符串裏面的位置
• 測量要拼接的內容(demo中是... 全文)的寬度
• 計算跟拼接內容寬度至關的字符個數(num)
• 將整個字符串從0到(end-num)進行截取
• 拼接要顯示的內容,設置點擊事件
• 設置文字

這裏會有一點小小的問題，提示內容是緊跟着原來的文本，而不是在TextView的邊界上。並且用ClickableSpan設置點擊事件，若是TextView設置了點擊事件，會跟TextView自己的點擊事件同時觸發。沒有設置的話，點擊其餘文字，點擊事件不會傳遞到父View，而是被TextView消費掉。以下圖:

這裏再提供一種思路

• 前幾步跟上面相同，都是對內容進行截取，設置文字
• 文字繪製完畢後，手動把提示的內容繪製上去
• 添加點擊事件

這種方法能夠保證提示在TextView的邊界上，可是點擊事件須要本身重寫onTouchEvent()本身設置，略顯麻煩。

下面講講具體實現的關鍵步驟:

內容截取

SpannableStringBuilder span = new SpannableStringBuilder();
            int start = layout.getLineStart(mShowMaxLine - 1);
            int end = layout.getLineEnd(mShowMaxLine - 1);
            if (mTipGravity == END) {
                TextPaint paint = getPaint();
                StringBuilder builder = new StringBuilder(ELLIPSIZE_END).append(" ").append(mFoldText);
                end -= paint.breakText(mOriginalText, start, end, false, paint.measureText(builder.toString()), null);
            } else {
                end--;
            }
複製代碼

當內容行數超過最大行數時，對文本進行截取。layout是TextView的layout，這裏的getLineStart()和getLineEnd()分別獲取該行的第一個和最後一個字符的位置(這裏的位置是從第一個字符開始算的)。breakText()方法計算出要截取的字符個數。 這裏簡單說下breakText()這個方法：

參數:

• 測量的字符串
• 測量開始的位置
• 測量結束的位置
• 測量方向,true從前日後，false從後往前
• 截取的字符串最大寬度
• 截取字符串實際寬度

最後返回須要截取的字符個數。 內容截取完後，對提示文本進行處理，下面分別對兩種方法進行簡單講解

方法一：直接拼接內容，設置點擊事件

CharSequence ellipsize = mOriginalText.subSequence(0, end);
  span.append(ellipsize);
  span.append(ELLIPSIZE_END);
 if (mTipGravity == END) {
                span.append(" ");
            } else {
                span.append("\n");
            }
            int length;
            if (isExpand) {
                span.append(mExpandText);
                length = mExpandText.length();
            } else {
                span.append(mFoldText);
                length = mFoldText.length();
            }
            if (mTipClickable) {
                span.setSpan(mSpan, span.length() - length, span.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
                setMovementMethod(LinkMovementMethod.getInstance());
            }
            span.setSpan(new ForegroundColorSpan(mTipColor), span.length() - length, span.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        }
        super.setText(span, type);
複製代碼

經過SpannableString在截取後的內容上進行文字的拼接，而且設置相應的點擊事件。

方法二：重寫onDraw()方法繪製提示文字，重寫onTouchEvent()設置點擊事件

摺疊狀態:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isOverMaxLine && !isExpand) {
            //摺疊
            if (mTipGravity == END) {
                minX = getWidth() - getPaddingLeft() - getPaddingRight() - getTextWidth(" 全文");
                maxX = getWidth() - getPaddingLeft() - getPaddingRight();
                minY = getHeight() - (getPaint().getFontMetrics().descent - getPaint().getFontMetrics().ascent) - getPaddingBottom();
                maxY = getHeight() - getPaddingBottom();
                canvas.drawText(" 全文", minX,
                        getHeight() - getPaint().getFontMetrics().descent - getPaddingBottom(), mPaint);
            } else {
                minX = getPaddingLeft();
                maxX = minX + getTextWidth("全文");
                minY = getHeight() - (getPaint().getFontMetrics().descent - getPaint().getFontMetrics().ascent) - getPaddingBottom();
                maxY = getHeight() - getPaddingBottom();
                canvas.drawText("全文", minX, getHeight() - getPaint().getFontMetrics().descent - getPaddingBottom(), mPaint);
            }
        }
    }
複製代碼

文字截取後，重寫onDraw()方法，計算座標繪製文字。

PS:minX,maxX,minY,maxY這四個值是用於後面的點擊事件，若是不須要能夠忽略.這四個值分別對應提示語的左上角跟右下角座標。

展開狀態：

//文字展開
            SpannableStringBuilder spannable = new SpannableStringBuilder(mOriginalText);
            if (isShowTipAfterExpand) {
                spannable.append(" 收起全文");
                spannable.setSpan(new ForegroundColorSpan(mTipColor), spannable.length() - 5, spannable.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
            }
            super.setText(spannable, type);
複製代碼

這裏的座標計算比上面稍稍複雜一點，這裏提示語可能會出現換行的狀況。

因此須要增長多一個變量記錄多一個y值。

int mLineCount = getLineCount();
            Layout layout = getLayout();
            minX = getPaddingLeft() + layout.getPrimaryHorizontal(spannable.toString().lastIndexOf("收") - 1);
            maxX = getPaddingLeft() + layout.getSecondaryHorizontal(spannable.toString().lastIndexOf("文") + 1);
            Rect bound = new Rect();
            if (mLineCount > originalLineCount) {
                //不在同一行
                layout.getLineBounds(originalLineCount - 1, bound);
                minY = getPaddingTop() + bound.top;
                middleY = minY + getPaint().getFontMetrics().descent - getPaint().getFontMetrics().ascent;
                maxY = middleY + getPaint().getFontMetrics().descent - getPaint().getFontMetrics().ascent;
            } else {
                //同一行
                layout.getLineBounds(originalLineCount - 1, bound);
                minY = getPaddingTop() + bound.top;
                maxY = minY + getPaint().getFontMetrics().descent - getPaint().getFontMetrics().ascent;
            }
複製代碼

PS：這裏我選擇直接拼接的方式，若是展開狀態也須要貼着邊界，請參考摺疊狀態自行實現。

最後重寫onTouchEvent()設置點擊事件

@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (mTipClickable) {
            switch (event.getActionMasked()) {
                case MotionEvent.ACTION_DOWN:
                    clickTime = System.currentTimeMillis();
                    if (!isClickable()) {
                        if (isInRange(event.getX(), event.getY())) {
                            return true;
                        }
                    }
                    break;

                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    long delTime = System.currentTimeMillis() - clickTime;
                    clickTime = 0L;
                    if (delTime < ViewConfiguration.getTapTimeout() && isInRange(event.getX(), event.getY())) {
                        isExpand = !isExpand;
                        setText(mOriginalText);
                        return true;
                    }
                    break;
                default:
                    break;
            }
        }
        return super.onTouchEvent(event);
    }
複製代碼

PS：ACTION_DOWN這裏須要判斷一下TextView自己是否設置了點擊事件，若是沒有的話，須要人爲的retrun true，不然點擊事件沒法傳遞，若果以爲點擊範圍太小，能夠自行調節isInRange方法。

下面來看看方法一的兩個問題產生的緣由：

• 爲何ClickableSpan的點擊事件會跟TextView的點擊事件同時觸發

先來看看TextView的onTouchEvent()方法

@Override
    public boolean onTouchEvent(MotionEvent event) {
        final int action = event.getActionMasked();
        if (mEditor != null) {
            mEditor.onTouchEvent(event);

            if (mEditor.mSelectionModifierCursorController != null
                    && mEditor.mSelectionModifierCursorController.isDragAcceleratorActive()) {
                return true;
            }
        }

        final boolean superResult = super.onTouchEvent(event);
        //省略...
        if ((mMovement != null || onCheckIsTextEditor()) && isEnabled()
                && mText instanceof Spannable && mLayout != null) {
            boolean handled = false;
            if (mMovement != null) {
                handled |= mMovement.onTouchEvent(this, (Spannable) mText, event);
            }
          //省略...
            if (handled) {
                return true;
            }
        }

        return superResult;
    }
複製代碼

這裏能夠看到先執行了父類的onTouchEvent()方法，而後執行了MovementMethod的onTouchEvent()方法。咱們這裏設置的是LinkMovementMethod，跟蹤進去看看。

@Override
    public boolean onTouchEvent(TextView widget, Spannable buffer,
                                MotionEvent event) {
        int action = event.getAction();

        if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_DOWN) {
            int x = (int) event.getX();
            int y = (int) event.getY();

            x -= widget.getTotalPaddingLeft();
            y -= widget.getTotalPaddingTop();

            x += widget.getScrollX();
            y += widget.getScrollY();

            Layout layout = widget.getLayout();
            int line = layout.getLineForVertical(y);
            int off = layout.getOffsetForHorizontal(line, x);

            ClickableSpan[] links = buffer.getSpans(off, off, ClickableSpan.class);

            if (links.length != 0) {
                if (action == MotionEvent.ACTION_UP) {
                    links[0].onClick(widget);
                } else if (action == MotionEvent.ACTION_DOWN) {
                    Selection.setSelection(buffer,
                        buffer.getSpanStart(links[0]),
                        buffer.getSpanEnd(links[0]));
                }
                return true;
            } else {
                Selection.removeSelection(buffer);
            }
        }

        return super.onTouchEvent(widget, buffer, event);
    }
複製代碼

前面一大段是計算點擊的位置是否有ClickableSpan，有的話，ACTION_UP和ACTION_DOWN就會返回true,而且在ACTION_UP事件調用ClickableSpan的onClick()方法。沒有的話就返回super.onTouchEvent(widget, buffer, event),斷點發現這個值一直都是true(後面會用到)。

也就是說，不管點擊的地方有沒有ClickSpan，handled都是true,那麼TxetView的onTouchEvent()就會返回true，也就是說TextView會消費這個點擊事件。

PS：不是很懂爲何要這麼設計，按個人理解應該是先判斷有沒有ClickableSpan的事件，有的話就執行，返回true，告訴TextView，我消費了事件。沒有的話TextView才執行父類的onTouchEvent()方法。

既然先執行了TextView的點擊事件再去判斷有沒有ClickableSpan，那是否是沒辦法解決呢？也不是。 經過打印日誌發現，TextView會先執行ClickableSpan的點擊方法，而後再執行view的點擊方法，緣由不作深究(其實我也不知道)。 因此，能夠經過重寫TextView的setOnClickListener()和onClick()方法，增長一個變量進行判斷。

@Override
    public void setOnClickListener(@Nullable OnClickListener l) {
        listener = l;
        super.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        if (isExpandSpanClick) {
            isExpandSpanClick = false;
        } else {
            listener.onClick(v);
        }
    }
複製代碼

• 設置了ClickableSpan，爲何TextView的點擊事件沒法傳遞到父view

上面說到，在TextView的onTouchEvent()方法裏，會先調用super.onTouchEvent(event),而後調用mMovement.onTouchEvent(this, (Spannable) mText, event)，最後返回。由於handled的值一直都是true，也就是事件一直都被TextView消費了，致使沒法傳遞。因此，咱們要修改一下LInkMovementMethod的onTouchEvent()方法，當點擊範圍內沒有ClickableSpan的時候返回false。 修改完畢後發現點擊事件仍是沒法傳遞。從新回到TextView的onTouchEvent()方法，如今它的返回值是superResult，也就是super.onTouchenent()。 看下view的onTouchEvent()方法

public boolean onTouchEvent(MotionEvent event) {
        final float x = event.getX();
        final float y = event.getY();
        final int viewFlags = mViewFlags;
        final int action = event.getAction();

        final boolean clickable = ((viewFlags & CLICKABLE) == CLICKABLE
                || (viewFlags & LONG_CLICKABLE) == LONG_CLICKABLE)
                || (viewFlags & CONTEXT_CLICKABLE) == CONTEXT_CLICKABLE;
        //...省略
        if (clickable || (viewFlags & TOOLTIP) == TOOLTIP) {
            switch (action) {
                case MotionEvent.ACTION_UP:
                    //省略...
                    break;

                case MotionEvent.ACTION_DOWN:
                   //省略...
                    break;

                case MotionEvent.ACTION_CANCEL:
                   //省略...
                    break;

                case MotionEvent.ACTION_MOVE:
                   //省略...
                    break;
            }

            return true;
        }

        return false;
    }
複製代碼

首先clickable這個變量，若是view能夠點擊、長按、上下文點擊，clickable爲true。一路斷點到if這裏，clickable爲true，因此直接返回true，而這個值在TextView的onTouchEvent()裏會看成返回值，就告訴父view，這個事件被消費了。但是textView默認是不能點擊，長按的。也就是設置ClickableSpan的時候改變了這些設置。

public final void setMovementMethod(MovementMethod movement) {
        if (mMovement != movement) {
            mMovement = movement;

            if (movement != null && !(mText instanceof Spannable)) {
                setText(mText);
            }

            fixFocusableAndClickableSettings();

            // SelectionModifierCursorController depends on textCanBeSelected, which depends on
            // mMovement
            if (mEditor != null) mEditor.prepareCursorControllers();
        }
    }
複製代碼

setMovementMethod()方法裏面有個fixFocusableAndClickableSettings()方法，跟蹤進去

private void fixFocusableAndClickableSettings() {
        if (mMovement != null || (mEditor != null && mEditor.mKeyListener != null)) {
            setFocusable(FOCUSABLE);
            setClickable(true);
            setLongClickable(true);
        } else {
            setFocusable(FOCUSABLE_AUTO);
            setClickable(false);
            setLongClickable(false);
        }
    }
複製代碼

發現這裏改變了設置，引起了上面的一系列問題。 因此，咱們還須要在設置ClickableSpan以後調用

setFocusable(false);
setClickable(false);
setLongClickable(false);
複製代碼

這樣，事件才能傳遞到父view

有任何疑問或者demo有問題的能夠在下方留言，看到了會回覆的。

---

修復了recyclerView中複用問題，具體使用參考demo_Java版的

參考： blog.csdn.net/zhuhai__yiz…

附上demo:

Java

Kotlin