For reprinting, please indicate the source: http://blog.csdn .NET/lmj623565791/article/details/24500107

A friend has such a need today (the following picture), I think that custom View is still very suitable to do, so do the following, by the way, and share with you, for custom View more practice is not bad. If you read the first two articles, then this one must be so easy.

The effect is like this. After analysis, there are probably these attributes, two colors, one speed, and the width of a circle.

Or the steps we took to customize the View:

1. Properties of custom View

2. Obtain our custom attributes in View's construction method

[3. Rewrite onMesure]

4. Rewrite onDraw

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

1. Custom Properties:

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. Obtain our custom attributes in View's construction method

1. /** 
2.      * The color of the first circle 
3.      */  
4.     private int mFirstColor;  
5.     /** 
6.      * The color of the second circle 
7.      */  
8.     private int mSecondColor;  
9.     /** 
10.      * Width of circle 
11.      */  
12.     private int mCircleWidth;  
13.     /** 
14.      * Paint brush 
15.      */  
16.     private Paint mPaint;  
17.     /** 
18.      * Current progress 
19.      */  
20.     private int mProgress;  
21.   
22.     /** 
23.      * speed 
24.      */  
25.     private int mSpeed;  
26.   
27.     /** 
28.      * Should we start the next one? 
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.      * Necessary initialization to get some custom values 
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);//Default 20  
72.                 break;  
73.             }  
74.         }  
75.         a.recycle();  
76.         mPaint = new Paint();  
77.         //Drawing thread  
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.     }  

/**
     * The color of the first circle
     */
    private int mFirstColor;
    /**
     * The color of the second circle
     */
    private int mSecondColor;
    /**
     * Width of circle
     */
    private int mCircleWidth;
    /**
     * Brush
     */
    private Paint mPaint;
    /**
     * Current progress
     */
    private int mProgress;

    /**
     * Speed
     */
    private int mSpeed;

    /**
     * Should we start the next one?
     */
    private boolean isNext = false;

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

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

    /**
     * Necessary initialization to get some custom values
     * 
     * @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); //Default 20
                break;
            }
        }
        a.recycle();
        mPaint = new Paint();
        // Drawing thread
        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. Rewrite onDraw directly without rewriting onMeasure

1. @Override  
2.     protected void onDraw(Canvas canvas)  
3.     {  
4.   
5.         int centre = getWidth() / 2; //Obtaining the x-coordinates of the center of a circle  
6.         int radius = centre - mCircleWidth / 2;//Radius  
7.         mPaint.setStrokeWidth(mCircleWidth); //Set the width of the ring  
8.         mPaint.setAntiAlias(true); //Elimination of serrations  
9.         mPaint.setStyle(Paint.Style.STROKE); //Hollow  
10.         RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); //The boundaries of the shape and size of the defined arc  
11.         if (!isNext)  
12.         {//The circle of the first color is complete, and the second color runs.  
13.             mPaint.setColor(mFirstColor); //Set the color of the ring  
14.             canvas.drawCircle(centre, centre, radius, mPaint); //Draw a circle  
15.             mPaint.setColor(mSecondColor); //Set the color of the ring  
16.             canvas.drawArc(oval, -90, mProgress, false, mPaint); //Draw an arc according to schedule  
17.         } else  
18.         {  
19.             mPaint.setColor(mSecondColor); //Set the color of the ring  
20.             canvas.drawCircle(centre, centre, radius, mPaint); //Draw a circle  
21.             mPaint.setColor(mFirstColor); //Set the color of the ring  
22.             canvas.drawArc(oval, -90, mProgress, false, mPaint); //Draw an arc according to schedule  
23.         }  
24.   
25.     }  

@Override
    protected void onDraw(Canvas canvas)
    {

        Int center = getWidth ()/ 2; // Get the x coordinates of the center of the circle
        int radius = centre - mCircleWidth / 2; // radius
        mPaint.setStrokeWidth(mCircleWidth); // Set the width of the ring
        mPaint.setAntiAlias(true); //Eliminate serrated teeth
        mPaint.setStyle(Paint.Style.STROKE);//Set hollow
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // The boundaries of shape and size used to define arcs
        if (!isNext)
        {// The circle of the first color is complete, and the second color runs.
            mPaint.setColor(mFirstColor); // Set the color of the ring
            canvas.drawCircle(centre, centre, radius, mPaint); // Draw a circle
            mPaint.setColor(mSecondColor); // Set the color of the ring
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // Draw an arc according to progress
        } else
        {
            mPaint.setColor(mSecondColor); // Set the color of the ring
            canvas.drawCircle(centre, centre, radius, mPaint); // Draw a circle
            mPaint.setColor(mFirstColor); // Set the color of the ring
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // Draw an arc according to progress
        }

    }

Great success has been achieved, of course, the only thing that is more tangled is when the two colors switch, how to switch, I use the above method, you can also think about how to achieve.

Okay, you guys, leave a message, top one.~

Source Click Download