版權聲明：本文為博主原創文章，未經博主允許不得轉載。
教程原文：Android自定義View——從零開始實現圓形進度條大家要是看到有錯誤的地方或者有啥好的建議，歡迎留言評論
源碼已上傳至github，要獲取最新源碼可點此傳送
CircleBarView.java
public class CircleBarView extends View {
private Paint bgPaint;//繪制背景圓弧的畫筆
private Paint progressPaint;//繪制圓弧的畫筆
private RectF mRectF;//繪制圓弧的矩形區域
private CircleBarAnim anim;
private float progressNum;//可以更新的進度條數值
private float maxNum;//進度條最大值
private int progressColor;//進度條圓弧顏色
private int bgColor;//背景圓弧顏色
private float startAngle;//背景圓弧的起始角度
private float sweepAngle;//背景圓弧掃過的角度
private float barWidth;//圓弧進度條寬度
private int defaultSize;//自定義View默認的寬高
private float progressSweepAngle;//進度條圓弧掃過的角度
private TextView textView;
private OnAnimationListener onAnimationListener;
public CircleBarView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}
private void init(Context context,AttributeSet attrs){
TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CircleBarView);
progressColor = typedArray.getColor(R.styleable.CircleBarView_progress_color,Color.GREEN);
bgColor = typedArray.getColor(R.styleable.CircleBarView_bg_color,Color.GRAY);
startAngle = typedArray.getFloat(R.styleable.CircleBarView_start_angle,0);
sweepAngle = typedArray.getFloat(R.styleable.CircleBarView_sweep_angle,360);
barWidth = typedArray.getDimension(R.styleable.CircleBarView_bar_width,DpOrPxUtils.dip2px(context,10));
typedArray.recycle();//typedArray用完之后需要回收，防止內存泄漏
progressNum = 0;
maxNum = 100;
defaultSize = DpOrPxUtils.dip2px(context,100);
mRectF = new RectF();
anim = new CircleBarAnim();
progressPaint = new Paint();
progressPaint.setStyle(Paint.Style.STROKE);//只描邊，不填充
progressPaint.setColor(progressColor);
progressPaint.setAntiAlias(true);//設置抗鋸齒
progressPaint.setStrokeWidth(barWidth);
progressPaint.setStrokeCap(Paint.Cap.ROUND);//設置畫筆為圓角
bgPaint = new Paint();
bgPaint.setStyle(Paint.Style.STROKE);//只描邊，不填充
bgPaint.setColor(bgColor);
bgPaint.setAntiAlias(true);//設置抗鋸齒
bgPaint.setStrokeWidth(barWidth);
bgPaint.setStrokeCap(Paint.Cap.ROUND);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = measureSize(defaultSize, heightMeasureSpec);
int width = measureSize(defaultSize, widthMeasureSpec);
int min = Math.min(width, height);// 獲取View最短邊的長度
setMeasuredDimension(min, min);// 強制改View為以最短邊為長度的正方形
if(min >= barWidth*2){
mRectF.set(barWidth/2,barWidth/2,min-barWidth/2,min-barWidth/2);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(mRectF,startAngle,sweepAngle,false,bgPaint);
canvas.drawArc(mRectF,startAngle,progressSweepAngle,false, progressPaint);
}
public class CircleBarAnim extends Animation{
public CircleBarAnim(){
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
progressSweepAngle = interpolatedTime * sweepAngle * progressNum / maxNum;
if(textView !=null){
textView.setText(onAnimationListener.howToChangeText(interpolatedTime, progressNum,maxNum));
}
onAnimationListener.howTiChangeProgressColor(progressPaint,interpolatedTime, progressNum,maxNum);
postInvalidate();
}
}
private int measureSize(int defaultSize,int measureSpec) {
int result = defaultSize;
int specMode = View.MeasureSpec.getMode(measureSpec);
int specSize = View.MeasureSpec.getSize(measureSpec);
if (specMode == View.MeasureSpec.EXACTLY) {
result = specSize;
} else if (specMode == View.MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
return result;
}
/**
* 設置進度條最大值
* @param maxNum
*/
public void setMaxNum(float maxNum) {
this.maxNum = maxNum;
}
/**
* 設置進度條數值
* @param progressNum 進度條數值
* @param time 動畫持續時間
*/
public void setProgressNum(float progressNum, int time) {
this.progressNum = progressNum;
anim.setDuration(time);
this.startAnimation(anim);
}
/**
* 設置顯示文字的TextView
* @param textView
*/
public void setTextView(TextView textView) {
this.textView = textView;
}
public interface OnAnimationListener {
/**
* 如何處理要顯示的文字內容
* @param interpolatedTime 從0漸變成1,到1時結束動畫
* @param updateNum 進度條數值
* @param maxNum 進度條最大值
* @return
*/
String howToChangeText(float interpolatedTime, float updateNum, float maxNum);
/**
* 如何處理進度條的顏色
* @param paint 進度條畫筆
* @param interpolatedTime 從0漸變成1,到1時結束動畫
* @param updateNum 進度條數值
* @param maxNum 進度條最大值
*/
void howTiChangeProgressColor(Paint paint, float interpolatedTime, float updateNum, float maxNum);
}
public void setOnAnimationListener(OnAnimationListener onAnimationListener) {
this.onAnimationListener = onAnimationListener;
}
}
DpOrPxUtils.java
public class DpOrPxUtils {
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
ShowActivity.java
public class ShowActivity extends AppCompatActivity {
private Button btnRestart;
private CircleBarView circleBarView;
private TextView textProgress;
private CircleBarView circleBarView2;
private TextView textProgress2;
private int num;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_show);
textProgress = (TextView) findViewById(R.id.text_progress);
circleBarView = (CircleBarView)findViewById(R.id.circle_view);
circleBarView.setTextView(textProgress);
circleBarView.setOnAnimationListener(new CircleBarView.OnAnimationListener() {
@Override
public String howToChangeText(float interpolatedTime, float updateNum, float maxNum) {
DecimalFormat decimalFormat=new DecimalFormat("0.00");
String s = decimalFormat.format(interpolatedTime * updateNum / maxNum * 100)+"%";
return s;
}
@Override
public void howTiChangeProgressColor(Paint paint, float interpolatedTime, float updateNum, float maxNum) {
LinearGradientUtil linearGradientUtil = new LinearGradientUtil(Color.YELLOW,Color.RED);
paint.setColor(linearGradientUtil.getColor(interpolatedTime));
}
});
circleBarView.setProgressNum(80,1000);
textProgress2 = (TextView) findViewById(R.id.text_progress2);
circleBarView2 = (CircleBarView)findViewById(R.id.circle_view2);
circleBarView2.setTextView(textProgress2);
circleBarView2.setOnAnimationListener(new CircleBarView.OnAnimationListener() {
@Override
public String howToChangeText(float interpolatedTime, float updateNum, float maxNum) {
DecimalFormat decimalFormat=new DecimalFormat("0.00");
String s = decimalFormat.format(interpolatedTime * updateNum / maxNum * 100)+"%";
return s;
}
@Override
public void howTiChangeProgressColor(Paint paint, float interpolatedTime, float updateNum, float maxNum) {
}
});
num = 0;
setProgressNumInThread();
btnRestart = (Button) findViewById(R.id.btn_restart);
btnRestart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
circleBarView.setProgressNum(80,1000);
setProgressNumInThread();
}
});
}
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case 0:
circleBarView2.setProgressNum(num,0);
break;
}
}
};
private void setProgressNumInThread(){
new Thread(new Runnable() {
@Override
public void run() {
try {
for (int i=1;i<=100;i++){
num = i;
handler.obtainMessage(0).sendToTarget();
Thread.sleep(50);
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
}
activity_show.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.anlia.bauzviews.activity.ShowActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="重置"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<RelativeLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp">
<com.anlia.progressbar.CircleBarView
android:id="@+id/circle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:start_angle="135"
app:sweep_angle="270"
app:progress_color="@color/red"
app:bg_color="@color/gray_light"
app:bar_width="8dp"/>
<TextView
android:id="@+id/text_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="單次設置進度條數值，動畫時間為1秒"
android:layout_marginTop="5dp"/>
<RelativeLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp">
<com.anlia.progressbar.CircleBarView
android:id="@+id/circle_view2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:start_angle="270"
app:sweep_angle="360"
app:progress_color="@color/green_light"
app:bg_color="@color/gray_light"
app:bar_width="8dp"/>
<TextView
android:id="@+id/text_progress2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="模擬多線程下載，進度條數值緩慢遞增，動畫時間設為0"
android:layout_marginTop="5dp"/>
</LinearLayout>
</RelativeLayout>
