自定义View:可伸展折叠的ExpandTextView

前言

最近工作比较多,写了几个小控件跟大家分享一下。首先看图:


效果图

这种可以显示展开和折叠的TextView非常常见,如果全文要当作一个按钮处理的话,就没办法和文字混排,所以以前就和产品商量折中方案,就没太细细研究这个效果。今天算是补上了。

正文

其实实现这个效果非常简单,总共就100行代码。

首先我们要解决的问题是按钮和文字的混排问题,首选方案肯定是SpannableString,文字的大小,颜色,下划线都可以定制,用它肯定没毛病。剩下的就是字符串的截取,如果是折叠我们就截取字符串的前几行,再减去几个字符给全文留出位置,展开就全部展示。

因为要保存设置的文字,所以我们需要写一个setText方法:

// 折叠时显示的最大行数
private var collapsedMaxLine = 0

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

// 是否需要显示 全文/收起,不足collapsedMaxLine的行数,没必要显示
private var hasMore = false

fun setText(content: String) {
     this.content = content
     super.setText(content)
     // 重置状态
     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) {
                // 如果现在的行数比折叠的是否大,验证是否可以展开
                if (layout.lineCount > collapsedMaxLine) {
                    hasMore = true
                }

                // 如果是折叠
                if (collapsed) {
                    // 行数保持一致
                    if (layout.lineCount > collapsedMaxLine) {
                        maxLines = collapsedMaxLine
                        // layout可以返回指定的行数的最后一个字符的位置,如果不了解的话,后续会讲
                        val endIndex = layout.getLineEnd(collapsedMaxLine - 1)
                        // 减去文字,拼接 ...全部后缀
                        super.setText(getCollapsedContent(endIndex))
                    }
                } else {
                    // 展开状态 并且 可以展开
                    if (hasMore) {
                        // 取消行数限制
                        maxLines = Int.MAX_VALUE
                        // 显示全部内容,拼接 收起后缀
                        super.setText(getAllContent())
                        hasMore = false
                    }
                }
            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}

拼接全部和收起按钮,需要可以点击,这里我们还得自定义一个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
            // 要注意这句代码不可以打开,否则无法显示设置的UI
//        super.updateDrawState(ds)
        }

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

为什么ClickSpan的super.updateDrawState(ds)不可以打开,因为这个方法会覆盖我们的color和下划线

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

最后千万别忘了设置最重要的一步,TextView设置

init {
    // 不设置此方法,点击无效
    movementMethod = LinkMovementMethod.getInstance()
}

到此效果完成。

神奇的Layout

在上面的代码中,我们使用了TextView的一个属性:layout。它在android.text包下,专门辅助TextView绘制文字的类。在上一次开发歌词变色的功能中,发挥了非常重要的作用。

下面介绍一下Layout的常用方法:

// 返回某一行开始的文字的索引,如果line等于lineCount,会返回字符串的长度
public abstract int getLineStart(int line);
// 返回某一行最后一个字符的索引
public final int getLineEnd(int line) 
// 返回某一个距离顶部的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)、
// 返回某个位置所在的行数
public int getLineForOffset(int offset)

当TextView绘制文字后,我们可以通过Layout得到和文字相关的所有信息,只能说Layout真的是无敌。

问题修复

问题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)
            }
    }

这里面有一个字符串截取的操作,我们本意是想从显示的字符串中留出“...全文”的位置,但是实际使用中发现,如果换行符过多可能导致不足7个字,行数仍然超过collapsedMaxLine。

例如内容:”1\n2\n\n3\n\n4“,总共是9行,但是如果collapsedMaxLine=3,前三行只有4个字,导致越界崩溃。

所以此处代码改为:

        // 计算最大行数的字数
        val lineEnd = layout.getLineEnd(collapsedMaxLine - 1)
        val collapsedMaxLineTextCount = lineEnd - layout.getLineStart(collapsedMaxLine - 1)
        return SpannableStringBuilder(
            content.substring(
                0, if (collapsedMaxLineTextCount > 7) {
                    // 如果最后一行超过了7个字符,就减去7个字符,给...全文留出空位
                    lineEnd - 7
                } else {
                    // 不截取
                    lineEnd
                }
            )
        )
       ...
    }

问题2:

原本设置内容的方法为setText,此方法容易和系统方法混淆,所以修改为setContent。

总结

通过今天的小控件,主要还是想安利大家Layout这一神器,有了它处理更复杂的文字效果都不是问题,有时间大家可以研究研究。

GitHub地址:点击查看源码

你可能感兴趣的:(自定义View:可伸展折叠的ExpandTextView)