首页 > 系统 > Android > 正文

Android实现环形进度条的实例

2019-12-12 04:01:39
字体:
来源:转载
供稿:网友

Android实现环形进度条的效果图如下:

自定义控件:AttendanceProgressBar

代码如下:

public class AttendanceProgressBar extends View {  // 画圆环底部的画笔  private Paint mCirclePaint;  // 画圆环的画笔  private Paint mRingPaint;  // 画字体的画笔  private Paint mTextPaint;  // 圆形颜色  private int mCircleColor;  // 圆环颜色  private int mRingColor;  // 半径  private float mRadius;  // 圆环半径  private float mRingRadius;  // 圆环宽度  private float mStrokeWidth;  // 圆心x坐标  private int mXCenter;  // 圆心y坐标  private int mYCenter;  // 字的长度  private float mTxtWidth;  // 字的高度  private float mTxtHeight;  // 总进度  private int mTotalProgress = 100;  // 当前进度  private int mProgress = 80;  //字体颜色  private int mTextColor;  // 字体大小  private float mTextSize;  public AttendanceProgressBar(Context context, AttributeSet attrs) {    super(context, attrs);    // 获取自定义的属性    initAttrs(context, attrs);    initVariable();  }  private void initAttrs(Context context, AttributeSet attrs) {    TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,        R.styleable.AttendanceProgressBar, 0, 0);    mRadius = typeArray.getDimension(R.styleable.AttendanceProgressBar_radius, 80);    mStrokeWidth = typeArray.getDimension(R.styleable.AttendanceProgressBar_strokeWidth, 10);    mCircleColor = typeArray.getColor(R.styleable.AttendanceProgressBar_circleColor, 0xFFFFFFFF);    mRingColor = typeArray.getColor(R.styleable.AttendanceProgressBar_ringColor, 0xFFFFFFFF);    mTextColor = typeArray.getColor(R.styleable.AttendanceProgressBar_textColor, 0xFF000000);    mTextSize = typeArray.getDimension(R.styleable.AttendanceProgressBar_textSize, 80);    mRingRadius = mRadius + mStrokeWidth / 2;  }  private void initVariable() {    mCirclePaint = new Paint();    mCirclePaint.setAntiAlias(true);    mCirclePaint.setColor(mCircleColor);//    mCirclePaint.setStyle(Paint.Style.FILL);    mCirclePaint.setStyle(Paint.Style.STROKE);    mCirclePaint.setStrokeWidth(mStrokeWidth);    mRingPaint = new Paint();    mRingPaint.setAntiAlias(true);    mRingPaint.setColor(mRingColor);    mRingPaint.setStyle(Paint.Style.STROKE);    mRingPaint.setStrokeWidth(mStrokeWidth);    mTextPaint = new Paint();    mTextPaint.setAntiAlias(true);    mTextPaint.setStyle(Paint.Style.FILL);    mTextPaint.setColor(mTextColor);//    mTextPaint.setARGB(255, 255, 255, 255);//    mTextPaint.setTextSize(mRadius / 2);    mTextPaint.setTextSize(mTextSize);    Paint.FontMetrics fm = mTextPaint.getFontMetrics();    mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);  }  @Override  protected void onDraw(Canvas canvas) {    mXCenter = getWidth() / 2;    mYCenter = getHeight() / 2;//    canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);    canvas.drawCircle(mXCenter, mYCenter, mRingRadius, mCirclePaint);    RectF oval = new RectF();    oval.left = (mXCenter - mRingRadius);    oval.top = (mYCenter - mRingRadius);    oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);    oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);    canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint); ////            canvas.drawCircle(mXCenter, mYCenter, mRadius + mStrokeWidth / 2, mRingPaint);//      String txt = mProgress + "%";    String txt = "16/18";    mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());//      canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);    canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4 - dipToPx(10), mTextPaint);    txt = "出勤人数";    mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());    canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4 + dipToPx(10), mTextPaint);  }  public void setProgress(int progress) {    mProgress = progress;    postInvalidate();  }  private int dipToPx(int dip) {    float scale = getContext().getResources().getDisplayMetrics().density;    return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));  }}

因为是自定义控件,所以在attr.xml文件定义了一些控件属性,以便在xml文件中设置这些属性

代码如下:

<?xml version="1.0" encoding="utf-8"?><resources>  <declare-styleable name="AttendanceProgressBar">    <attr name="radius" format="dimension"/>    <attr name="strokeWidth" format="dimension"/>    <attr name="circleColor" format="color"/>    <attr name="ringColor" format="color"/>    <attr name="textColor" format="color"/>    <attr name="textSize" format="dimension"/>  </declare-styleable></resources>

最后,在xml文件中,可以这样使用

<com.ztd.lieyi.widget.AttendanceProgressBar        android:layout_gravity="center"        android:layout_width="100dp"        android:layout_height="100dp"        app:radius="45dp"        app:strokeWidth="5dp"        app:textSize="@dimen/text_16"        app:textColor="@color/color_333333"        app:circleColor="@color/color_d5ebfd"        app:ringColor="@color/color_2c9df7"/>

这只是初步处理,使用时可以根据需求酌情处理~如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表