自定義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

自定義View之漸變色圓形進度條

1、自定義View的屬性

2、在View的構造方法中獲得我們自定義的屬性

3、重寫onMeasure

4、重寫onDraw

5、提供對外接口

6、中佈局文件中使用

7、在activity中使用

完整代碼見如下地址：

24-5-18 X

自定義View之漸變色圓形進度條

自定義View之文字遊樂場（二）

可以動態修改時間的CountDownTimer

自定義View之文字遊樂場（一）

自定義View之餅狀進度條

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結