實現(xiàn)下載進(jìn)度條文字變色的功能
項目有個需求實現(xiàn)下載進(jìn)度條功能秉继，進(jìn)度條要求進(jìn)度側(cè)的文字與沒有進(jìn)度的文字顏色不一樣，大概如下效果：
要求同一個字符左右顏色不一樣盗棵。
在網(wǎng)上找了下資料壮韭，沒找到啥合適的，還是自己簡單寫一個吧纹因。
主要實現(xiàn)思路喷屋，使用Canvas的clip功能，繪制2次文字瞭恰，先裁剪Progress側(cè)繪制白色文字屯曹，再裁減右邊剩余的空間，繪制深色文字，這樣就實現(xiàn)了這個功能恶耽，核心代碼如下：
TextProgressBar.kt
override fun onDraw(canvas: Canvas) {
????super.onDraw(canvas)
????mContentRect.set(paddingLeft, paddingTop, width - paddingRight, height - paddingBottom)
? ? // View的矩形
????mBgRect.set(mContentRect)
? ? // 進(jìn)度矩形密任，
????mProgressRect.set(mContentRect)
? ? // 剩余矩形
????mLeftProgressRect.set(mContentRect)
? ? ...
? ? // 根據(jù)當(dāng)前的進(jìn)度設(shè)置進(jìn)度和剩余舉行的大小
?? ?val progressRectWidth = mContentRect.width() * mProgress / 100
?? ?mProgressRect.right = progressRectWidth
?? ?mLeftProgressRect.left = progressRectWidth
? ? ...??
?? ?val text = if (mState == STATE_DOWNLOADING) "下載中(${String.format("%.1f", mProgress)}%)" else "繼續(xù)"
?? ?// 進(jìn)度條左邊的顏色
?? ?canvas.save()
? ?canvas.clipRect(mProgressRect)
?? ?mTextPaint.color = mTextProgressColor
?? ?drawText(canvas, text, mTextPaint)
?? ?canvas.restore()
?? ?// 進(jìn)度條右邊的文字顏色
?? ?canvas.save()
?? ?canvas.clipRect(mLeftProgressRect)
?? ?mTextPaint.color = mTextLeftProgressColor
?? ?drawText(canvas, text, mTextPaint)
?? ?canvas.restore()
? ? ...
}
最后出來的效果如下：
