简单自定义View之无限循环的不确定进度的ProgressBar

最近项目中遇到一个要求实现类似于安装软件过程中的load动画的需求，就是有几条短线循环的水平移动，类似于Progressbar的效果，但是视图不一样

GIF.gif

这个效果原生控件ProgressBar是实现不了的，刚好最近再学习自定义View，就来小试牛刀一下。
　　其实实现起来很简单，连自定义属性都不需要，我们只需要不断地重新绘制短线就可以了代码很简单，注释写的很清楚

package com.meskal;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by meskal on 2016/9/6.
 * Function：
 * Version:
 */
public class LoopProgressBar extends View {

  //短线的颜色，我们也可以开放一个setColor接口设置颜色
  private int color;

  //绘制短线的画笔
  private Paint paint;

  //短线之间间隔
  private float space;

  //短线的宽度
  private  float lineWidth;


  //绘制短线的起点
  private int startX;

  public LoopProgressBar(Context context) {
    this(context, null);
  }

  public LoopProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public LoopProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.LoopProgressBar);
    if(ta != null){
      color = ta.getColor(R.styleable.LoopProgressBar_lineColor, Color.GREEN);
      space = ta.getDimension(R.styleable.LoopProgressBar_space, Util.dip2px(20));
      lineWidth = ta.getDimension(R.styleable.LoopProgressBar_lineWidth, Util.dip2px(50));
    }
    if(ta != null){
      ta.recycle();
    }
    paint = new Paint();
    paint.setColor(color);
    paint.setAntiAlias(true);
  }

  @Override protected void onDraw(Canvas canvas) {
    //整个控件的高度和宽度当执行到onDraw时已经layout了宽高早已经测量完成
    int w = getMeasuredWidth();
    int h = getMeasuredHeight();

    //每次重绘短线移动的距离
    int delta = 10;

    //画笔的宽度
    paint.setStrokeWidth(h);

    //startX从0开始每次递增delta,当第一根短线（最右边一根）的右端到达空间末尾时从0重新开始绘制，形成循环
    if (startX >= w + (lineWidth + space) - (w % (lineWidth + space))) {
      startX = 0;
    } else {
      startX += delta;
    }

    float start = startX;

    //绘制短线
    while (start < w) {
      canvas.drawLine(start, 5, start + lineWidth, 5, paint);
      start += (lineWidth + space);
    }

    start = startX - space - lineWidth;

    //从左边进入的短线
    while (start >= -lineWidth) {
      canvas.drawLine(start, 5, start + lineWidth, 5, paint);
      start -= (lineWidth + space);
    }

    //延迟一定的时间重绘，否则太快了，如果要流畅的话1s至少得16帧即62ms一帧，这里设置为60还挺流畅的
    postInvalidateDelayed(60);
  }
}

控件的自定义属性：

具体实现很简单，没几行代码，主要是计算从什么位置开始绘制短线，特别是当第一根短线到最右边时，一定要减去结余的那部分

w % (lineWidth + space)
```　
这样保证任何宽度下都很“连贯”