好,话不多说,先上效果图(gif图的效果不是很清晰,可以下载demo看比较清晰):
这个是本进度条样式的演示图使用方法很简单:
1.在xml中放入进度条控件
<cn.com.cxsz.wocarnetwork.view.MyProgress
android:id="@+id/ui_main_mb_progress"
android:layout_width="@dimen/d300"
android:layout_height="@dimen/d300"
android:layout_centerVertical="true"
android:layout_gravity="center_horizontal"
/>
2.初始化进度条
myprogress.setMaxProgress(2000); myprogress.setLoadingText("查询中"); myprogress.setmTxtHint1("总进度" + myprogress.getMaxProgress()); myprogress.setmTxtHint2("当前进度");
3.设置进度
myprogress.setLoopThread(1500);```
就这样就可以了。
下面是自定义ProgressBar的代码:
public class MyProgress extends View {
private int mMaxProgress = 100;
private int mProgress = 0;
int unit = mMaxProgress / 25;
int time = 0;
//area we're going to draw this view
private final RectF mRectF;
private final Paint mPaint;
private String mTxtHint1;
private String mTxtHint2;
private String middletext = "";
private int startProgess = 0;
private Handler handler = new Handler();
public MyProgress(Context context, AttributeSet attrs) {
super(context, attrs);
mRectF = new RectF();
mPaint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//TODO 设置进度条高度宽度为控件高度,宽度
int width = this.getWidth();
int height = this.getHeight();
//make sure it's a square.
int min = Math.min(width, height);
int widthDif = width - min;
int heightDif = height - min;
//设置抗锯齿(画笔样式)
mPaint.setAntiAlias(true);
mPaint.setColor(Color.rgb(0xe9, 0xe9, 0xe9));
canvas.drawColor(Color.TRANSPARENT);
int mCircleLineStrokeWidth = 8;
mPaint.setStrokeWidth(mCircleLineStrokeWidth);
mPaint.setStyle(Paint.Style.STROKE);
//先画一个矩形,规范四维
mRectF.left = (widthDif > 0 ? (widthDif / 2) : 0) + mCircleLineStrokeWidth / 2; // left x
mRectF.top = (heightDif > 0 ? (heightDif / 2) : 0) + mCircleLineStrokeWidth / 2; // left y
mRectF.right = width - mCircleLineStrokeWidth / 2 - (widthDif > 0 ? (widthDif / 2) : 0); // right x
mRectF.bottom = height - mCircleLineStrokeWidth / 2 - (heightDif > 0 ? (heightDif / 2) : 0); // right y
canvas.drawArc(mRectF, -90, 360, false, mPaint);//画背景
mPaint.setColor(getResources().getColor(R.color.yongliang));
canvas.drawArc(mRectF, (((float) startProgess / mMaxProgress) * 360) - 90,
((float) mProgress / mMaxProgress) * 360, false, mPaint);//画进度条
//画中间的进度数字
int mTxtStrokeWidth = 2;
mPaint.setStrokeWidth(mTxtStrokeWidth);
int textHeight = height / 6;
mPaint.setTextSize(textHeight);
mPaint.setColor(getResources().getColor(R.color.white));
int textWidth = (int) mPaint.measureText(middletext, 0, middletext.length());
mPaint.setStyle(Paint.Style.FILL);
canvas.drawText(middletext, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint);
//绘制进度数字上的文字
if (!TextUtils.isEmpty(mTxtHint1)) {
mPaint.setStrokeWidth(mTxtStrokeWidth);
textHeight = height / 10;
mPaint.setTextSize(textHeight);
mPaint.setColor(getResources().getColor(R.color.gray));
textWidth = (int) mPaint.measureText(mTxtHint1, 0, mTxtHint1.length());
mPaint.setStyle(Paint.Style.FILL);
canvas.drawText(mTxtHint1, width / 2 - textWidth / 2, height / 4 + textHeight / 2, mPaint);
}
//绘制进度数字下的文字
if (!TextUtils.isEmpty(mTxtHint2)) {
mPaint.setStrokeWidth(mTxtStrokeWidth);
textHeight = height / 12;
mPaint.setTextSize(textHeight);
mPaint.setColor(getResources().getColor(R.color.gray));
textWidth = (int) mPaint.measureText(mTxtHint2, 0, mTxtHint2.length());
mPaint.setStyle(Paint.Style.FILL);
canvas.drawText(mTxtHint2, width / 2 - textWidth / 2, 3 * height / 4 + textHeight / 2, mPaint);
}
}
//获取最大进度数
public int getMaxProgress() {
return mMaxProgress;
}
//设置最大进度数
public void setMaxProgress(int maxProgress) {
this.mMaxProgress = maxProgress;
unit = mMaxProgress / 25;
}
//设置进度
public void setProgress(int progress) {
startProgess = 0;
middletext = "";
this.mProgress = progress;
middletext = mProgress + "";
this.postInvalidate();
}
//获取进度值时的一个加载动画
public void setLoopProgress(int startProgess, int mProgress) {
this.startProgess = startProgess;
this.mProgress = mProgress;
this.postInvalidate();
}
//设置中间的文字
public void setLoadingText(String text) {
this.middletext = text == null ? "" : text;
}
public int getProgress() {
return mProgress;
}
public String getmTxtHint1() {
return mTxtHint1;
}
//设置上边文字
public void setmTxtHint1(String mTxtHint1) {
this.mTxtHint1 = mTxtHint1;
}
public String getmTxtHint2() {
return mTxtHint2;
}
//设置下边文字
public void setmTxtHint2(String mTxtHint2) {
this.mTxtHint2 = mTxtHint2;
}
//调用加载动画线程
public void setLoopThread(int pro) {
handler.post(new LoopRunable(pro));
}
//动画线程
public class LoopRunable implements Runnable {
private int pro;
public LoopRunable(int pro) {
this.pro = pro;
}
@Override
public void run() {
if (mProgress < mMaxProgress) {
mProgress = mProgress + unit;
} else {
mProgress = 0;
}
setLoopProgress(mProgress - 20, mProgress);
time = time + 20;
if (time > 2000 && mProgress == 0) {
setLoopProgress(0, 0);
time = 0;
setRunProgess(pro);
} else {
handler.postDelayed(this, 20);
}
}
}
private void setRunProgess(int pro) {
handler.post(new GoalRunnable(pro));
}
public class GoalRunnable implements Runnable {
private int unit = 0;
private int progess;
public GoalRunnable(int progess) {
this.progess = progess;
}
@Override
public void run() {
if (unit < progess) {
if (progess > 20) {
unit = unit + progess / 20;
} else {
unit++;
}
setProgress(unit);
handler.postDelayed(this, 10);
}
}
}
}
基本逻辑就是画两个颜色不同的圆弧,一个画满作为背景,一个用参数设置角度,然后用handler线程设置刷新数据。
备注:` //画中间的进度数字
int mTxtStrokeWidth = 2;
mPaint.setStrokeWidth(mTxtStrokeWidth);
int textHeight = height / 6;
mPaint.setTextSize(textHeight);
mPaint.setColor(getResources().getColor(R.color.white));
int textWidth = (int) mPaint.measureText(middletext, 0, middletext.length());
mPaint.setStyle(Paint.Style.FILL);
canvas.drawText(middletext, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint);`
这个是绘制:中间文字的代码,但是发现绘制文字的时候,中文文字明显要比数字和字母大一些,不知道什么原因,各位看官,如果有解决办法可以告知一下。多谢啦
附录demo源代码下载地址:http://download.csdn.net/download/as4399/9774079
网友评论