一、寫在前面
在參考了紅橙Darren的文章之后，將自己實(shí)現(xiàn)的做個(gè)筆記，并提供給大家參考，紅橙Darren 的 自定義View - 仿QQ運(yùn)動(dòng)步數(shù)進(jìn)度效果,同時(shí)還參考了 和小胖 的 Android自定義view之基礎(chǔ)canvas.drawXXX方法,并在此基礎(chǔ)上衍生了幾種效果胶征。
沒(méi)有自定義View基礎(chǔ)的請(qǐng)看這自定義View簡(jiǎn)介 - onMeasure,onDraw,自定義屬性
（1） 圖一，仿QQ步數(shù)運(yùn)行效果
仿QQ運(yùn)動(dòng)步數(shù)進(jìn)度效果
（2）圖二桨仿，完整的圓效果
在這里插入圖片描述
還可以衍生為睛低，倒計(jì)時(shí)效果，百分比效果服傍，有興趣的可自行實(shí)現(xiàn)
完整代碼請(qǐng)看這
自定義View-仿QQ運(yùn)動(dòng)步數(shù)進(jìn)度效果(完整代碼)
二钱雷、正文開始
首先思考，實(shí)現(xiàn)的思路吹零，仿QQ步數(shù)運(yùn)行效果罩抗，主要有三個(gè)部分：
一、中間文字
二灿椅、外弧套蒂，內(nèi)弧
三、動(dòng)態(tài)效果
四茫蛹、控件大小操刀，從效果圖上面可以看出我們的控件是正方形，所以我們要保證婴洼，用戶不管設(shè)置大小如何都能是正方形骨坑，或者提示用戶要保證寬高一致
有了思路之后就開始擼代碼了
（1）首先來(lái)個(gè)三部曲，自定義屬性柬采，布局設(shè)置欢唾，屬性獲取
1）自定義屬性，新建attrs.xml
```java
<?xml version="1.0" encoding="utf-8"?>
<resources>
</declare-styleable>
<declare-styleable name="ProgressRunView">
<!-- 步數(shù)文字大小-->
<attr name="centerTextSize" format="dimension"/>
<!-- 外圍圓弧大小-->
<attr name="cirleSize" format="dimension"/>
<!-- 步婁文字顏色大小-->
<attr name="centerTextColor" format="color"/>
<!-- 外圍圓弧顏色-->
<attr name="cirleForeginColor" format="color"/>
<!-- 內(nèi)圍圓弧顏色-->
<attr name="centerInnerColor" format="color"/>
</declare-styleable>
</resources>
2）布局設(shè)置
<com.example.myapplication.Widget.ProgressRunView
android:id="@+id/progressRunView"
android:layout_width="300dp"
android:layout_height="400dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/colorAccent"
app:centerInnerColor="#FF0000"
app:centerTextColor="#FF0000"
app:centerTextSize="50sp"
app:cirleForeginColor="#2196F3"
app:cirleSize="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
3）屬性獲取
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressRunView);
centerTextSize = typedArray.getDimensionPixelSize(R.styleable.ProgressRunView_centerTextSize,Px2Sp(context,centerTextSize));
cirleSize = typedArray.getDimension(R.styleable.ProgressRunView_cirleSize,cirleSize);
centerTextColor = typedArray.getColor(R.styleable.ProgressRunView_centerTextColor,centerTextColor);
cirleForeginColor = typedArray.getColor(R.styleable.ProgressRunView_cirleForeginColor,cirleForeginColor);
centerInnerColor = typedArray.getColor(R.styleable.ProgressRunView_centerInnerColor,centerInnerColor);
typedArray.recycle();
（2） 我們先來(lái)解決警没，寬高的問(wèn)題匈辱，重寫onMeasure方法
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//獲取寬高的模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//指定寬高的大小
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//如果寬高設(shè)置為wrap_content時(shí)振湾，剛默認(rèn)為500
if(widthMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.AT_MOST){
width = 500;
height = width;
}
//如果寬高不一致時(shí)杀迹，則以寬為標(biāo)準(zhǔn)
if(width != height){
height = width;
}
setMeasuredDimension(width,height);
}
(3) 現(xiàn)在就是各種繪制
1）繪制文本
private void drawText(Canvas canvas) {
Rect rect = new Rect();
paintText.getTextBounds(runText,0,runText.length(),rect);
Paint.FontMetrics fontMetrics =paintText.getFontMetrics();
int dx = getWidth()/2 - rect.width()/2;
//基線
float baseline = getHeight()/2 + (fontMetrics.top-fontMetrics.bottom)/2-fontMetrics.top;
canvas.drawText(runText,dx,baseline,paintText);
}
2）繪制外弧
private void drawCirle(Canvas canvas) {
int radius = 200;
RectF rectF = new RectF(x-radius,y-radius,x + radius,y+ radius);
canvas.drawArc(rectF, 135, 270, false, paintCirle);
}
3）繪制內(nèi)弧
private void drawCirleInner(Canvas canvas) {
int radius = 200;
RectF rectF = new RectF(x-radius,y-radius,x + radius,y+ radius);
float sweepAngle = (float) Integer.valueOf(runText)/maxStep;
//動(dòng)態(tài)設(shè)置掃過(guò)的面積（弧的動(dòng)態(tài)效果）
canvas.drawArc(rectF, 135, sweepAngle*270, false, paintCirleInner);
}
4）文本的動(dòng)態(tài)效果
public void start(int start,int end){
ValueAnimator valueAnimator = ValueAnimator.ofInt(start,end);
//開始到結(jié)束的時(shí)間
valueAnimator.setDuration(3000);
valueAnimator.start();
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int currentStep = (int) valueAnimator.getAnimatedValue();
//設(shè)置當(dāng)前的步數(shù)并重新繪制
setProgress(currentStep);
Log.e("onAnimationUpdate: ", String.valueOf(currentStep));
}
});
}
（4）最后在Activity中應(yīng)用
progressRunView.setMaxStep(5000);
progressRunView.start(0,3650);
