版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載运悲。
教程原文:Android自定義View——從零開(kāi)始實(shí)現(xiàn)圓形進(jìn)度條大家要是看到有錯(cuò)誤的地方或者有啥好的建議龄减,歡迎留言評(píng)論
源碼已上傳至github,要獲取最新源碼可點(diǎn)此傳送
CircleBarView.java
public class CircleBarView extends View {
private Paint bgPaint;//繪制背景圓弧的畫(huà)筆
private Paint progressPaint;//繪制圓弧的畫(huà)筆
private RectF mRectF;//繪制圓弧的矩形區(qū)域
private CircleBarAnim anim;
private float progressNum;//可以更新的進(jìn)度條數(shù)值
private float maxNum;//進(jìn)度條最大值
private int progressColor;//進(jìn)度條圓弧顏色
private int bgColor;//背景圓弧顏色
private float startAngle;//背景圓弧的起始角度
private float sweepAngle;//背景圓弧掃過(guò)的角度
private float barWidth;//圓弧進(jìn)度條寬度
private int defaultSize;//自定義View默認(rèn)的寬高
private float progressSweepAngle;//進(jìn)度條圓弧掃過(guò)的角度
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用完之后需要回收班眯,防止內(nèi)存泄漏
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);//設(shè)置抗鋸齒
progressPaint.setStrokeWidth(barWidth);
progressPaint.setStrokeCap(Paint.Cap.ROUND);//設(shè)置畫(huà)筆為圓角
bgPaint = new Paint();
bgPaint.setStyle(Paint.Style.STROKE);//只描邊,不填充
bgPaint.setColor(bgColor);
bgPaint.setAntiAlias(true);//設(shè)置抗鋸齒
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最短邊的長(zhǎng)度
setMeasuredDimension(min, min);// 強(qiáng)制改View為以最短邊為長(zhǎng)度的正方形
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;
}
/**
* 設(shè)置進(jìn)度條最大值
* @param maxNum
*/
public void setMaxNum(float maxNum) {
this.maxNum = maxNum;
}
/**
* 設(shè)置進(jìn)度條數(shù)值
* @param progressNum 進(jìn)度條數(shù)值
* @param time 動(dòng)畫(huà)持續(xù)時(shí)間
*/
public void setProgressNum(float progressNum, int time) {
this.progressNum = progressNum;
anim.setDuration(time);
this.startAnimation(anim);
}
/**
* 設(shè)置顯示文字的TextView
* @param textView
*/
public void setTextView(TextView textView) {
this.textView = textView;
}
public interface OnAnimationListener {
/**
* 如何處理要顯示的文字內(nèi)容
* @param interpolatedTime 從0漸變成1,到1時(shí)結(jié)束動(dòng)畫(huà)
* @param updateNum 進(jìn)度條數(shù)值
* @param maxNum 進(jìn)度條最大值
* @return
*/
String howToChangeText(float interpolatedTime, float updateNum, float maxNum);
/**
* 如何處理進(jìn)度條的顏色
* @param paint 進(jìn)度條畫(huà)筆
* @param interpolatedTime 從0漸變成1,到1時(shí)結(jié)束動(dòng)畫(huà)
* @param updateNum 進(jìn)度條數(shù)值
* @param maxNum 進(jìn)度條最大值
*/
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="單次設(shè)置進(jìn)度條數(shù)值鳖敷,動(dòng)畫(huà)時(shí)間為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="模擬多線(xiàn)程下載脖苏,進(jìn)度條數(shù)值緩慢遞增,動(dòng)畫(huà)時(shí)間設(shè)為0"
android:layout_marginTop="5dp"/>
</LinearLayout>
</RelativeLayout>