Android 自定义View (三) 圆环交替 等待效果

一个朋友今天有这么个需求（下图），我觉得那自定义View来做还是很适合的，就做了下，顺便和大家分享下，对于自定义View多练没坏处么。如果你看了前两篇，那么这篇一定so easy 。

效果就这样，分析了一下，大概有这几个属性，两个颜色，一个速度，一个圆环的宽度。

还是我们自定View的那几个步骤：

1、自定义View的属性

2、在View的构造方法中获得我们自定义的属性

[ 3、重写onMesure ]

4、重写onDraw

-------------------------------------------------------------------------------------------------------------------

1、自定义属性：

 <?xml version="1.0" encoding="utf-8"?>
 <resources>

     <attr name="firstColor" format="color" />
     <attr name="secondColor" format="color" />
     <attr name="circleWidth" format="dimension" />
     <attr name="speed" format="integer" />

     <declare-styleable name="CustomProgressBar">
         <attr name="firstColor" />
         <attr name="secondColor" />
         <attr name="circleWidth" />
         <attr name="speed" />
     </declare-styleable>

 </resources>

2、 在View的构造方法中获得我们自定义的属性

 /**
      * 第一圈的颜色
      */
     private int mFirstColor;
     /**
      * 第二圈的颜色
      */
     private int mSecondColor;
     /**
      * 圈的宽度
      */
     private int mCircleWidth;
     /**
      * 画笔
      */
     private Paint mPaint;
     /**
      * 当前进度
      */
     private int mProgress;

     /**
      * 速度
      */
     private int mSpeed;

     /**
      * 是否应该开始下一个
      */
     private boolean isNext = false;

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

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

     /**
      * 必要的初始化，获得一些自定义的值
      *
      * @param context
      * @param attrs
      * @param defStyle
      */
     public CustomProgressBar(Context context, AttributeSet attrs, int defStyle)
     {
         super(context, attrs, defStyle);
         TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);
         int n = a.getIndexCount();

         for (int i = 0; i < n; i++)
         {
             int attr = a.getIndex(i);
             switch (attr)
             {
             case R.styleable.CustomProgressBar_firstColor:
                 mFirstColor = a.getColor(attr, Color.GREEN);
                 break;
             case R.styleable.CustomProgressBar_secondColor:
                 mSecondColor = a.getColor(attr, Color.RED);
                 break;
             case R.styleable.CustomProgressBar_circleWidth:
                 mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                         TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                 break;
             case R.styleable.CustomProgressBar_speed:
                 mSpeed = a.getInt(attr, 20);// 默认20
                 break;
             }
         }
         a.recycle();
         mPaint = new Paint();
         // 绘图线程
         new Thread()
         {
             public void run()
             {
                 while (true)
                 {
                     mProgress++;
                     if (mProgress == 360)
                     {
                         mProgress = 0;
                         if (!isNext)
                             isNext = true;
                         else
                             isNext = false;
                     }
                     postInvalidate();
                     try
                     {
                         Thread.sleep(mSpeed);
                     } catch (InterruptedException e)
                     {
                         e.printStackTrace();
                     }
                 }
             };
         }.start();

     }

3、直接重写onDraw，这不需要重写onMeasure

 @Override
     protected void onDraw(Canvas canvas)
     {

         int centre = getWidth() / 2; // 获取圆心的x坐标
         int radius = centre - mCircleWidth / 2;// 半径
         mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
         mPaint.setAntiAlias(true); // 消除锯齿
         mPaint.setStyle(Paint.Style.STROKE); // 设置空心
         RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
         if (!isNext)
         {// 第一颜色的圈完整，第二颜色跑
             mPaint.setColor(mFirstColor); // 设置圆环的颜色
             canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
             mPaint.setColor(mSecondColor); // 设置圆环的颜色
             canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
         } else
         {
             mPaint.setColor(mSecondColor); // 设置圆环的颜色
             canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
             mPaint.setColor(mFirstColor); // 设置圆环的颜色
             canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
         }

     }

大功完成了，当然了，唯一比较纠结的地方就是两个颜色何时切换，如何切换，我采用上面的办法，你也可以自己想想怎么实现。

好了，各位看官留个言，顶一个吧~

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24500107

源码点击下载