自定义进度条

首先需要在attrs的属性中定义两个值:

<?xml version="1.0" encoding="utf-8"?>
<resources>


        <declare-styleable name="RoundProgressBar">
        <attr name="rpbtext" format="string" />
        <attr name="roundColor" format="color" />
        <attr name="roundProgressColor" format="color" />
        <attr name="roundWidth" format="dimension" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
        <attr name="progressMax" format="integer" />
        <attr name="textDisplayable" format="boolean" />
        <attr name="roundDisplayStyle">
            <enum name="STROKE" value="0" />
            <enum name="FILL" value="1" />
        </attr>
    </declare-styleable>
    
    <declare-styleable name="StartStopChargeButton">
        <attr name="outRoundColor"      format="color"/>
        <attr name="midRoundColor"      format="color"/>
        <attr name="innerRoundColor"    format="color"/>
        <attr name="outRoundWidth"      format="dimension"/>
        <attr name="midRoundWidth"      format="dimension"/>
        <attr name="innerRoundWidth"    format="dimension"/>     
        <attr name="stopBtnText"             format="string"/>
        <attr name="stopBtnTextColor"        format="color"/>    
        <attr name="stopBtnTextSize"         format="dimension"/>
        <attr name="stopBtnTextDisplayable"  format="boolean"/>
    </declare-styleable> 
  
</resources>

接下来是布局文件：activity_main:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:customcomponent="http://schemas.android.com/apk/res/com.example.sjmcxny_code"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sjmcxny.controllayer.ActivityMain" >


    <include
        android:id="@+id/activity_title"
        layout="@layout/activity_title" />


    <com.example.sjmcxny_code.RoundProgressBar
        android:id="@+id/rpb_roundProgressBar"
        android:layout_width="@dimen/title_260"
        android:layout_height="@dimen/title_260"
        android:layout_below="@id/activity_title"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/title_60"
        customcomponent:roundColor="#dfdfdf"
        customcomponent:roundProgressColor="@android:color/holo_green_light"
        customcomponent:roundWidth="@dimen/title_10"
        customcomponent:textColor="@android:color/holo_green_light"
        customcomponent:textSize="18sp" />


    <com.example.sjmcxny_code.StartStopChargeButton
        android:id="@+id/bt_start_stop"
        android:layout_width="@dimen/title_100"
        android:layout_height="@dimen/title_100"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="@dimen/title_10"
        customcomponent:innerRoundColor="#1aaf5e"
        customcomponent:innerRoundWidth="@dimen/title_1"
        customcomponent:midRoundColor="#1fd874"
        customcomponent:outRoundColor="#26fd88"
        customcomponent:stopBtnText="开始充电"
        customcomponent:stopBtnTextColor="@android:color/white"
        customcomponent:stopBtnTextSize="@dimen/title_16" />


</RelativeLayout>

activity_title布局就一个textview这里就不写了

定义两个自定义view：

①RoundProgressBar:上方大圆：

public class RoundProgressBar extends View {


private Paint paint;//画笔
private int roundColor;//圆环的颜色
private int roundProgressColor;//进度条的颜色
private String text;//绘制的文字
private int textColor;//百分比文字的颜色
private float textSize;//百分比文字的大小
private float roundWidth;//圆环的宽度
private int progressMax;//进度的最大值 
private boolean textDisplayable;//百分比文字是否显示 
private int roundDisplayStyle;//进度百分比文字显示方式
private float progress = 0;//当前进度

public static final int STROKE = 0;  
    public static final int FILL = 1; 


public RoundProgressBar(Context context) {
this(context, null);
}

public RoundProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
// TODO Auto-generated constructor stub
}

public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);


paint = new Paint();
//TypeArray的作用是封装view的属性，attrs是XML文件中定义的属性，int[]参数是期望添加到view中的属性。我们从type中可以获取到view的属性。
//Attributes或TypeArray封装了view的所有属性。我们可以通过他们获取到view的属性，并且可以为属性设置默认值（初始值），如果属性没有定义或没有相应的资源的话。
TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);
//获取自定义属性和默认值
text = mTypedArray.getString(R.styleable.RoundProgressBar_rpbtext);
roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);  
roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);  
textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);  
textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);  
roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);  
progressMax = mTypedArray.getInteger(R.styleable.RoundProgressBar_progressMax, 100);  
textDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textDisplayable, true);  
roundDisplayStyle = mTypedArray.getInt(R.styleable.RoundProgressBar_roundDisplayStyle, 0);
if(text == null)
text = "当前进度";
mTypedArray.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);

/** 
         * 画出圆环 
         */  
        int centre_x = getWidth()/2; //获取圆心的x轴坐标
        int centre_y = getWidth()/2; //获取圆心的y轴坐标
        int radius = (int) (centre_x - roundWidth/2); //设置圆的半径  
        paint.setColor(roundColor); //设置画笔的颜色 
        paint.setStyle(Paint.Style.STROKE); //设置画笔为描边----有三个值：描边、填充、填充描边
        paint.setStrokeWidth(roundWidth); //设置画笔宽度  
        paint.setAntiAlias(true);  //消除锯齿   
        canvas.drawCircle(centre_x, centre_y, radius, paint); //画圆
        
        /** 
         * 画文字进度百分比 
         */       
        if(textDisplayable){  
        paint.setStrokeWidth(0);//设置画笔宽度
            paint.setColor(textColor);//设置画笔颜色
            paint.setTextSize(textSize);//设置字体大小  
            paint.setTypeface(Typeface.DEFAULT_BOLD);//设置字体
            paint.setTextAlign(Paint.Align.CENTER);//设置字体框水平居中
            //int percent = (int)((progress / progressMax) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0  
            //float textWidth = paint.measureText(text);   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间    
        canvas.drawText(text, centre_x, centre_y + textSize / 3, paint); //绘制剩余时间
        }
        
        /** 
         * 画圆弧 ，画圆环的进度 
         */    
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度  
        paint.setColor(roundProgressColor); //设置进度的颜色  
        RectF oval = new RectF(centre_x - radius, centre_y - radius, centre_x  
        + radius, centre_y + radius);  //用于定义的圆弧的形状和大小的界限
        
        switch (roundDisplayStyle) {
       case STROKE:{
        paint.setStyle(Paint.Style.STROKE);  
        canvas.drawArc(oval, 90, 360 * progress / progressMax, false, paint);  //根据进度画圆弧  
        break;  
       }  
       case FILL:{  
        paint.setStyle(Paint.Style.FILL_AND_STROKE); 
        canvas.drawArc(oval, 90, 360 * progress / progressMax, true, paint);  //根据进度画圆弧  
        break;  
       }
        }       
}


public int getRoundColor() {
return roundColor;
}


public void setRoundColor(int roundColor) {
this.roundColor = roundColor;
invalidate();
}


public int getRoundProgressColor() {
return roundProgressColor;
}


public void setRoundProgressColor(int roundProgressColor) {
this.roundProgressColor = roundProgressColor;
invalidate();
}


public int getTextColor() {
return textColor;
}


public void setText(String text) {
this.text = text;
invalidate();
}

public void setTextColor(int textColor) {
this.textColor = textColor;
invalidate();
}


public float getTextSize() {
return textSize;
}


public void setTextSize(float textSize) {
if(textSize >= 0) {
this.textSize = textSize;
invalidate();
}


}


public float getRoundWidth() {
return roundWidth;
}


public void setRoundWidth(float roundWidth) {
if(roundWidth >= 0) {
this.roundWidth = roundWidth;
invalidate();
}

}


public int getProgressMax() {
return progressMax;
}


public void setProgressMax(int progressMax) {
if(progressMax >= 0)
this.progressMax = progressMax;
}


public boolean isTextDisplayable() {
return textDisplayable;
}


public void setTextDisplayable(boolean textDisplayable) {
this.textDisplayable = textDisplayable;
invalidate();
}


public int getRoundDisplayStyle() {
return roundDisplayStyle;
}


public void setRoundDisplayStyle(int roundDisplayStyle) {
if(roundDisplayStyle==1) {
this.roundDisplayStyle = roundDisplayStyle;
} else {
this.roundDisplayStyle = 0;
}
invalidate();
}


public float getProgress() {
return progress;
}


public void setProgress(float progress) {
if(progress >= 0 && progress <= progressMax) {
this.progress = progress;
invalidate();
}
}

}

②StartStopChargeButton:下方开始充电按钮

public class StartStopChargeButton extends Button {


private Paint paint;
private int outRoundColor;
private int midRoundColor;
private int innerRoundColor;
private float outRoundWidth;
private float midRoundWidth;
private float innerRoundWidth;
private int stopBtnTextColor;
private float stopBtnTextSize;
private boolean stopBtnTextDisplayable;
private String stopBtnText = "开关";

public void setOutRoundColor(int outRoundColor) {
this.outRoundColor = outRoundColor;
invalidate();
}


public void setMidRoundColor(int midRoundColor) {
this.midRoundColor = midRoundColor;
invalidate();
}


public void setInnerRoundColor(int innerRoundColor) {
this.innerRoundColor = innerRoundColor;
invalidate();
}


public void setOutRoundWidth(float outRoundWidth) {
this.outRoundWidth = outRoundWidth;
invalidate();
}


public void setMidRoundWidth(float midRoundWidth) {
this.midRoundWidth = midRoundWidth;
invalidate();
}


public void setInnerRoundWidth(float innerRoundWidth) {
this.innerRoundWidth = innerRoundWidth;
invalidate();
}


public void setStopBtnTextColor(int stopBtnTextColor) {
this.stopBtnTextColor = stopBtnTextColor;
invalidate();
}


public void setStopBtnTextSize(float stopBtnTextSize) {
this.stopBtnTextSize = stopBtnTextSize;
invalidate();
}


public void setStopBtnTextDisplayable(boolean stopBtnTextDisplayable) {
this.stopBtnTextDisplayable = stopBtnTextDisplayable;
invalidate();
}


public void setStopBtnText(String stopBtnText) {
this.stopBtnText = stopBtnText;
invalidate();
}

public String getStopBtnText() {
return stopBtnText;
}


public StartStopChargeButton(Context context) {
this(context, null);
// TODO Auto-generated constructor stub
}


public StartStopChargeButton(Context context, AttributeSet attrs) {
this(context, attrs, 0);
// TODO Auto-generated constructor stub
}




public StartStopChargeButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
paint = new Paint();

TypedArray mTypeArray = context.obtainStyledAttributes(attrs, R.styleable.StartStopChargeButton);

outRoundColor = mTypeArray.getColor(R.styleable.StartStopChargeButton_outRoundColor, Color.RED);
midRoundColor = mTypeArray.getColor(R.styleable.StartStopChargeButton_midRoundColor, Color.RED);
innerRoundColor = mTypeArray.getColor(R.styleable.StartStopChargeButton_innerRoundColor, Color.RED);
outRoundWidth = mTypeArray.getDimension(R.styleable.StartStopChargeButton_outRoundWidth, 10);
midRoundWidth = mTypeArray.getDimension(R.styleable.StartStopChargeButton_midRoundWidth, 10);
innerRoundWidth = mTypeArray.getDimension(R.styleable.StartStopChargeButton_innerRoundWidth, 10);
stopBtnTextColor = mTypeArray.getColor(R.styleable.StartStopChargeButton_stopBtnTextColor, Color.BLACK);
stopBtnTextSize = mTypeArray.getDimension(R.styleable.StartStopChargeButton_stopBtnTextSize, 10);
stopBtnTextDisplayable = mTypeArray.getBoolean(R.styleable.StartStopChargeButton_stopBtnTextDisplayable, true);
String str = mTypeArray.getString(R.styleable.StartStopChargeButton_stopBtnText);
if(str != null)
stopBtnText = str;
mTypeArray.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
//super.onDraw(canvas);

int centre_x = getWidth()/2; //获取圆心的x轴坐标
        int centre_y = getWidth()/2; //获取圆心的y轴坐标

        /**
* 画最外层的圆环
* */
        int outradius = (int) (centre_x - outRoundWidth/2); //设置圆的半径
        paint.setColor(outRoundColor); //设置画笔的颜色 
        paint.setStyle(Paint.Style.STROKE);//设置画笔为描边----有三个值：描边、填充、填充描边
        paint.setStrokeWidth(outRoundWidth);//设置画笔宽度  
        paint.setAntiAlias(true);//消除锯齿   
        canvas.drawCircle(centre_x, centre_y, outradius, paint); //画圆
        
        /**
* 画中间圆环
* */
        int midradius = (int) (centre_x - (outRoundWidth + midRoundWidth/2));//设置圆的半径
        paint.setColor(midRoundColor); //设置画笔的颜色 
        paint.setStyle(Paint.Style.STROKE);//设置画笔为描边----有三个值：描边、填充、填充描边
        paint.setStrokeWidth(midRoundWidth);//设置画笔宽度  
        paint.setAntiAlias(true);//消除锯齿   
        canvas.drawCircle(centre_x, centre_y, midradius, paint); //画圆
         
        /**
* 画最里面的圆
* */
        int innerradius = (int) (centre_x - (outRoundWidth + midRoundWidth + innerRoundWidth/2));//设置圆的半径
        paint.setColor(innerRoundColor); //设置画笔的颜色 
        paint.setStyle(Paint.Style.FILL_AND_STROKE);//设置画笔为描边----有三个值：描边、填充、填充描边
        paint.setStrokeWidth(innerRoundWidth);//设置画笔宽度  
        paint.setAntiAlias(true);//消除锯齿   
        canvas.drawCircle(centre_x, centre_y, innerradius, paint); //画圆
        
        /**
* 写文字
* */
        if(stopBtnTextDisplayable){
        paint.setStrokeWidth(0);//设置画笔宽度
            paint.setColor(stopBtnTextColor);//设置画笔颜色
            paint.setTextSize(stopBtnTextSize);//设置字体大小  
            paint.setTypeface(Typeface.DEFAULT_BOLD);//设置字体
            paint.setTextAlign(Paint.Align.CENTER);//设置字体框水平居中
        canvas.drawText(stopBtnText, centre_x, centre_y + stopBtnTextSize/3, paint);
        }    
}
}

最后MainActivity中去实现开始计时和停止计时(按钮是开始充电和停止充电，本人稍微有点懒，就不改了)

public class MainActivity extends Activity {





private RoundProgressBar rpbRoundProgressBar;
private StartStopChargeButton btStartStopCharge;
Timer timer = new Timer();
private boolean isStart ;


@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
Log.e("main2", totalTime + "");
// 获取控件，并初始化控件
rpbRoundProgressBar = (RoundProgressBar) findViewById(R.id.rpb_roundProgressBar);
rpbRoundProgressBar.setProgressMax(totalTime);
rpbRoundProgressBar.setProgress(totalTime);
rpbRoundProgressBar.setText("剩余 " + totalTime / 3600 + "小时" + totalTime
% 3600 / 60 + "分钟" + totalTime % 3600 % 60 + "秒");
btStartStopCharge = (StartStopChargeButton) findViewById(R.id.bt_start_stop);
btStartStopCharge.setOnClickListener(new OnClickListener() {


@Override
public void onClick(View v) {
if (!isStart) {
timer.schedule(task, 1000, 1000); // timeTask
isStart = true;

Toast.makeText(getApplicationContext(), "开始充电", 0).show();


setButtonStatus("停止充电", 0xffffd2c6, 0xfff7b295, 0xffed6f3d);
} else {
timer.cancel();
setButtonStatus("充电结束", 0xfff5f5f5, 0xffdddddd, 0xffbcbcbc);
rpbRoundProgressBar.setProgress(0);
isStart = false;

btStartStopCharge.setEnabled(false);
}
}
});
}


TimerTask task = new TimerTask() {
@Override
public void run() {


runOnUiThread(new Runnable() { // UI thread
@Override
public void run() {
totalTime--;
rpbRoundProgressBar.setText("剩余 " + totalTime / 3600 + "小时"
+ totalTime % 3600 / 60 + "分钟" + totalTime % 3600
% 60 + "秒");
rpbRoundProgressBar.setProgress(totalTime);
if (totalTime < 0) {
timer.cancel();
rpbRoundProgressBar.setText("剩余 " + 0 + "小时" + 0 + "分钟"
+ 0 + "秒");
rpbRoundProgressBar.setProgress(0);
}
}
});
}
};
private int totalTime=18000;
private void setButtonStatus(String text, int outcolor, int midcolor,
int incolor) {
btStartStopCharge.setStopBtnText(text);
btStartStopCharge.setOutRoundColor(outcolor);
btStartStopCharge.setMidRoundColor(midcolor);
btStartStopCharge.setInnerRoundColor(incolor);
}
}