每周自定义View(1) -动态ProgressView

这次就从一个常见的ProgressBark开始吧, 最近的项目中使用了一个Progress显示文件下载进度的功能, 设计给的是一个静态的图片, 也没有说需要具体实现的情况, 后面优化的时候刚好有了性质, 就有了下面的这个AnimatorProgressBar.

支持功能

• 基本的的进度设置(当前默认为0-100)
• 颜色定义, 使用的颜色都是可以设置的, 满足各样的ui需求
• 元素定义, 作为展示的Progress中的线条可以设置宽度和间距
• 动画控制, 动画效果可以设置展示速度, 总有一个组合适合你

设计过程

将相关的view分为了四层, 从下至上分别为

• 背景图层 用于显示整个view的背景
• 进度图层 相当于进度条的背景颜色
• 线段动画图层 在这里绘制出现的线段, 并控制器动画的效果
• 遮罩展示图层 这里使用了遮罩展示的方法, 控制遮罩图层的进度和样式来表现实际的展示效果

实现过程

首先是背景如果绘制的, 简单来说就是两个圆形和一个矩形, 具体的动画效果可以参考下面,

其它的图层基本上也都是比较类似的情况, 除此之外就是线条的实现

其中中心黑色的为展示的区域, 白色的是绘制的区域

代码实现

可编辑参数

1.  
   //下面为可自定义编辑的参数
2.  
   //背景颜色
3.  
   private int viewBackGroundColor;
4.  
   //线条颜色
5.  
   private int viewLineColor;
6.  
   //进度条颜色
7.  
   private int viewProgressColor;
8.  
   //线条见间隔
9.  
   private int offsetLine;
10.  
    //执行动画需要的时间
11.  
    private int animatorTime;
12.  
    //进度变化动画需要的时间
13.  
    private int animatorProgressTime;
14.  
    //画笔/线条的宽度
15.  
    private int paintWidth;
16.  
     

背景图层&绘制图层背景

这两个图形的实现比较类似

1.  
   /**
2.  
   * @description 绘制图层背景
3.  
   */
4.  
   private void getProgressBackground(Canvas canvas){
5.  
   //设置画笔
6.  
   Paint paint = new Paint();
7.  
   paint.setColor(viewProgressColor);
8.  
    
9.  
   //确定两个圆形的中心位置及半径
10.  
    int leftCirclePoint = height / 2;
11.  
    int rightCirclePoint = width - leftCirclePoint;
12.  
    int radius = height / 2;
13.  
     
14.  
    //绘制左侧和右侧的圆形填充
15.  
    canvas.drawCircle(leftCirclePoint, height >> 1, radius, paint);
16.  
    canvas.drawCircle(rightCirclePoint, height >> 1, radius, paint);
17.  
     
18.  
    //绘制中心的矩形填充
19.  
    Rect rect = new Rect(leftCirclePoint, 0, rightCirclePoint, height);
20.  
    canvas.drawRect(rect, paint);
21.  
    }
22.  
     

1.  
   /**
2.  
   * @description 绘制背景图层
3.  
   */
4.  
   private void drawViewBackground(Canvas canvas) {
5.  
   canvas.save();
6.  
    
7.  
   Paint paint = new Paint();
8.  
   paint.setColor(viewBackGroundColor);
9.  
    
10.  
    int leftCirclePoint = height / 2;
11.  
    int rightCirclePoint = width - leftCirclePoint;
12.  
    int radius = height / 2;
13.  
     
14.  
    canvas.drawCircle(leftCirclePoint, height >> 1, radius, paint);
15.  
    canvas.drawCircle(rightCirclePoint, height >> 1, radius, paint);
16.  
     
17.  
    Rect rect = new Rect(leftCirclePoint, 0, rightCirclePoint, height);
18.  
    canvas.drawRect(rect, paint);
19.  
    }

绘制遮罩图层

1.  
   /**
2.  
   * @description 绘制遮罩图层
3.  
   */
4.  
   private Bitmap progressBitmapDst(){
5.  
   Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
6.  
    
7.  
   //如果当前进度为0, 则不展示任何内容
8.  
   if (progress == 0){
9.  
   return bitmap;
10.  
    }
11.  
    Canvas canvas = new Canvas(bitmap);
12.  
     
13.  
    Paint paint = new Paint();
14.  
    paint.setColor(Color.WHITE);
15.  
     
16.  
     
17.  
    //遮罩图层宽度与当前progress进度有关
18.  
    int leftCirclePoint = height / 2;
19.  
    int rightCirclePoint = leftCirclePoint (int) ((width - height) / 1f * progress / 100f);
20.  
     
21.  
    int radius = height / 2;
22.  
     
23.  
    canvas.drawCircle(leftCirclePoint, height >> 1, radius, paint);
24.  
    canvas.drawCircle(rightCirclePoint, height >> 1, radius, paint);
25.  
     
26.  
    Rect rect = new Rect(leftCirclePoint, 0, rightCirclePoint, height);
27.  
    canvas.drawRect(rect, paint);
28.  
     
29.  
     
30.  
    return bitmap;
31.  
    }

绘制线条动画

1.  
   /**
2.  
   * @description 绘制线条动画
3.  
   */
4.  
   private void getProgressLines(Canvas canvas){
5.  
   Paint paint = new Paint();
6.  
   paint.setColor(viewLineColor);
7.  
    
8.  
   //设置画笔宽度
9.  
   paint.setStrokeWidth(paintWidth);
10.  
     
11.  
    //设置画笔圆形边界
12.  
    paint.setStrokeCap(Paint.Cap.ROUND);
13.  
    //todo 动画效果展示优化
14.  
    canvas.translate(-offsetLine * 2, 0);
15.  
    //offsetAnimator 为动画展示时使用, 每次移动一定的长度,
16.  
    //通过连续的移动来实现视觉上的动画效果
17.  
    canvas.translate(offsetAnimator, 0);
18.  
    canvas.save();
19.  
     
20.  
    int indexOffset = 0;
21.  
     
22.  
    //依次绘制线条
23.  
    do {
24.  
    //绘制右上到左下的线条
25.  
    canvas.drawLine(20, -20, -offsetLine - 20, height 20, paint);
26.  
    indexOffset = offsetLine;
27.  
    //偏移位置
28.  
    canvas.translate(offsetLine, 0);
29.  
    }while (indexOffset < width offsetLine * 4);
30.  
     
31.  
    canvas.restore();
32.  
    }

动画效果

1.  
   /**
2.  
   * @description 进度变化动画
3.  
   * @param startProgress
4.  
   * @param endProgress
5.  
   */
6.  
   public void startProgressAnimator(int startProgress, int endProgress){
7.  
   //动画差值范围
8.  
   ValueAnimator va = ValueAnimator.ofFloat(startProgress, endProgress);
9.  
   va.setDuration(animatorProgressTime);
10.  
    //线性取值
11.  
    va.setInterpolator(new LinearInterpolator());
12.  
    va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
13.  
    @Override
14.  
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
15.  
    progress = (float) valueAnimator.getAnimatedValue();
16.  
    invalidate();
17.  
    }
18.  
     
19.  
    });
20.  
     
21.  
     
22.  
    va.start();
23.  
    }
24.  
     
25.  
     
26.  
    /**
27.  
    * @description 开始动画
28.  
    */
29.  
    public void startAnimator(){
30.  
    //动画差值范围
31.  
    ValueAnimator va = ValueAnimator.ofFloat(0f, offsetLine);
32.  
    //循环播放
33.  
    va.setRepeatCount(ValueAnimator.INFINITE);
34.  
    va.setDuration(animatorTime);
35.  
    //线性取值
36.  
    va.setInterpolator(new LinearInterpolator());
37.  
    va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
38.  
    @Override
39.  
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
40.  
    offsetAnimator = (float) valueAnimator.getAnimatedValue();
41.  
    invalidate();
42.  
    }
43.  
    });
44.  
     
45.  
    va.start();
46.  
    }

这篇好文章是转载于：学新通技术网