Android自定义圆形进度条

今天小编来手写一个自定义圆形进度条:先看效果:

首先我们在attrs属性文件中增加几个自定义属性

<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="CustomProgressBar">  <!-- 圆形进度条进度显示的颜色 -->  <attr name="roundProgressColor" format="color"></attr>  <!-- 外圈圆的颜色 -->  <attr name="roundColor" format="color"></attr>  <!-- 圆的总宽度 -->  <attr name="roundWidth" format="dimension"></attr>  <!-- 字体显示的大小 -->  <attr name="textSize" format="dimension"></attr>  <!-- 字体显示的颜色 -->  <attr name="textColor" format="color"></attr>  <!-- 进度的最大值 -->  <attr name="max" format="integer"></attr>  <!-- 是否显示文字 -->  <attr name="textShow" format="boolean"></attr> </declare-styleable></resources>

上我们自定义类的实现代码:

package xxx.xxx.xxx;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Typeface;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import test.dn.com.dn_test.R;/** * Created by Administrator on 2017/5/16 0016. */public class CircleProgressBar extends View { private int max; //最大值 private int roundColor; //圆形进度条的颜色 private int roundProgressColor;//圆形进度条进度的颜色 private int textColor;  //字体的颜色 private float textSize;  //字体的大小 private float roundWidth; //圆的宽度 private boolean textShow; //是否显示圆 private int progress; //当前进度 private Paint mPaint; //画笔 public static final int STROKE = 0; public static final int FILL = 1; public CircleProgressBar(Context context, @Nullable AttributeSet attrs) {  super(context, attrs);  //初始化一只笔  mPaint = new Paint();  //获取xml当中设置的属性,如果没有设置,则设置一个默认值  TypedArray typedArray = context.obtainStyledAttributes(attrs , R.styleable.CustomProgressBar);  max = typedArray.getInteger(R.styleable.CustomProgressBar_max , 100);  roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.RED);  roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor , Color.BLUE);  textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor , Color.GREEN);  textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize , 55);  roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth , 10);  textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow , true); } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  //画背景圆环  int center = getWidth() / 2;  //设置半径  float radius = center - roundWidth / 2;  //设置圆圈的颜色  mPaint.setColor(roundColor);  mPaint.setStyle(Paint.Style.STROKE);  mPaint.setStrokeWidth(roundWidth);//圆环的宽度  mPaint.setAntiAlias(true);//设置抗锯齿  //画外圈  canvas.drawCircle(center , center ,radius , mPaint);  //画进度百分比  mPaint.setColor(textColor);  mPaint.setStrokeWidth(0);  //设置字体大小  mPaint.setTextSize(textSize);  mPaint.setTypeface(Typeface.DEFAULT);  //设置笔帽  mPaint.setStrokeCap(Paint.Cap.ROUND);  //设置文字的摆放方式为居中  mPaint.setTextAlign(Paint.Align.CENTER);  //获取当前进度的值  int percent = (int) (progress / (float)max * 100);  String strPercent = percent + "%";  //获取画笔的文字属性,总共有bottom , top , leading , ascent , descent 这个以后会详细讲解  Paint.FontMetricsInt fm = mPaint.getFontMetricsInt();  if(percent != 0){   canvas.drawText(strPercent , getWidth() / 2 ,     getWidth() / 2 + (fm.bottom - fm.top) / 2 - fm.bottom, mPaint);  }  //画圆弧  RectF oval = new RectF(center - radius , center - radius ,center + radius , center + radius);  mPaint.setColor(roundProgressColor);  mPaint.setStrokeWidth(roundWidth);  mPaint.setStyle(Paint.Style.STROKE);  //设置笔帽  mPaint.setStrokeCap(Paint.Cap.ROUND);  //话进度  canvas.drawArc(oval , 0 , 360 * progress / max , false , mPaint); } public void setProgress(int progress){  if(progress < 0){   throw new IllegalArgumentException("进度progress不能小于0");  }  if(progress > max){   progress = max;  }  if(progress <= max){   this.progress = progress;   postInvalidate();  } }}

在我们的xml中设置控件:

 <xxx.xxx.CircleProgressBar  android:id="@+id/progressbar"  android:layout_width="100dp"  android:layout_height="100dp"  app:roundProgressColor="#ff00ff"  app:textColor="#666666"  app:textSize="20dp"  app:roundWidth="15dp"  />

Activity功能实现代码:

mProgressBar = (CircleProgressBar) findViewById(R.id.progressbar);  mProgressBar.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View v) {    //模拟http请求    new Thread(new Runnable() {     @Override     public void run() {      while (progress <= 100){       progress += 2;       mProgressBar.setProgress(progress);       //模拟网络请求,每隔100毫秒增加一个进度       SystemClock.sleep(100);      }     }    }).start();   }  });

完结!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

明天又会是新的一天,而我依然年轻。

Android自定义圆形进度条

相关文章:

你感兴趣的文章:

标签云: