開始前
大家做一些文本簡介展示需求時可能會遇到文本過長的場景，這時視覺同學可能會要求設置最大行數並在末尾展示"查看更多"（後面簡稱 MoreText）。廢話不多說，先看下要求實現的效果(圖爲實現後的Demo效果):
通過看效果很明顯簡單的使用 TextView 或者佈局堆疊是沒法實現這樣的效果了，索性就自定義一個 View。
功能實現本身非常簡單，本文也只是簡單記錄下實現過程順便複習一下文本相關的自定義 View。 文章代碼過多可結合 Demo 查看
實現思路
基本的實現思路就是將每個文字進行排版佈局，計算出當前文字的位置，繪製在 View 上：
很明顯，我們重點要放在排版上，通過分析使用場景，需要注意以下幾點：
- MoreText 文字樣式與普通文字不同需要使用單獨的 TextPaint
- "..." 需要跟隨最大行文本末尾展示且與普通文字樣式相同
- 需要考慮最大行位置中存在 \n 的場景
準備知識點
給一張文字繪製位置的示例圖，其他請參考之前的文章 支持段落的 TextView。
ClickMoreTextView 實現
結合上面的內容，我們就可以實現一個支持 MoreText 的 TextView 了。
準備工作
首先寫一個 ClickMoreTextView 繼承自 View ，重寫其必要方法：
class ClickMoreTextView : View {
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
//...
}
override fun draw(canvas: Canvas?) {
super.draw(canvas)
//...
}
}
由於後續要操作每一個字符，所以聲明一個 Char 數組，設置文本時爲其賦值：
private var textCharArray = charArrayOf()
/**
* 文本內容
*/
var text = ""
set(value) {
field = value
textCharArray = value.toCharArray()
}
爲普通文字和 MoreText 聲明不同的 TextPaint，並在構造方法中做相應初始化操作，例如：文字顏色、大小、是否加粗等等。特別的，我們將其聲明爲 public 是爲了方便用戶可以直接修改相應文字屬性：
public var textPaint: TextPaint = TextPaint()
public var moreTextPaint: TextPaint = TextPaint()
另外爲方便繪製我們聲明一個用來描述文字位置的內部類 TextPosition，並創建一個該類型的集合 textPositions：
/**
* 文字位置
*/
private val textPositions = ArrayList<TextPosition>()
/**
* 當前文字位置
*/
class TextPosition {
var text = ""
var x = 0f
var y = 0f
}
排版
給文字排版首先需要拿到當前佈局的寬度用於判斷文字需要折行的位置，所以選擇在 onMeasure 中處理：
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val width = MeasureSpec.getSize(widthMeasureSpec)
var height = MeasureSpec.getSize(heightMeasureSpec)
breadText(width)
//...
}
但是考慮到 onMeasure 會有多次調用，故設置一個防止重複排版的 flag：
private var isBreakFlag = false//排版標識
private fun breadText(w: Int) {
if (isBreakFlag) {
return
}
isBreakFlag = true
//...
}
另外需要注意的是當 View 確實需要重排時要將排版標識重置，所以重寫 requestLayout() 方法來重置：
override fun requestLayout() {
super.requestLayout()
isBreakFlag = false
}
完整排版代碼：
private fun breadText(w: Int) {
if (w <= 0) {
return
}
if (isBreakFlag) {
return
}
if (DEBUG) {
Log.d(TAG, "breadText: 開始排版")
}
moreTextW = moreTextPaint.measureText(moreText)
isBreakFlag = true
val availableWidth = w - paddingRight
textLineYs.clear()
textPositions.clear()
//x 的初始化位置
val initX = paddingLeft.toFloat()
var curX = initX
var curY = paddingTop.toFloat()
val textFontMetrics = textPaint.fontMetrics
textPaintTop = textFontMetrics.top
val lineHeight = textFontMetrics.bottom - textFontMetrics.top
curY -= textFontMetrics.top//指定頂點座標
val size = textCharArray.size
var i = 0
while (i < size) {
val textPosition = TextPosition()
val c = textCharArray.get(i)
val cW = textPaint.measureText(c.toString())
//位置保存點
textPosition.x = curX
textPosition.y = curY
textPosition.text = c.toString()
//curX 向右移動一個字
curX += cW
if (isParagraph(i) ||//段落內
isNeedNewLine(i, curX, availableWidth)
) { //折行
textLineYs.add(curY)
//斷行需要回溯
curX = initX
curY += lineHeight * lineSpacingMultiplier
}
textPositions.add(textPosition)
i++//移動遊標
//記錄 MoreText位置
recordMoreTextPosition(availableWidth, curX, curY, i)
}
//最後一行
textLineYs.add(curY)
curY += paddingBottom
layoutHeight = curY + textFontMetrics.bottom//應加上後面的Bottom
checkMoreTextShouldShow()//排版結束後，檢查MoreText 是否應該展示
if (DEBUG) {
Log.d(TAG, "總行數： ${getLines()}")
}
}
其中有幾個方法需要額外說一下：
isParagraph(i) 用於判斷當前是爲段落的方法（其實就是檢查是否包含\n），如果是段落則直接折行，反之繼續向右排：
private fun isParagraph(curIndex: Int): Boolean {
if (textCharArray.size <= curIndex) {
return false
}
if (textCharArray[curIndex] == '\n') {
return true
}
return false
}
isNeedNewLine(i, curX, availableWidth) 用於判斷是否需要新起一行，先拿下一個字符做越界檢查，發現越界就折行，否則繼續向右排：
private fun isNeedNewLine(
curIndex: Int,
curX: Float,
maxWith: Int
): Boolean {
if (textCharArray.size <= curIndex + 1) {//需要判斷下一個 char
return false
}
//判斷下一個 char 是否到達邊界
if (curX + textPaint.measureText(textCharArray[curIndex + 1].toString()) > maxWith) {
return true
}
if (curX > maxWith) {
return true
}
return false
}
recordMoreTextPosition(availableWidth, curX, curY, i) 用於記錄 MoreText 的位置信息，其中包括它的點擊區域：
private fun recordMoreTextPosition(availableWidth: Int, curX: Float, curY: Float, index: Int) {
if (isShowMore.not() || maxLines == Int.MAX_VALUE) {
return
}
//只記錄符合要求的第一個位置的
if (dotIndex > 0 || index >= textCharArray.size) {
return
}
val lines = getLines()
if (lines != maxLines - 1) {
return
}
val dotLen = textPaint.measureText("...")
//目前在最後一行
if (checkMoreTextForEnoughLine(curX, dotLen, availableWidth)//這一行滿足一行時
|| checkMoreTextForParagraph(index)//當前是換行符
) {
dotPosition.x = curX
dotPosition.y = curY
dotIndex = textPositions.size
//點擊區域
val moreTextFontMetrics = moreTextPaint.fontMetrics
moreTextClickArea.top = curY + moreTextFontMetrics.top
moreTextClickArea.right = availableWidth.toFloat()
moreTextClickArea.bottom = curY + moreTextFontMetrics.bottom
moreTextClickArea.left = curX
}
}
private fun checkMoreTextForEnoughLine(
curX: Float,
dotLen: Float,
availableWidth: Int
) = curX + moreTextW + dotLen + textPaint.measureText("中") > availableWidth
private fun checkMoreTextForParagraph(index: Int): Boolean {
if ('\n' == textCharArray[index]) {//判斷當前字符是否爲 \n
return true
}
return false
}
checkMoreTextShouldShow() 排版結束後要根據排版計算的行數和設置的最大行數來判斷是否應該展示 MoreText，同時根據 recordMoreTextPosition() 方法記錄的 MoreText 位置給 textPositions 賦值 "..."：
private fun checkMoreTextShouldShow() {
if (isShowMore.not()) {
return
}
if (getLines() <= maxLines || maxLines == Int.MAX_VALUE) {
isShouldShowMore = false
return
}
if (dotIndex < 0) {
return
}
isShouldShowMore = true
textPositions.add(dotIndex, dotPosition)
val temp = arrayListOf<TextPosition>()
for (textPosition in textPositions.withIndex()) {
if (textPosition.index == dotIndex) {
temp.add(dotPosition)
break
}
temp.add(textPosition.value)
}
textPositions.clear()
textPositions.addAll(temp)
}
測量
排版結束後會生成佈局高度 layoutHeight，然後設置給 View。需要注意的是爲了可以讓 ClickMoreTextView 支持在 ScrollView 這種滾動佈局中使用需要通過 setMeasuredDimension 方法設置寬高。
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val width = MeasureSpec.getSize(widthMeasureSpec)
var height = MeasureSpec.getSize(heightMeasureSpec)
breadText(width)
if (layoutHeight > 0) {
height = layoutHeight.toInt()
}
if (DEBUG) {
Log.d(
TAG, "onMeasure: getLines():${getLines()} maxLines: $maxLines width:$width height:$height"
)
}
if (getLines() > maxLines && maxLines - 1 > 0) {
val textBottomH = textPaint.fontMetrics.bottom.toInt()
height = (textLineYs[maxLines - 1]).toInt() + paddingBottom + textBottomH
}
setMeasuredDimension(width, height)
}
最後一個 if 語句中代碼主要用於解決當用戶設置了最大高度時，佈局應該設置的高度。
繪製
繪製要相對簡單些，根據之前生成的 textPositions，取出對應 textPosition 繪製到 canvas 上。其他注意事項參考註釋：
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
if (DEBUG) {
Log.d(TAG, "onDraw: ")
}
val posSize = textPositions.size
for (i in 0 until posSize) {
val textPosition = textPositions[i]
//如果發現已經超過佈局高度了就不再繪製了
if (textPosition.y + textPaintTop > height - paddingBottom) {
break
}
canvas.drawText(textPosition.text, textPosition.x, textPosition.y, textPaint)
}
//繪製 MoreText
if (isShouldShowMore) {
val moreTextY = dotPosition.y
val moreTextX = width - moreTextW - paddingRight
canvas.drawText(moreText, moreTextX, moreTextY, moreTextPaint)
}
}
點擊事件
重寫 onTouchEvent 方法監聽用戶的觸摸事件，判斷是否在 moreTextClickArea 點擊區域內(排版時已通過 recordMoreTextPosition() 方法記錄)：
private val moreTextClickArea = RectF()
private var lastDownX = -1f
private var lastDownY = -1f
override fun onTouchEvent(event: MotionEvent?): Boolean {
if (isShouldShowMore.not()) {
return false
}
event?.let {
val x = event.x
val y = event.y
if (DEBUG) {
Log.d(TAG, "onTouchEvent: x: $x y:$y event: ${event.action}")
}
when (it.action) {
MotionEvent.ACTION_DOWN -> {
lastDownX = x
lastDownY = y
if (moreTextClickArea.contains(lastDownX, lastDownY)) {
return true
}
}
MotionEvent.ACTION_UP -> {
if (moreTextClickArea.contains(x, y)) {
if (DEBUG) {
Log.d(TAG, "onTouchEvent: 點擊更多回調")
}
moreTextClickListener?.onClick(this)
return false
}
}
else -> {}
}
}
return false
}