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组件来控制下载的开始

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button_myprogress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始下载"/>

<com.example.laowang.android0916canvas_.weight.MyArcProgress
android:id="@+id/myprogress"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

　　在活动中通过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);
}