Android自定义控件实现带文本与数字的圆形进度条

本文实例为大家分享了Android实现圆形进度条的具体代码，供大家参考，具体内容如下

实现的效果图如下所示：

第一步：绘制下方有缺口的空心圆，称为外围大弧吧

anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);

第二步：计算绘制圆弧进度条时的起始角度，设置为外围大弧的左端点为进度值得起点，扫过的角度所占外围大弧的百分比就是进度值

第三步：绘制数字、文字、百分号

第四步：使用Handler Runnable 和DecelerateInterpolator是进度条和数字动起来

测试代码：

final CustomCircleBar circle=(CustomCircleBar)findViewById(R.id.win_home);
circle.setPercent(10);
circle.setCustomText("呵呵");
circle.setProgessColor(getResources().getColor(R.color.blue));
final Random random=new Random();
circle.setonClickListener(new View.onClickListener(){
 @Override
 public void onClick(View v){
 circle.setPercent(random.nextInt(100));
 }
});

完成代码如下：

public class CustomCircleBar extends View {
 private Context context;
 
 private int percent;
 
 private int mProgessColor;
 
 private String mCustomText;
 
 private Paint paintBar = new Paint();
 
 private Paint paintText = new Paint();
 
 private TypedValue typedValue;
 
 DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
 
 private int duration = 10;
 private int curTime = 0;
 public CustomCircleBar(Context context) {
 super(context);
 this.context=context;
 init();
 }
 
 public CustomCircleBar(Context context, AttributeSet attrs) {
 super(context, attrs);
 this.context=context;
 init();
 }
 
 public CustomCircleBar(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 this.context=context;
 init();
 }
 
 
 
 public void setPercent(int percent) {
 this.percent = percent;
 
 if (isShown()) {
  
  curTime=0;
  this.invalidate();
 }
 }
 
 public void setProgessColor(int mProgessColor) {
 this.mProgessColor = mProgessColor;
 if (isShown()) {
  this.invalidate();
 }
 }
 
 
 public void setCustomText(String mCustomText) {
 this.mCustomText = mCustomText;
 }
 
 private Handler mHandler = new Handler();
 private Runnable mAnimation = new Runnable() {
 @Override
 public void run() {
  if (curTime < duration) {
  curTime++;
  
  CustomCircleBar.this.invalidate();
  }
 }
 };
 
 private void init() {
 
 percent = 0;
 mProgessColor=Color.rgb(95,112,72);
 mCustomText="Home";
 typedValue=new TypedValue();
 context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);
 }
 
 
 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 float mWidth = getWidth();
 float mHeight = getHeight();
 
 
 paintBar.reset();
 
 paintBar.setStrokeWidth(4);
 
 paintBar.setStyle(Paint.Style.STROKE);
 paintBar.setAntiAlias(true);
 paintBar.setColor(mProgessColor);
 
 paintBar.setAlpha(80);
 
 paintText.setTextSize(20);
 paintText.setColor(getResources().getColor(typedValue.resourceId));
 paintText.setStyle(Paint.Style.STROKE);
 paintText.setAntiAlias(true);
 
 paintText.setTextAlign(Paint.Align.CENTER);
 
 Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
 
 float textHeight = fontMetrics.bottom - fontMetrics.top;
 
 float radius = Math.min(mWidth, mHeight) / 2 - 10;
 
 
 canvas.save();
 
 canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
 
 canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paintBar);
 
 
 float theta_offset = (float) Math.acos((radius - textHeight / 2) / radius);
 
 float theta_full = 360 - 2 * theta_offset;
 
 float thetaProcess = mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration) * percent * theta_full / 100;
 
 paintBar.setAlpha(255);
 paintBar.setColor(mProgessColor);
 
 canvas.drawArc(new RectF(mWidth / 2 - radius, mHeight / 2 - radius, mWidth / 2 + radius, mHeight / 2 + radius), theta_offset+90, thetaProcess, false, paintBar);
 
 canvas.restore();
 
 paintText.setTextSize(20);
 fontMetrics = paintText.getFontMetrics();
 float textbaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
 canvas.drawText(mCustomText, mWidth / 2, mHeight / 2 + radius - textHeight / 2 + textbaseLineOffset, paintText);
 
 
 paintText.setTextSize(mHeight * 1 / 8);
 fontMetrics = paintText.getFontMetrics();
 textbaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
 canvas.drawText("%", mWidth / 2, mHeight / 2 + radius / 3 + textbaseLineOffset, paintText);
 
 
 paintText.setTextSize(mHeight * 3 / 8);
 canvas.drawText("" + (int)(percent*mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration)), mWidth / 2, mHeight / 2, paintText);
 
 mHandler.postDelayed(mAnimation, 20);
 }
}

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