自定义环形进度条RoundProgressBar

一.效果图：

  

Canvas画圆环说明：

 圆环宽度不必在意，只是画笔宽度设置后达到的效果.

二.实现步骤

1.自定义View-RoundProgressBar

2.设置属性resources(declear_styleable)

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3     <declare-styleable name="RoundProgressBar">
 4         <attr name="maxProgress" format="integer"></attr>
 5         <attr name="currentProgress" format="integer"></attr>
 6         <attr name="roundColor" format="color"></attr>
 7         <attr name="roundProgressColor" format="color"></attr>
 8         <attr name="textColor" format="color"></attr>
 9         <attr name="textProgress" format="integer"></attr>
10         <attr name="textSize" format="float"></attr>
11         <attr name="roundWidth" format="dimension"></attr>
12         <attr name="roundStyle" >
13             <enum name="STROKE" value="0"></enum>
14             <enum name="FILL" value="1"></enum>
15         </attr>
16     </declare-styleable>
17 </resources>
初始属性设置
 1 public RoundProgressBar(Context context, AttributeSet attrs) {
 2         super(context, attrs);
 3         paint=new Paint();
 4         TypedArray typedArray= context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);
 5         maxProgress=typedArray.getInteger(R.styleable.RoundProgressBar_maxProgress,100);
 6         roundColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.GRAY);
 7         textColor=typedArray.getColor(R.styleable.RoundProgressBar_textColor,Color.RED);
 8         textSize=typedArray.getFloat(R.styleable.RoundProgressBar_textSize,54);
 9         roundWidth=typedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,30);
10         roundStyle=typedArray.getInteger(R.styleable.RoundProgressBar_roundStyle,0);
11         roundProgressColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor,Color.BLACK);
12         typedArray.recycle();
13     }
加载属性
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:id="@+id/activity_main"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:paddingBottom="@dimen/activity_vertical_margin"
 8     android:paddingLeft="@dimen/activity_horizontal_margin"
 9     android:paddingRight="@dimen/activity_horizontal_margin"
10     android:paddingTop="@dimen/activity_vertical_margin"
11     tools:context="rgsc.roundprogressview.MainActivity">
12     <Button
13         android:id="@+id/btn_start"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="开始"/>
17     <rgsc.roundprogressview.RoundProgressBar
18         android:id="@+id/round_progress"
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:layout_below="@+id/btn_start"/>
22 </RelativeLayout>
控件布局

效果：

3.Canvas画图

画大圆环 canvas.drawCircle();

画进度百分比canvas.drawText()：字体居中圆心显示的坐标=圆心坐标x-字体宽度/2;

画圆环进度canvas.drawArc()，RectF:RecF是画圆半径内切矩形的左上点坐标，及右下坐标;

  1 package rgsc.roundprogressview;
  2 
  3 import android.content.Context;
  4 import android.content.res.TypedArray;
  5 import android.graphics.Canvas;
  6 import android.graphics.Color;
  7 import android.graphics.Paint;
  8 import android.graphics.RectF;
  9 import android.graphics.Typeface;
 10 import android.util.AttributeSet;
 11 import android.util.Log;
 12 import android.view.View;
 13 public class RoundProgressBar extends View{
 14     //自定义属性
 15     int maxProgress;         //最大进度值
 16     int currentProgress;     //当前进度
 17     int roundColor;          //圆环颜色
 18     int roundProgressColor;  //圆环进度颜色
 19     int textColor;           //字体颜色
 20     int roundStyle;          //圆环样式
 21     float roundWidth;        //圆环宽度
 22     float textSize;          //字号
 23     Paint paint;
 24     public RoundProgressBar(Context context, AttributeSet attrs) {
 25         super(context, attrs);
 26         paint=new Paint();
 27         TypedArray typedArray= context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);
 28         maxProgress=typedArray.getInteger(R.styleable.RoundProgressBar_maxProgress,100);
 29         roundColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.GRAY);
 30         textColor=typedArray.getColor(R.styleable.RoundProgressBar_textColor,Color.RED);
 31         textSize=typedArray.getFloat(R.styleable.RoundProgressBar_textSize,54);
 32         roundWidth=typedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,30);
 33         roundStyle=typedArray.getInteger(R.styleable.RoundProgressBar_roundStyle,0);
 34         roundProgressColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor,Color.BLACK);
 35         typedArray.recycle();
 36     }
 37     @Override
 38     protected void onDraw(Canvas canvas) {
 39         super.onDraw(canvas);
 40         //画最外层大圆环
 41         float x=getWidth()/2;
 42         float y=x;
 43         float radius=x/2-roundWidth/2;
 44         paint.setStyle(Paint.Style.STROKE); //空心画圆
 45         paint.setColor(roundColor);         //圆环颜色
 46         paint.setStrokeWidth(roundWidth);   //圆环宽度
 47         canvas.drawCircle(x,y,radius,paint);//圆心坐标 (x,y)半径radius 画笔paint
 48         //画进度百分比
 49         paint.setColor(textColor);
 50         paint.setTypeface(Typeface.DEFAULT_BOLD); //粗体
 51         paint.setTextSize(textSize);
 52         paint.setStrokeWidth(0);
 53         int persentProgress=(int) (((float)currentProgress/(float)maxProgress)*100);
 54         String text=persentProgress+"%";
 55         float textWidth=paint.measureText(text);                           //获取字体宽度
 56         float xText=x-textWidth/2;                                         //减去字体宽度确保字体居中
 57         canvas.drawText(text,xText,y,paint);
 58         //画圆环进度
 59         float left=x-radius;
 60         float right=x+radius;
 61         RectF rectF=new RectF(left,left,right,right);
 62         paint.setStyle(Paint.Style.STROKE); //空心画圆
 63         paint.setColor(roundProgressColor); //圆环颜色
 64         paint.setStrokeWidth(roundWidth);   //圆环宽度
 65         Log.i("Round","画圆环进度："+360*currentProgress/maxProgress);
 66         canvas.drawArc(rectF,0,360*currentProgress/maxProgress,false,paint);
 67     }
 68     public synchronized void setCurrentProgress(int progress) {
 69         if(progress < 0){
 70             throw new IllegalArgumentException("progress not less than 0");
 71         }
 72         if(progress > maxProgress){
 73             progress = maxProgress;
 74         }
 75         if(progress <= maxProgress){
 76             this.currentProgress = progress;
 77             postInvalidate();
 78         }
 79     }
 80     public synchronized int getCurrentProgress() {
 81         return currentProgress;
 82     }
 83     public synchronized void setMaxProgress(int maxProgress) {
 84         this.maxProgress = maxProgress;
 85     }
 86     public void setRoundColor(int roundColor) {
 87         this.roundColor = roundColor;
 88     }
 89     public void setTextColor(int textColor) {
 90         this.textColor = textColor;
 91     }
 92     public void setRoundProgressColor(int roundProgressColor) {
 93         this.roundProgressColor = roundProgressColor;
 94     }
 95     public void setRoundStyle(int roundStyle) {
 96         this.roundStyle = roundStyle;
 97     }
 98     public void setRoundWidth(float roundWidth) {
 99         this.roundWidth = roundWidth;
100     }
101     public void setTextSize(float textSize) {
102         this.textSize = textSize;
103     }
104 }
自定义环形进度条全部代码

4.动态进度设置

package rgsc.roundprogressview;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    Button btn_start;
    RoundProgressBar roundProgressBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initControl();
    }
    void initControl(){
        btn_start=(Button)findViewById(R.id.btn_start);
        btn_start.setOnClickListener(this);
        roundProgressBar=(RoundProgressBar)findViewById(R.id.round_progress);
        //自定义属性设置
        /*
        roundProgressBar.setRoundColor(Color.GRAY);
        roundProgressBar.setTextColor(Color.RED);
        roundProgressBar.setRoundProgressColor(Color.BLACK);
        roundProgressBar.setMaxProgress(100);
        roundProgressBar.setRoundWidth(30);
        roundProgressBar.setRoundStyle(0);
        roundProgressBar.setTextSize(50);//*/
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_start:
                start();
                break;
        }

    }
    void start(){
        new Thread(new Runnable() {
            @Override
            public void run() {
                for(int i=0;i<=100;i+=2){
                    roundProgressBar.setCurrentProgress(i);
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    Log.i("Main","当前进度值："+i);
                }
            }
        }).start();
    }
}
View Code

三.自定义属性效果

posted @ 2017-02-13 15:06  往霄龙  阅读(325)  评论(0)  编辑  收藏  举报
TOP