ProgressBar控件入门

心已赠人 2022-08-10 04:46 197阅读 0赞

ProgressBar进度条在实际开发中，很是常用，任何耗时操作都会使用进度条来告诉用户，这里会话费一点时间，请耐心等待。

废话不多说，直接上代码。

## 效果图： ##

![Center][]

## 项目下载链接： ##

[ProgressBar自定义进度圈下载][ProgressBar]

## 代码： ##

1、新建一个普通的java类CircleProgressBar，代码如下：

package com.test.progressbartest;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.view.View;
    
    public class CircleProgressBar extends View {
    	private Paint mBackPaint;
    	private Paint mFrontPaint;
    	private Paint mTextPaint;
    	private float mStrokeWidth = 50;
    	private float mHalfStrokeWidth = mStrokeWidth / 2;
    	private float mRadius = 200;// 半径
    	private RectF mRect;
    	//加载的初始值
    	private int mProgress = 0;
    	// 加载的目标值
    	private int mTargetProgress = 88;
    	//最大值
    	private int mMax = 100;
    	private int mWidth;// 宽
    	private int mHeight;// 高
    
    	// 下面这三个重构方法必须要有，否则报错
    	public CircleProgressBar(Context context) {
    		super(context);
    		init();
    	}
    
    	public CircleProgressBar(Context context, AttributeSet attrs, int defStyle) {
    		super(context, attrs, defStyle);
    		// TODO Auto-generated constructor stub
    		init();
    	}
    
    	public CircleProgressBar(Context context, AttributeSet attrs) {
    		super(context, attrs);
    		// TODO Auto-generated constructor stub
    		init();// 程序先进入这里
    	}
    
    	/**
    	 * 在Android中需要通过graphics类来显示2D图形。
    	 * graphics中包括了Canvas（画布）、Paint（画笔）、Color（颜色）、Bitmap（图像）等常用的类。
    	 * graphics具有绘制点、线、颜色、2D几何图形、图像处理等功能。
    	 */
    	private void init() {
    		// TODO Auto-generated method stub
    
    		//进度圈的背景色，执行完第一次onDraw（）方法后，这个蓝色的背景进度圈就已经画好了
    		mBackPaint = new Paint();// 新建一个画笔
    		mBackPaint.setColor(Color.BLUE); // 设置画笔的颜色为蓝色
    		mBackPaint.setAntiAlias(true);// 设置画笔锯齿效果：图像边缘相对清晰一点，锯齿痕迹不那么明显
    		mBackPaint.setStyle(Paint.Style.STROKE); // 设置画笔的风格（空心）
    		mBackPaint.setStrokeWidth(mStrokeWidth);// 设置空心边框的宽度
    
    		//加载的进度圈，每执行一次onDraw（）方法，画一个新的红色的进度圈
    		mFrontPaint = new Paint();// 新建一个画笔
    		mFrontPaint.setColor(Color.RED);// 设置画笔的颜色为红色
    		mFrontPaint.setAntiAlias(true);// 设置画笔锯齿效果：图像边缘相对清晰一点，锯齿痕迹不那么明显
    		mFrontPaint.setStyle(Paint.Style.STROKE); // 设置画笔的风格（空心）
    		mFrontPaint.setStrokeWidth(mStrokeWidth);// 设置空心边框的宽度
    
    		// 画中间的数字，每执行一次onDraw（）方法，重新画一次数字
    		mTextPaint = new Paint();// 新建一个画笔
    		mTextPaint.setColor(Color.GREEN);// 设置画笔的颜色为绿色
    		mTextPaint.setAntiAlias(true);// 设置画笔锯齿效果：图像边缘相对清晰一点，锯齿痕迹不那么明显
    		mTextPaint.setTextSize(80);// 设置字体的尺寸
    		mTextPaint.setTextAlign(Paint.Align.CENTER);// 文本对齐方式
    	}
    
    	/**
    	 * measure（计算）自定义,View在屏幕上绘制出来先要经过measure(计算)和layout(布局). 
    	 * 问：什么时候调用onMeasure方法?
    	 * 答：当子View的父控件要放置该View的时候
    	 * ，父控件会传递两个参数给View——widthMeasureSpec和heightMeasureSpec。
    	 * 这两个参数是View可以获取的宽高尺寸和模式 混合的int数据。
    	 * 可以通过int mode=MeasureSpec.getMode(widthMeasureSpec)得到模式，
    	 * 通过int size=MeasureSpec.getSize(widthMeasureSpec)得到尺寸。
    	 */
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    		// TODO Auto-generated method stub
    		// 运行完init()，程序进入这里，一共进入两次
    		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    		mWidth = getRealSize(widthMeasureSpec);
    		mHeight = getRealSize(heightMeasureSpec);
    		setMeasuredDimension(mWidth, mHeight);// 设置当前View的大小
    	}
    
    	/**
    	 * onDraw是在View初化完成之后开始调用
    	 */
    	@Override
    	protected void onDraw(Canvas canvas) {// Canvas（画布）类
    		// TODO Auto-generated method stub
    		initRect();//执行两次onMeasure（）方法后，进入这里
    		float angle = mProgress / (float) mMax * 360;
    		canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);// 绘制圆形
    		canvas.drawArc(mRect, -90, angle, false, mFrontPaint);// 绘制圆弧
    		canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight
    				/ 2 + mHalfStrokeWidth, mTextPaint);// 绘制字符
    		if (mProgress < mTargetProgress) {
    			mProgress += 1;// 每次递增一
    			invalidate();// 重绘,就是重新调用onDraw方法
    		}
    	}
    
    	/**
    	 * 获得尺寸
    	 */
    	public int getRealSize(int measureSpec) {
    		int result = 1;
    		int mode = MeasureSpec.getMode(measureSpec);// 得到模式
    		int size = MeasureSpec.getSize(measureSpec);// 得到尺寸
    		if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
    			// 自己计算
    			result = (int) (mRadius * 2 + mStrokeWidth);
    		} else {
    			result = size;
    		}
    		return result;
    	}
    
    	/**
    	 * 画一个矩形 Rect是使用int类型作为数值，RectF是使用float类型作为数值
    	 */
    	private void initRect() {
    		if (mRect == null) {
    			mRect = new RectF();// 新建一个矩形坐标，
    			int viewSize = (int) (mRadius * 2);// 半径*2=直径
    			int left = (mWidth - viewSize) / 2;// 左边的坐标
    			int top = (mHeight - viewSize) / 2;// 上面的坐标
    			int right = left + viewSize;// 右边的坐标
    			int bottom = top + viewSize;// 下面的坐标
    			mRect.set(left, top, right, bottom);// 设置这个矩形的上、下、左、右
    		}
    	}
    }

2、在layout下面新建activity\_main.xml文件，代码如下：

3、在MainActivity.java中代码如下：

package com.test.progressbartest;
    
    import android.app.Activity;
    import android.app.ActionBar;
    import android.app.Fragment;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.ViewGroup;
    import android.os.Build;
    
    public class MainActivity extends Activity {
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    	}
    
    
    }

[Center]: /images/20220731/fe52a122781845c7a0acdae07dce0a36.png
[ProgressBar]: http://download.csdn.net/detail/u011159417/9260423