2019-01-30

2019-01-30  本文已影响0人  水蜜桃口味的你

实现下载进度条文字变色的功能

项目有个需求实现下载进度条功能,进度条要求进度侧的文字与没有进度的文字颜色不一样,大概如下效果:

要求同一个字符左右颜色不一样。

在网上找了下资料,没找到啥合适的,还是自己简单写一个吧。

主要实现思路,使用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()

    ...

}

最后出来的效果如下:

项目的源码

上一篇下一篇

猜你喜欢

热点阅读