0916Android基础自定义View进度条专题
自定义进度条
下面这三种进度条实现方法基本相同，无非是在自定义View组件中画图形的时候不一样。
简单的讲一下步骤（表达能力有限，请结合代码看）：
- 自定义View类并画出图形，创建一个int型全局变量mCurrent，通过设置它的setmCurrent(int mCurrent) 方法来传递实时变化的进度。
- 将自定义的View添加到布局中
- 在活动中对View进行UI操作，通过Handler（线程）以及对setmCurrent(int mCurrent) 的调用来实现UI操作。注意:因为是进度条，所以需要在setmCurrent(int mCurrent)中加入刷新数据（ invalidate()）操作，每调用一次这个方法，刷新一下进度。
圆环进度条Demo
按照上面的方法，第一步自定义View，注意这里通过mCurrent来控制进度条。
// 充当进度条的圆弧
canvas.drawArc(oval, 0, (float)mCurrent/mTotal*360, false, mPaintCurrent);一个小知识点，对float对象造型成几位小数
float progress=mCurrent/(float)mTotal*100;
DecimalFormat df = new DecimalFormat( "0.0000");//造型成4位小数
df.format(progress)自定义View类
package com.example.laowang.android0916canvas_.weight;
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;
import java.text.DecimalFormat;
/**
* Created by Administrator on 2015/9/16.
*/
public class MyArcProgress extends View {
private int mWith;
private int mHeight;
private Paint mPaintTotal;
private Paint mPaintCurrent;
private Paint mPaintText;
private int mCurrent;
private int mTotal=200;
public int getmCurrent() {
return mCurrent;
}
public void setmCurrent(int mCurrent) {
this.mCurrent = mCurrent;
invalidate();//获得新的数据后刷新一次
}
public MyArcProgress(Context context) {
super(context);
}
public MyArcProgress(Context context, AttributeSet attrs) {
super(context, attrs);
mPaintCurrent=new Paint();
mPaintCurrent.setColor(Color.BLACK);
mPaintCurrent.setAntiAlias(true);
mPaintCurrent.setStrokeWidth((float) 30);
mPaintCurrent.setStyle(Paint.Style.STROKE);
mPaintTotal=new Paint();
mPaintTotal.setColor(Color.GRAY);
mPaintTotal.setAntiAlias(true);
mPaintTotal.setStrokeWidth(30);
mPaintTotal.setStrokeWidth((float) 30);
mPaintTotal.setStyle(Paint.Style.STROKE);
mPaintText=new Paint();
mPaintText.setColor(Color.BLACK);
mPaintText.setAntiAlias(true);
mPaintText.setTextSize(30);
mPaintText.setTextAlign(Paint.Align.CENTER);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWith = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
mHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 注意手机上的xy轴和平常的不一样,依次为左上右下
RectF oval=new RectF(mWith/2-200,mHeight/2-200,mWith/2+200,mHeight/2+200);
// oval.left=mWith/2-200; //左边
// oval.top=mHeight/2-200; //上边
// oval.right=mWith/2+200; //右边
// oval.bottom=mHeight/2+200; //下边
// 背景的圆弧
canvas.drawArc(oval, 0, 360, false, mPaintTotal);
// 充当进度条的圆弧
canvas.drawArc(oval, 0, (float)mCurrent/mTotal*360, false, mPaintCurrent);
// 将数字造型成俩位小数
float progress=mCurrent/(float)mTotal*100;
DecimalFormat df = new DecimalFormat( "0.0");
// 显示的数字
canvas.drawText(df.format(progress)+"%",mWith / 2, mHeight / 2+10,mPaintText);
}
}
将自定义类添加到布局中，添加一个Button组件来控制下载的开始
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
在活动中通过Handler和setmCurrent(int mCurrent)来实现对进度条的控制
package com.example.laowang.android0916canvas_;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.Button;
import com.example.laowang.android0916canvas_.weight.MyArcProgress;
import com.example.laowang.android0916canvas_.weight.MyCircleProgress;
/**
* Created by Administrator on 2015/9/16.
*/
public class MyArcProgressActivity extends Activity {
private MyArcProgress myProgress;
private Button mButtonProgress;
private int mCurrent;
private static final int PROGRESS=0X23;
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case PROGRESS:
myProgress.setmCurrent(mCurrent);
if(mCurrent<200) {
mCurrent++;
handler.sendEmptyMessageDelayed(PROGRESS, 30);
}
break;
default:
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_arc_progress);
myProgress= (MyArcProgress) findViewById(R.id.myprogress);
mButtonProgress= (Button) findViewById(R.id.button_myprogress);
mButtonProgress.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCurrent=0;
handler.sendEmptyMessageDelayed(PROGRESS,1000);
}
});
}
}
达到的效果
圆形进度条Demo
将相应的View添加到布局中，然后将上面代码中的MyArcProgress改成MyCircleProgress后，唯一的不同在于自定义View类中的onDraw
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mWith / 2, mHeight / 2, mTotal, mPaintTotal);
canvas.drawCircle(mWith / 2, mHeight / 2, mCurrent,mPaintCurrent);
// 将数字造型成俩位小数
float progress=mCurrent/(float)mTotal*100;
DecimalFormat df = new DecimalFormat( "0.0");
canvas.drawText(df.format(progress)+"%",mWith / 2, mHeight / 2+10,mPaintText);
}
柱形进度条Demo
同上。。。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 底部填充矩形,左上右下
canvas.drawRect(mWith/2-200,mHeight/2-200,mWith/2+200,mHeight/2+200,mPaintTotal);
// 进度条矩形
canvas.drawRect(mWith/2-200,mHeight/2+200-mCurrent*2,mWith/2+200,mHeight/2+200,mPaintCurrent);
// 将数字造型成俩位小数
float progress=mCurrent/(float)mTotal*100;
DecimalFormat df = new DecimalFormat( "0.0");
// 画上数字
canvas.drawText(df.format(progress)+"%",mWith / 2, mHeight / 2+10,mPaintText);
}