效果:
实现这个效果需要掌握的小东西还是有蛮多的:
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();
}
}