前言

最近工作比較多，寫了幾個(gè)小控件跟大家分享一下。首先看圖：

效果圖

這種可以顯示展開和折疊的TextView非常常見，如果全文要當(dāng)作一個(gè)按鈕處理的話，就沒辦法和文字混排，所以以前就和產(chǎn)品商量折中方案，就沒太細(xì)細(xì)研究這個(gè)效果。今天算是補(bǔ)上了。

正文

其實(shí)實(shí)現(xiàn)這個(gè)效果非常簡單，總共就100行代碼。

首先我們要解決的問題是按鈕和文字的混排問題，首選方案肯定是SpannableString，文字的大小，顏色，下劃線都可以定制，用它肯定沒毛病。剩下的就是字符串的截取，如果是折疊我們就截取字符串的前幾行，再減去幾個(gè)字符給全文留出位置，展開就全部展示。

因?yàn)橐４嬖O(shè)置的文字，所以我們需要寫一個(gè)setText方法：

// 折疊時(shí)顯示的最大行數(shù)
private var collapsedMaxLine = 0

// 文字
private var content: String = ""

// 是否需要顯示 全文/收起，不足collapsedMaxLine的行數(shù)，沒必要顯示
private var hasMore = false

fun setText(content: String) {
     this.content = content
     super.setText(content)
     // 重置狀態(tài)
     maxLines = Int.MAX_VALUE
     hasMore = false
}

字符串的截取就放在onMeasure中：

 var collapsed = true
      set(value) {
          if (field != value) {
              field = value
              requestLayout()
          }
      }

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        if (!TextUtils.isEmpty(content)) {
            if (layout != null) {
                // 如果現(xiàn)在的行數(shù)比折疊的是否大，驗(yàn)證是否可以展開
                if (layout.lineCount > collapsedMaxLine) {
                    hasMore = true
                }

                // 如果是折疊
                if (collapsed) {
                    // 行數(shù)保持一致
                    if (layout.lineCount > collapsedMaxLine) {
                        maxLines = collapsedMaxLine
                        // layout可以返回指定的行數(shù)的最后一個(gè)字符的位置，如果不了解的話，后續(xù)會講
                        val endIndex = layout.getLineEnd(collapsedMaxLine - 1)
                        // 減去文字，拼接 ...全部后綴
                        super.setText(getCollapsedContent(endIndex))
                    }
                } else {
                    // 展開狀態(tài) 并且 可以展開
                    if (hasMore) {
                        // 取消行數(shù)限制
                        maxLines = Int.MAX_VALUE
                        // 顯示全部內(nèi)容，拼接 收起后綴
                        super.setText(getAllContent())
                        hasMore = false
                    }
                }
            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}

拼接全部和收起按鈕，需要可以點(diǎn)擊，這里我們還得自定義一個(gè)ClickSpan：

private fun getAllContent(): SpannableStringBuilder {
        return SpannableStringBuilder(content)
            .apply {
                append("收起")
                setSpan(ClickableColorSpan(color = collapsedColor, underLine = collapsedUnderLine) {
                    collapsed = !collapsed
                }, length - 2, length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
            }
    }


    private fun getCollapsedContent(endIndex: Int): SpannableStringBuilder {
        return SpannableStringBuilder(content.substring(0, endIndex - 7))
            .apply {
                append("...全文")
                setSpan(ClickableColorSpan(color = collapsedColor, underLine = collapsedUnderLine) {
                    collapsed = !collapsed
                }, length - 5, length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
            }
    }


    class ClickableColorSpan(
        private val color: Int,
        private val underLine: Boolean,
        private val click: () -> Unit
    ) : ClickableSpan() {

        override fun updateDrawState(ds: TextPaint) {
            ds.color = color
            ds.isUnderlineText = underLine
            // 要注意這句代碼不可以打開，否則無法顯示設(shè)置的UI
//        super.updateDrawState(ds)
        }

        override fun onClick(widget: View) {
            click.invoke()
        }
    }

為什么ClickSpan的super.updateDrawState(ds)不可以打開，因?yàn)檫@個(gè)方法會覆蓋我們的color和下劃線

@Override
public void updateDrawState(@NonNull TextPaint ds) {
    ds.setColor(ds.linkColor);
    ds.setUnderlineText(true);
}

最后千萬別忘了設(shè)置最重要的一步，TextView設(shè)置

init {
    // 不設(shè)置此方法，點(diǎn)擊無效
    movementMethod = LinkMovementMethod.getInstance()
}

到此效果完成。

神奇的Layout

在上面的代碼中，我們使用了TextView的一個(gè)屬性：layout。它在android.text包下，專門輔助TextView繪制文字的類。在上一次開發(fā)歌詞變色的功能中，發(fā)揮了非常重要的作用。

下面介紹一下Layout的常用方法：

// 返回某一行開始的文字的索引，如果line等于lineCount，會返回字符串的長度
public abstract int getLineStart(int line);
// 返回某一行最后一個(gè)字符的索引
public final int getLineEnd(int line) 
// 返回某一個(gè)距離頂部的top
public abstract int getLineTop(int line);
// 返回某一行左邊的間距
public float getLineLeft(int line)
// 返回某一行右邊的間距
public float getLineRight(int line)
// 返回某一行下面的間距
public final int getLineBottom(int line)
// 獲得某一行的寬度
public float getLineWidth(int line)、
// 返回某個(gè)位置所在的行數(shù)
public int getLineForOffset(int offset)

當(dāng)TextView繪制文字后，我們可以通過Layout得到和文字相關(guān)的所有信息，只能說Layout真的是無敵。

問題修復(fù)

問題1：

private fun getCollapsedContent(endIndex: Int): SpannableStringBuilder {
        return SpannableStringBuilder(content.substring(0, endIndex - 7)) // 請注意這句
            .apply {
                append("...全文")
                setSpan(ClickableColorSpan(color = collapsedColor, underLine = collapsedUnderLine) {
                    collapsed = !collapsed
                }, length - 5, length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
            }
    }

這里面有一個(gè)字符串截取的操作，我們本意是想從顯示的字符串中留出“...全文”的位置，但是實(shí)際使用中發(fā)現(xiàn)，如果換行符過多可能導(dǎo)致不足7個(gè)字，行數(shù)仍然超過collapsedMaxLine。

例如內(nèi)容：”1\n2\n\n3\n\n4“，總共是9行，但是如果collapsedMaxLine=3，前三行只有4個(gè)字，導(dǎo)致越界崩潰。

所以此處代碼改為：

        // 計(jì)算最大行數(shù)的字?jǐn)?shù)
        val lineEnd = layout.getLineEnd(collapsedMaxLine - 1)
        val collapsedMaxLineTextCount = lineEnd - layout.getLineStart(collapsedMaxLine - 1)
        return SpannableStringBuilder(
            content.substring(
                0, if (collapsedMaxLineTextCount > 7) {
                    // 如果最后一行超過了7個(gè)字符，就減去7個(gè)字符，給...全文留出空位
                    lineEnd - 7
                } else {
                    // 不截取
                    lineEnd
                }
            )
        )
       ...
    }

問題2：

原本設(shè)置內(nèi)容的方法為setText，此方法容易和系統(tǒng)方法混淆，所以修改為setContent。

總結(jié)

通過今天的小控件，主要還是想安利大家Layout這一神器，有了它處理更復(fù)雜的文字效果都不是問題，有時(shí)間大家可以研究研究。

GitHub地址：點(diǎn)擊查看源碼