一.效果图:
Canvas画圆环说明:
圆环宽度不必在意,只是画笔宽度设置后达到的效果.
二.实现步骤
1.自定义View-RoundProgressBar
2.设置属性resources(declear_styleable)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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是画圆半径内切矩形的左上点坐标,及右下坐标;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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.动态进度设置
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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(); } }
三.自定义属性效果