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

    ...

}

最后出来的效果如下:


项目的源码

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【Android 自定义View之绘图】 基础图形的绘制 一、Paint与Canvas 绘图需要两个工具,笔和纸。...
    Rtia阅读 11,775评论 5 34
  • 照片OCR流水线中的组件:滑动窗(sliding windows)的分类器 滑动窗的步骤: 以文字检测为例,文字识...
    奈何qiao阅读 1,487评论 0 0
  • 照片OCR技术中的应用历史涉及3个部分: 1. 一个复杂的机器学习系统是如何被组合起来的 2.机器学习流水线(ma...
    奈何qiao阅读 510评论 0 0
  • 接收消息 接口设计 如果需要感知新消息的通知,可以注册消息通知回调IIMMsgListener。新消息到来时,on...
    Mr_lk先生阅读 524评论 0 0
  • 春风吹过, 吹绿了新芽,吹红了桃花; 吹醒了河流,吹落了冬的伤疤; 蔚蓝的天空,飘着朵朵白云, 温暖的阳光静静洒在...
    齐晋阅读 515评论 0 1