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

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

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

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

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

1、自定义View的属性

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

[ 3、重写onMesure ]

4、重写onDraw

——————————————————————————————————————-

1、自定义属性：

[java] view plain copy

print ?

1. <?xml version=“1.0” encoding=“utf-8”?>  
2. <resources>  
3.   
4.     <attr name=”firstColor” format=“color” />  
5.     <attr name=”secondColor” format=“color” />  
6.     <attr name=”circleWidth” format=“dimension” />  
7.     <attr name=”speed” format=“integer” />  
8.   
9.     <declare-styleable name=”CustomProgressBar”>  
10.         <attr name=”firstColor” />  
11.         <attr name=”secondColor” />  
12.         <attr name=”circleWidth” />  
13.         <attr name=”speed” />  
14.     </declare-styleable>  
15.   
16. </resources>  

<?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的构造方法中获得我们自定义的属性

[java] view plain copy

print ?

1. /** 
2.      * 第一圈的颜色 
3.      */  
4.     private int mFirstColor;  
5.     /** 
6.      * 第二圈的颜色 
7.      */  
8.     private int mSecondColor;  
9.     /** 
10.      * 圈的宽度 
11.      */  
12.     private int mCircleWidth;  
13.     /** 
14.      * 画笔 
15.      */  
16.     private Paint mPaint;  
17.     /** 
18.      * 当前进度 
19.      */  
20.     private int mProgress;  
21.   
22.     /** 
23.      * 速度 
24.      */  
25.     private int mSpeed;  
26.   
27.     /** 
28.      * 是否应该开始下一个 
29.      */  
30.     private boolean isNext = false;  
31.   
32.     public CustomProgressBar(Context context, AttributeSet attrs)  
33.     {  
34.         this(context, attrs, 0);  
35.     }  
36.   
37.     public CustomProgressBar(Context context)  
38.     {  
39.         this(context, null);  
40.     }  
41.   
42.     /** 
43.      * 必要的初始化，获得一些自定义的值 
44.      *  
45.      * @param context 
46.      * @param attrs 
47.      * @param defStyle 
48.      */  
49.     public CustomProgressBar(Context context, AttributeSet attrs, int defStyle)  
50.     {  
51.         super(context, attrs, defStyle);  
52.         TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);  
53.         int n = a.getIndexCount();  
54.   
55.         for (int i = 0; i < n; i++)  
56.         {  
57.             int attr = a.getIndex(i);  
58.             switch (attr)  
59.             {  
60.             case R.styleable.CustomProgressBar_firstColor:  
61.                 mFirstColor = a.getColor(attr, Color.GREEN);  
62.                 break;  
63.             case R.styleable.CustomProgressBar_secondColor:  
64.                 mSecondColor = a.getColor(attr, Color.RED);  
65.                 break;  
66.             case R.styleable.CustomProgressBar_circleWidth:  
67.                 mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(  
68.                         TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));  
69.                 break;  
70.             case R.styleable.CustomProgressBar_speed:  
71.                 mSpeed = a.getInt(attr, 20);// 默认20  
72.                 break;  
73.             }  
74.         }  
75.         a.recycle();  
76.         mPaint = new Paint();  
77.         // 绘图线程  
78.         new Thread()  
79.         {  
80.             public void run()  
81.             {  
82.                 while (true)  
83.                 {  
84.                     mProgress++;  
85.                     if (mProgress == 360)  
86.                     {  
87.                         mProgress = 0;  
88.                         if (!isNext)  
89.                             isNext = true;  
90.                         else  
91.                             isNext = false;  
92.                     }  
93.                     postInvalidate();  
94.                     try  
95.                     {  
96.                         Thread.sleep(mSpeed);  
97.                     } catch (InterruptedException e)  
98.                     {  
99.                         e.printStackTrace();  
100.                     }  
101.                 }  
102.             };  
103.         }.start();  
104.   
105.     }  

/**
     * 第一圈的颜色
     */
    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

[java] view plain copy

print ?

1. @Override  
2.     protected void onDraw(Canvas canvas)  
3.     {  
4.   
5.         int centre = getWidth() / 2; // 获取圆心的x坐标  
6.         int radius = centre - mCircleWidth / 2;// 半径  
7.         mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度  
8.         mPaint.setAntiAlias(true); // 消除锯齿  
9.         mPaint.setStyle(Paint.Style.STROKE); // 设置空心  
10.         RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限  
11.         if (!isNext)  
12.         {// 第一颜色的圈完整，第二颜色跑  
13.             mPaint.setColor(mFirstColor); // 设置圆环的颜色  
14.             canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环  
15.             mPaint.setColor(mSecondColor); // 设置圆环的颜色  
16.             canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧  
17.         } else  
18.         {  
19.             mPaint.setColor(mSecondColor); // 设置圆环的颜色  
20.             canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环  
21.             mPaint.setColor(mFirstColor); // 设置圆环的颜色  
22.             canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧  
23.         }  
24.   
25.     }  

@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); // 根据进度画圆弧
        }

    }

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

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

源码点击下载