自定义View之渐变色圆形进度条

先展示下效果图：

然后按照自定义view的步骤来实现。

我们需要将目标定义清楚：
目标是渐变色圆形进度条，那么，使用canvas画弧形是基础了，另外是渐变色的效果，这里使用LinearGradient来实现。
既然是提供一个进度条，那么，是需要自定义View的用户来进行设置进度值的。
另外，将渐变色的接口也提供出来了，这样，用户就可以根据需要自己定义喜欢的渐变色效果。
还有view的大小，使用直径来表示。
最后，要展示进度条如何使用，用了一个定时器，每秒推进一次进度。

下面来具体实现：

1、自定义View的属性

在values下面新建一个attr.xml，现在里面定义我们的属性，

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="diameter" format="dimension" />    <declare-styleable name="CircleProgressView">        <attr name="diameter" />    </declare-styleable></resources>

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

    public CircleProgressView(Context context, AttributeSet attrs, int defStyle)    {        super(context, attrs, defStyle);        /**         * 获得我们所定义的自定义样式属性         */        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyle, 0);        int n = a.getIndexCount();        for (int i = 0; i < n; i++)        {            int attr = a.getIndex(i);            switch (attr)            {            case R.styleable.CircleProgressView_diameter:                // 默认设置为40dp                mDiameter = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(                        TypedValue.COMPLEX_UNIT_SP, 40, getResources().getDisplayMetrics()));                break;                      }        }        a.recycle();        mPaint = new Paint();        rect = new RectF();        progressValue=0;    }

3、重写onMeasure

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)    {        int width = 0;        int height = 0;        //设置直径的最小值        if(mDiameter<=40){            mDiameter=40;        }        height=mDiameter;        width=mDiameter;        Log.i("customView","log: w="+width+" h="+height);        setMeasuredDimension(width, height);    }

4、重写onDraw

    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        int mWidth = getMeasuredWidth();        int mHeight = getMeasuredHeight();        mPaint.setAntiAlias(true);        mPaint.setStrokeWidth((float) mWidth/10 );        mPaint.setStyle(Style.STROKE);        mPaint.setStrokeCap(Cap.ROUND);        mPaint.setColor(Color.TRANSPARENT);        rect.set(20, 20, mWidth - 20, mHeight - 20);        canvas.drawArc(rect, 0, 360, false, mPaint);        mPaint.setColor(Color.BLACK);           float section = ((float)progressValue) / 100;        int count = mColors.length;        int[] colors = new int[count];        System.arraycopy(mColors, 0, colors, 0, count);                 LinearGradient shader = new LinearGradient(3, 3, mWidth - 3 , mHeight - 3, colors, null,                Shader.TileMode.CLAMP);        mPaint.setShader(shader);        canvas.drawArc(rect, 0, section * 360, false, mPaint);    }

5、提供对外接口

这里有两个对外接口，一个是用于获取新的进度值的：

    public void setProgressValue(int progressValue){        this.progressValue = progressValue;        Log.i("customView","log: progressValue="+progressValue);                }

另外一个是用于设置渐变色的，这里我是定义了4种颜色，经过测试效果比较好：

    public void setColors(int[] colors){        mColors = colors;        Log.i("customView","log: progressValue="+progressValue);                }

6、中布局文件中使用

在布局文件中我定义了5个view，中间一个大的，四角四个小的，这样效果比较炫：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:custom="http://schemas.android.com/apk/res/com.customview"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.customview.view.CircleProgressView        android:id="@+id/circle_progress_view1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                    android:layout_centerInParent="true"         android:padding="10dp"        custom:diameter="200dp"                      />     <com.customview.view.CircleProgressView        android:id="@+id/circle_progress_view2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                    android:layout_toLeftOf="@id/circle_progress_view1"                       android:layout_below="@id/circle_progress_view1"            android:padding="10dp"        custom:diameter="80dp"          />      <com.customview.view.CircleProgressView        android:id="@+id/circle_progress_view3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/circle_progress_view1"        android:layout_below="@id/circle_progress_view1"                           android:layout_centerHorizontal="true"        android:padding="10dp"          custom:diameter="80dp"              />      <com.customview.view.CircleProgressView        android:id="@+id/circle_progress_view4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toLeftOf="@id/circle_progress_view1"        android:layout_above="@id/circle_progress_view1"                           android:layout_centerHorizontal="true"        android:padding="10dp"        custom:diameter="80dp"              />      <com.customview.view.CircleProgressView        android:id="@+id/circle_progress_view5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/circle_progress_view1"        android:layout_above="@id/circle_progress_view1"                           android:layout_centerHorizontal="true"        android:padding="10dp"          custom:diameter="80dp"              /> </RelativeLayout>

7、在activity中使用

主要是一个定时器的使用，来推进进度条，另外，是渐变色的颜色初值设置：

package com.customview;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.util.Log;import android.view.WindowManager;import java.util.Random;import java.util.Timer;import java.util.TimerTask;import com.customview.view.CircleProgressView;import android.app.Activity;import android.graphics.Color;public class MainActivity extends Activity{    CircleProgressView circle_progress_view1;    CircleProgressView circle_progress_view2;    CircleProgressView circle_progress_view3;    CircleProgressView circle_progress_view4;    CircleProgressView circle_progress_view5;    int progressValue=0;        @Override    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);            this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);//去掉信息栏        setContentView(R.layout.activity_main);        circle_progress_view1 = (CircleProgressView)findViewById(R.id.circle_progress_view1);        circle_progress_view2 = (CircleProgressView)findViewById(R.id.circle_progress_view2);        circle_progress_view3 = (CircleProgressView)findViewById(R.id.circle_progress_view3);        circle_progress_view4 = (CircleProgressView)findViewById(R.id.circle_progress_view4);        circle_progress_view5 = (CircleProgressView)findViewById(R.id.circle_progress_view5);        //第一个使用默认颜色，第二三个使用指定颜色，另外2个使用随机颜色        int[] colors;        colors=new int[]{ 0xffc42c1b, 0xfffeea08, 0xff04aafc, 0xff15e078};        circle_progress_view2.setColors( colors);        colors=new int[]{ 0xffffffff, 0xffaaaaaa, 0xff555555, 0xff000000};              circle_progress_view3.setColors( colors);               circle_progress_view4.setColors( randomColors());        circle_progress_view5.setColors( randomColors());        timer.schedule(task, 1000, 1000); // 1s后执行task,经过1s再次执行              }    Handler handler = new Handler() {          public void handleMessage(Message msg) {              if (msg.what == 1) {                  Log.i("log","handler : progressValue="+progressValue);                //通知view，进度值有变化                circle_progress_view1.setProgressValue(progressValue*3);                circle_progress_view1.postInvalidate();                circle_progress_view2.setProgressValue(progressValue*5/2);                circle_progress_view2.postInvalidate();                circle_progress_view3.setProgressValue(progressValue*2);                                circle_progress_view3.postInvalidate();                circle_progress_view4.setProgressValue(progressValue*3/2);                              circle_progress_view4.postInvalidate();                circle_progress_view5.setProgressValue(progressValue*1);                                circle_progress_view5.postInvalidate();                progressValue+=1;                if(progressValue>100){                    timer.cancel();                }            }              super.handleMessage(msg);                      };      };      private int[] randomColors() {        int[] colors=new int[4];        Random random = new Random();        int r,g,b;        for(int i=0;i<4;i++){            r=random.nextInt(256);            g=random.nextInt(256);            b=random.nextInt(256);            colors[i]=Color.argb(255, r, g, b);            Log.i("customView","log: colors["+i+"]="+Integer.toHexString(colors[i]));        }        return colors;    }    Timer timer = new Timer();      TimerTask task = new TimerTask() {          @Override          public void run() {              // 需要做的事:发送消息              Message message = new Message();              message.what = 1;              handler.sendMessage(message);          }      };  }

至此，完美收工。
我是实现了一个渐变色圆形进度条，渐变色的颜色初值可以指定，进度条的值也是由用户来指定，本例中是使用定时器来推进的，每个进度条的进度控制不一致，颜色不一样，位置不一样，组合起来，效果很炫哦！

完整代码见如下地址：

http://download.csdn.net/detail/lintax/9623574