效果:
實現這個效果需要掌握的小東西還是有蠻多的:
1.學會使用屬性動畫ObjectAnimator
,給我們自定義的屬性設置動畫
2.自定義view基本的畫圓、畫圓弧、畫文字,熟悉Paint等
3.學會使用SweepGradient
,android有一系列Gradient可以設置畫筆漸變
上面知識還不會的同學可以看一下這個系列的博客:HenCoder Android 開發進階: 自定義 View
能夠堅持看完後,自定義view對你來說只是小菜一碟,以後UI問你的時候你就可以大聲回答:不要問我行不行,我就問你要不要?
代碼:
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
* @Author: david.lvfujiang
* @Date: 2020/1/15
* @Describe:
*/
public class SportsView extends View {
public float progress = 0;
int[] colorArr = {Color.RED, Color.GREEN, Color.YELLOW, Color.RED};
private int mCircleCenterX;
private int mCircleCenterY;
private int mCircleRadius;
private Paint mCirclePaint, mArcPaint, mTextPaint;
{
//初始化圓畫筆
mCirclePaint = new Paint();
//筆寬
mCirclePaint.setStrokeWidth(150);
//抗鋸齒
mCirclePaint.setAntiAlias(true);
//畫筆風格:線條
mCirclePaint.setStyle(Paint.Style.STROKE);
//設置畫筆顏色
mCirclePaint.setColor(Color.parseColor("#808080"));
//初始化圓弧畫筆
mArcPaint = new Paint();
mArcPaint.setStrokeWidth(150);
mArcPaint.setAntiAlias(true);
//設置畫筆形狀:圓頭
mArcPaint.setStrokeCap(Paint.Cap.ROUND);
mArcPaint.setStyle(Paint.Style.STROKE);
//初始化文字畫筆
mTextPaint = new Paint();
mTextPaint.setTextSize(200);
mTextPaint.setAntiAlias(true);
}
public SportsView(Context context) {
super(context);
}
public SportsView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public SportsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public SportsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
// 創建 getter 方法
public float getProgress() {
return progress;
}
// 創建 setter 方法
public void setProgress(float progress) {
this.progress = progress;
invalidate();
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
//獲取圓心座標和半徑
mCircleCenterX = getWidth() / 2;
mCircleCenterY = getHeight() / 2;
mCircleRadius = 400;
//繪製背景灰色的圓
canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mCirclePaint);
//給畫筆設置漸變效果,掃描漸變
Shader shader = new SweepGradient(mCircleCenterX, mCircleCenterY, colorArr, null);
mArcPaint.setShader(shader);
//繪製圓弧
canvas.drawArc(mCircleCenterX - 400, mCircleCenterY - 400,
mCircleCenterX + 400, mCircleCenterY + 400, 180,
progress, false, mArcPaint);
//繪製文字
canvas.drawText(String.valueOf((int) progress) + "%", mCircleCenterX - 200, mCircleCenterY + 50, mTextPaint);
}
}
調用:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main5);
// 創建 ObjectAnimator 對象
SportsView sportsView = findViewById(R.id.sportsView);
ObjectAnimator animator = ObjectAnimator.ofFloat(sportsView, "progress", 0, 360);
//設置時間
animator.setDuration(5000);
// 執行動畫
animator.start();
}
}