美文网首页
2019-01-30

2019-01-30

作者: 水蜜桃口味的你 | 来源:发表于2019-01-30 20:29 被阅读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()

        ...

    }

    最后出来的效果如下:

    项目的源码

    相关文章

      网友评论

          本文标题:2019-01-30

          本文链接:https://www.haomeiwen.com/subject/hzzcsqtx.html