1、仿运动的步数条，效果图如下
步数图.gif
一、自定义属性：
1.1、内圆弧、外圆弧的颜色
1.2、字体、圆弧的大小
二、继承View
2.1、onMeasure（）方法测量设置view的大小
2.2、onDraw() 绘制内外圆弧、文字
三、使用
3.1、布局中使用自定义的view，同时加上自定义的属性
3.2、调用 View设置步数的方法,同时加上属性动画
2、实现
2.1、自定义属性：
没有attrs.xml 文件就新建一个
image.png
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--步数圆环-->
<declare-styleable name="stepView">
<!--1、外圆弧颜色-->
<attr name="outer" format="color" />
<!--2、内圆弧颜色-->
<attr name="inside" format="color" />
<!--3、字体大小-->
<attr name="textSize" format="dimension" />
<!--4、圆弧大小-->
<attr name="radian" format="dimension" />
</declare-styleable>
</resources>
2.2、新建类StepView_01，继承View
public class StepView_01 extends View {
private Paint mPaint = new Paint();
private int outerColor = Color.WHITE;
private int insideColor = Color.RED;
private int textSize = 15;
private int radianSize = 30;
private int mCurrentStep = 0;//当前步数
private int mMaxSteps = 5000; //总步数
public StepView_01(Context context) {
super(context);
}
public StepView_01(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public StepView_01(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.stepView);
outerColor = array.getColor(R.styleable.stepView_outer, outerColor);
insideColor = array.getColor(R.styleable.stepView_inside, insideColor);
textSize = array.getInteger(R.styleable.stepView_textSize, textSize);
radianSize = array.getInteger(R.styleable.stepView_radian, radianSize);
array.recycle();
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int startAngle = 135; //起始弧度
int angle = 270; //划过的弧度
// 设置圆弧画笔的宽度
mPaint.setStrokeWidth(30);
// 设置为 线头为 圆角
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeJoin(Paint.Join.ROUND);
// 设置画笔颜色
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
int centerX = getWidth() / 2;//中心点
int centerY = getHeight() / 2;//中心点
int radius = centerX / 2; // 半径
// 1.画背景大圆弧
RectF outer = new RectF(radius, centerY - radius, centerX + radius, centerY + radius);
canvas.drawArc(outer, startAngle, angle, false, mPaint);
// 2.画内圆弧
mPaint.setColor(Color.BLUE);
RectF inside = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
if (mMaxSteps == 0) return;
float sweepAngle = (float) mCurrentStep / mMaxSteps;
canvas.drawArc(inside, startAngle, sweepAngle * 270, false, mPaint);
// 3.中心文字
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setTextSize(50);
String stepText = mCurrentStep + "";
Rect textBounds = new Rect();
mPaint.getTextBounds(stepText, 0, stepText.length(), textBounds);
int dx = getWidth() / 2 - textBounds.width() / 2 - radianSize/2;
canvas.drawText(stepText, dx, centerY + 30, mPaint);
}
/**
*测量View
**/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(width, height);
}
//设置最大步数值
public void setStepMax(int stepMax){
this.mMaxSteps=stepMax;
};
//设置当前步数值
public void setCurrentStep(int step){
this.mCurrentStep=step;
//不断绘制
invalidate();
};
}
2.3、使用
view_setp_01.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#CCCACA"
android:layout_height="match_parent">
<com.example.view_day01.View.StepView_01
android:id="@+id/stepView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<EditText
android:id="@+id/stepView_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="55dp"
android:layout_marginBottom="31dp"
android:hint="当前步数"
app:layout_constraintBottom_toTopOf="@+id/stepView_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/stepView"
app:layout_constraintVertical_bias="0.978" />
<Button
android:id="@+id/stepView_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="72dp"
android:text="启动"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment :
public class StepFragment_01 extends Fragment {
private EditText editText;
private StepView_01 stepView;
private static final String TAG = "StepFragment_01";
private Button button;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.view_step_01, container, false);
stepView = view.findViewById(R.id.stepView);
editText = view.findViewById(R.id.stepView_edit);
button = view.findViewById(R.id.stepView_btn);
stepView.setStepMax(5000);//设置最大步数
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
setAnimator();
}
});
return view;
}
//通过属性动画调用自定义view的方法，1.5秒内绘制出进度条
private void setAnimator() {
Log.d(TAG, "setAnimator: " + Integer.parseInt(editText.getText().toString()));
ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, Integer.parseInt(editText.getText().toString())); //0-**
valueAnimator.setDuration(1500);//需要多少秒
valueAnimator.setInterpolator(new DecelerateInterpolator());//插值器
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float step = (float) animation.getAnimatedValue();
Log.d(TAG, "onAnimationUpdate: " + (int) step);
stepView.setCurrentStep((int) step);
}
});
valueAnimator.start();
}
