首先是自定义画圆
public class CircleBarView extends View {
private Paint bgPaint;//绘制背景圆弧的画笔
private Paint progressPaint;//绘制圆弧的画笔
private RectF mRectF;//绘制圆弧的矩形区域
private CircleAnim 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,100));
typedArray.recycle();
progressNum = 0;
maxNum = 100;
defaultSize = DpOrPxUtils.dip2px(context,100);
mRectF = new RectF();
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);
anim = new CircleAnim();
}
@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,0,360,false,bgPaint);
canvas.drawArc(mRectF,startAngle,progressSweepAngle,false, progressPaint);
}
public class CircleAnim extends Animation {
public CircleAnim() {
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
progressSweepAngle = interpolatedTime * sweepAngle * progressNum / maxNum;
if(onAnimationListener!=null){
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 = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
return result;
}
/**
* 设置进度条最大值
* @param maxNum
*/
public void setMaxNum(float maxNum) {
this.maxNum = maxNum;
}
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 static 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);
}
}
public void setOnAnimationListener(OnAnimationListener onAnimationListener) {
this.onAnimationListener = onAnimationListener;
}
}
画完圆同时 我们要创建动画开始结束的颜色
public class LinearGradientUtil {
private int mStartColor;
private int mEndColor;
public LinearGradientUtil(int startColor, int endColor) {
this.mStartColor = startColor;
this.mEndColor = endColor;
}
public void setStartColor(int startColor) {
this.mStartColor = startColor;
}
public void setEndColor(int endColor) {
this.mEndColor = endColor;
}
//获取某一个百分比间的颜色,radio取值[0,1]
public int getColor(float radio) {
int redStart = Color.red(mStartColor);
int blueStart = Color.blue(mStartColor);
int greenStart = Color.green(mStartColor);
int redEnd = Color.red(mEndColor);
int blueEnd = Color.blue(mEndColor);
int greenEnd = Color.green(mEndColor);
int red = (int) (redStart + ((redEnd - redStart) * radio + 0.5));
int greed = (int) (greenStart + ((greenEnd - greenStart) * radio + 0.5));
int blue = (int) (blueStart + ((blueEnd - blueStart) * radio + 0.5));
return Color.argb(255,red, greed, blue);
}
}
<resources>
<declare-styleable name="CircleBarView">
<attr name="progress_color" format="color"></attr>
<attr name="bg_color" format="color"></attr>
<attr name="bar_width" format="dimension"></attr>
<attr name="start_angle" format="float"></attr>
<attr name="sweep_angle" format="float"></attr>
</declare-styleable>
</resources>
<color name="colorPrimary">#02A8F3</color>
<color name="colorPrimaryDark">#2095F2</color>
<color name="colorPrimaryTranslucent">#2002A8F3</color>
<color name="colorAccent">#02A8F3</color>
<color name="colorAccentTranslucent">#2002A8F3</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="red">#F34235</color>
<color name="red_light">#FF80AB</color>
<color name="green">#4BAE4F</color>
<color name="green_light">#689F38</color>
<color name="blue">#2095F2</color>
<color name="blue_light">#02A8F3</color>
<color name="blue_translucent_dark">#8002A8F3</color>
<color name="blue_translucent_light">#882095F2</color>
<color name="yellow">#FEC006</color>
<color name="yellow_light">#FEEA3A</color>
<color name="yellow_dark">#ff6200</color>
<color name="gray">#D0D0D0</color>
<color name="gray_dark">#303030</color>
<color name="gray_light">#909090</color>
<color name="gray_bg">#E7E7E7</color>
<color name="gray_line">#EFEFF4</color>
<color name="gray_content">#606060</color>
<!--覆层-->
<color name="light_translucent">#20000000</color>
<color name="dark_translucent">#88000000</color>
<color name="white_translucent">#99FFFFFF</color>
这里是视图
<TextView
android:id="@+id/text_wz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="八维星空"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:id="@+id/r"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<com.lx.lenovo.day019.view.CircleBarView
android:id="@+id/circle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:start_angle="90"
app:sweep_angle="450"
android:layout_gravity="center_horizontal"
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:textColor="@color/red"
android:textSize="30dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
接下来视图的使用
public class MainActivity extends AppCompatActivity {
private TextView text_wz;
private CircleBarView circleBarView;
int time = 0;
private TextView text_progress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
text_wz = findViewById(R.id.text_wz);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(text_wz, "rotation", 0f, 360f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(text_wz, "scaleX", 0.5f, 3f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(text_wz, "scaleY", 0.5F, 3f);
ObjectAnimator anim = ObjectAnimator.ofFloat(text_wz, "alpha", 1f, 0.3f, 1f, 0.3f, 1f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(objectAnimator, scaleX, scaleY);
animatorSet.setDuration(3000);
animatorSet.start();
circleBarView = findViewById(R.id.circle_view);
text_progress = findViewById(R.id.text_progress);
circleBarView.setTextView(text_progress);
circleBarView.setOnAnimationListener(new CircleBarView.OnAnimationListener() {
@Override
public String howToChangeText(float interpolatedTime, float progressNum, float maxNum) {
DecimalFormat decimalFormat = new DecimalFormat("0.00");
String s = decimalFormat.format(interpolatedTime * 100 / 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, 3000);
}
}