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

发布时间:2019-08-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Android自定义控件实现带文本与数字的圆形进度条脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

实现的效果图如下所示:

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(){  @@R_360_654@  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;  /*isShown():Returns the visibility of this view and all of its ancestors*/  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++;   /** 导致重绘,调用OnDraw,onDraw最后调用    * mHandler.postDelayed(mAnimation, 20);更新进度条,界面重绘    * 每次20毫秒,绘制10次,因此动画时间200毫秒    */   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();  /**   * 下边是进度条画笔的设置   */  /** ReStores the paint to its default settings. */  paintBar.reset();  /**   * 圆环度4个像素   */  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;  /* &#10065; save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。   ❑ restore:用来恢复Canvas之前保存的状态。止save后对Canvas执行的操作对后续的绘制有影响。*/  /*保存画布,绘制进度条*/  canvas.save();  /*clipRect:该方法用于裁剪画布,也就是设置画布的显示区域  调用clipRect()方法后,只会显示被裁剪的区域,之外的区域将不会显示 */  canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);  /*因为clipRect的原因,外边的圆环下边留个缺口绘制文字*/  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);  /**   * 20毫秒后执行动画   */  mHandler.postDelayed(mAnimation, 20);  } }
android教程
脚本网站
android studio

脚本宝典总结

以上是脚本宝典为你收集整理的Android自定义控件实现带文本与数字的圆形进度条全部内容,希望文章能够帮你解决Android自定义控件实现带文本与数字的圆形进度条所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。