2019-01-30
实现下载进度条文字变色的功能
项目有个需求实现下载进度条功能,进度条要求进度侧的文字与没有进度的文字颜色不一样,大概如下效果:
要求同一个字符左右颜色不一样。
在网上找了下资料,没找到啥合适的,还是自己简单写一个吧。
主要实现思路,使用Canvas的clip功能,绘制2次文字,先裁剪Progress侧绘制白色文字,再裁减右边剩余的空间,绘制深色文字,这样就实现了这个功能,核心代码如下:
TextProgressBar.kt
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
mContentRect.set(paddingLeft, paddingTop, width - paddingRight, height - paddingBottom)
// View的矩形
mBgRect.set(mContentRect)
// 进度矩形,
mProgressRect.set(mContentRect)
// 剩余矩形
mLeftProgressRect.set(mContentRect)
...
// 根据当前的进度设置进度和剩余举行的大小
val progressRectWidth = mContentRect.width() * mProgress / 100
mProgressRect.right = progressRectWidth
mLeftProgressRect.left = progressRectWidth
...
val text = if (mState == STATE_DOWNLOADING) "下载中(${String.format("%.1f", mProgress)}%)" else "继续"
// 进度条左边的颜色
canvas.save()
canvas.clipRect(mProgressRect)
mTextPaint.color = mTextProgressColor
drawText(canvas, text, mTextPaint)
canvas.restore()
// 进度条右边的文字颜色
canvas.save()
canvas.clipRect(mLeftProgressRect)
mTextPaint.color = mTextLeftProgressColor
drawText(canvas, text, mTextPaint)
canvas.restore()
...
}
最后出来的效果如下: