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文件,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- 加载自定义的View -->
<com.test.progressbartest.CircleProgressBar
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
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);
}
}