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()

    ...

}

最后出来的效果如下：

项目的源码