Android带圆形数字进度的自定义进度条示例

概述开发设计搞了一个带圆形进度的进度条，在GitHub上逛了一圈，发现没有，自己撸吧。

开发

设计搞了一个带圆形进度的进度条，在GitHub上逛了一圈，发现没有，自己撸吧。

先看界面效果：

主要思路是写一个继承Progressbar的自定义view，不废话，直接上代码：

package com.fun.progressbarwithnumber;import androID.content.Context;import androID.content.res.TypedArray;import androID.graphics.Canvas;import androID.graphics.Paint;import androID.graphics.RectF;import androID.util.AttributeSet;import androID.util.TypedValue;import androID.Widget.Progressbar;public class HorizontalProgressbarWithNumber extends Progressbar {  private static final int DEFAulT_TEXT_SIZE = 10;  private static final int DEFAulT_TEXT_color = 0XFFFC00D1;  private static final int DEFAulT_color_UNREACHED_color = 0xFFd3d6da;  private static final int DEFAulT_HEIGHT_REACHED_PROGRESS_bar = 2;  private static final int DEFAulT_HEIGHT_UNREACHED_PROGRESS_bar = 2;  private static final int DEFAulT_CIRCLE_color = 0XFF3F51B5;  protected Paint mPaint = new Paint();  // 字体颜色  protected int mTextcolor = DEFAulT_TEXT_color;  // 字体大小  protected int mTextSize = sp2px(DEFAulT_TEXT_SIZE);  // 覆盖进度高度  protected int mReachedProgressbarHeight = dp2px(DEFAulT_HEIGHT_REACHED_PROGRESS_bar);  // 覆盖进度颜色  protected int mReachedbarcolor = DEFAulT_TEXT_color;  // 未覆盖进度高度  protected int mUnReachedProgressbarHeight = dp2px(DEFAulT_HEIGHT_UNREACHED_PROGRESS_bar);  // 未覆盖进度颜色  protected int mUnReachedbarcolor = DEFAulT_color_UNREACHED_color;  // 圆的颜色  protected int mCirclecolor = DEFAulT_CIRCLE_color;  protected int mRealWIDth;  protected boolean mIfdrawText = true;  protected boolean mIfdrawCircle = true;  protected static final int VISIBLE = 0;  public HorizontalProgressbarWithNumber(Context context,AttributeSet attrs) {    this(context,attrs,0);  }  public HorizontalProgressbarWithNumber(Context context,AttributeSet attrs,int defStyle) {    super(context,defStyle);    obtainStyledAttributes(attrs);    mPaint.setTextSize(mTextSize);    mPaint.setcolor(mTextcolor);    mPaint.setAntiAlias(true);  }  private voID obtainStyledAttributes(AttributeSet attrs) {    // 获取自定义属性    final TypedArray attributes = getContext().obtainStyledAttributes(attrs,R.styleable.HorizontalProgressbarWithNumber);    mTextcolor = attributes.getcolor(R.styleable.HorizontalProgressbarWithNumber_progress_text_color,DEFAulT_TEXT_color);    mTextSize = (int) attributes.getDimension(R.styleable.HorizontalProgressbarWithNumber_progress_text_size,mTextSize);    mCirclecolor = attributes.getcolor(R.styleable.HorizontalProgressbarWithNumber_progress_circle_color,DEFAulT_CIRCLE_color);    mReachedbarcolor = attributes.getcolor(R.styleable.HorizontalProgressbarWithNumber_progress_reached_color,mTextcolor);    mUnReachedbarcolor = attributes.getcolor(R.styleable.HorizontalProgressbarWithNumber_progress_unreached_color,DEFAulT_color_UNREACHED_color);    mReachedProgressbarHeight = (int) attributes.getDimension(R.styleable.HorizontalProgressbarWithNumber_progress_reached_bar_height,mReachedProgressbarHeight);    mUnReachedProgressbarHeight = (int) attributes.getDimension(R.styleable.HorizontalProgressbarWithNumber_progress_unreached_bar_height,mUnReachedProgressbarHeight);    int textVisible = attributes.getInt(R.styleable.HorizontalProgressbarWithNumber_progress_text_visibility,VISIBLE);    if (textVisible != VISIBLE) {      mIfdrawText = false;    }    attributes.recycle();    int left = (int) (mReachedProgressbarHeight * 0.8),right = (int) (mReachedProgressbarHeight * 0.8);    int top = (int) (mReachedProgressbarHeight * 0.3 + dp2px(1)),bottom = (int) (mReachedProgressbarHeight * 0.3 + dp2px(1));    setpadding(left,top,right,bottom);  }  @OverrIDe  protected synchronized voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {    int wIDth = MeasureSpec.getSize(wIDthMeasureSpec);    int height = measureHeight(heightmeasureSpec);    setMeasuredDimension(wIDth,height);    mRealWIDth = getMeasureDWIDth() - getpaddingRight() - getpaddingleft();  }  private int measureHeight(int measureSpec) {    int result;    int specMode = MeasureSpec.getMode(measureSpec);    int specsize = MeasureSpec.getSize(measureSpec);    if (specMode == MeasureSpec.EXACTLY) {      result = specsize;    } else {      float textHeight = (mPaint.descent() - mPaint.ascent());      result = (int) (getpaddingtop() + getpaddingBottom() + Math.max(          Math.max(mReachedProgressbarHeight,mUnReachedProgressbarHeight),Math.abs(textHeight)));      if (specMode == MeasureSpec.AT_MOST) {        result = Math.min(result,specsize);      }    }    return result;  }  @OverrIDe  protected synchronized voID onDraw(Canvas canvas) {    canvas.save();    canvas.translate(getpaddingleft(),getHeight() / 2);    boolean noNeedBg = false;    float radio = getProgress() * 1.0f / getMax();    float progressposX = (int) (mRealWIDth * radio);    String text = getProgress() + "%";    float textWIDth = mPaint.measureText(text);    float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;    float radius = (mReachedProgressbarHeight + getpaddingBottom() + getpaddingtop()) / 2;    // 覆盖的进度    float endX = progressposX;    if (endX > -1) {      mPaint.setcolor(mReachedbarcolor);      RectF rectF = new RectF(0,0 - getpaddingtop() - getpaddingBottom(),endX,mReachedProgressbarHeight - getpaddingBottom());      canvas.drawRoundRect(rectF,25,mPaint);    }    // 未覆盖的进度    if (!noNeedBg) {      float start = progressposX;      mPaint.setcolor(mUnReachedbarcolor);      RectF rectF = new RectF(start,mRealWIDth + getpaddingRight() - radius,mPaint);    }    // 圆    if (mIfdrawCircle) {      mPaint.setcolor(mCirclecolor);      canvas.drawCircle(progressposX,radius,mPaint);    }    // 文本    if (mIfdrawText) {      mPaint.setcolor(mTextcolor);      canvas.drawText(text,progressposX - textWIDth / 2,-textHeight,mPaint);    }    canvas.restore();  }  /**   * dp 2 px   */  protected int dp2px(int dpVal) {    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal,getResources().getdisplayMetrics());  }  /**   * sp 2 px   */  protected int sp2px(int spVal) {    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,spVal,getResources().getdisplayMetrics());  }}

使用

在布局文件中加入：

<com.fun.progressbarwithnumber.HorizontalProgressbarWithNumber    androID:ID="@+ID/hpbwn"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:layout_margin="10dp"    fun:progress_circle_color="#ff000000"    fun:progress_reached_bar_height="20dp"    fun:progress_reached_color="#FFFF4081"    fun:progress_text_color="#ffffffff"    fun:progress_text_size="14sp"    fun:progress_unreached_bar_height="20dp"    fun:progress_unreached_color="#ffBCB4E8" />

progress_reached_bar_height：当前进度的高度 progress_unreached_bar_height：剩余进度的高度 progress_text_size：圆圈内文字的大小

注意：

当前进度和剩余进度的高度要一致，圆圈大小和圆圈内文字的大小要配合Java代码调整。

项目源码：ProgressBarWithNumber_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android带圆形数字进度的自定义进度条示例全部内容，希望文章能够帮你解决Android带圆形数字进度的自定义进度条示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。