android 圆形进度条

在Android开发中，有时我们需要创建独特且具有吸引力的UI元素，圆形进度条就是其中之一。它不仅可以展示进度，还可以增加界面的美观性。本教程将深入探讨如何在Android中实现一个自定义的圆形进度条，支持多种样式。 我们需要创建一个新的`View`类，继承自`View`或`ProgressBar`，这将作为我们自定义圆形进度条的基础。我们可以将这个类命名为`CircleProgressBar`。在`CircleProgressBar`类中，我们将重写`onDraw()`方法来绘制进度条的圆环和当前进度。 ```java public class CircleProgressBar extends View { // 定义属性，如颜色、宽度等 private int progressColor; private int backgroundColor; private float progressWidth; private float progress; // 构造函数和setter/getter方法 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 计算圆环的半径和中心点 float radius = (getWidth() - progressWidth) / 2f; float centerX = getWidth() / 2f; float centerY = getHeight() / 2f; // 绘制背景圆环 Paint backgroundPaint = new Paint(); backgroundPaint.setColor(backgroundColor); backgroundPaint.setStrokeWidth(progressWidth); backgroundPaint.setStyle(Paint.Style.STROKE); canvas.drawCircle(centerX, centerY, radius, backgroundPaint); // 绘制进度圆环 Paint progressPaint = new Paint(); progressPaint.setColor(progressColor); progressPaint.setStrokeWidth(progressWidth); progressPaint.setStyle(Paint.Style.STROKE); float sweepAngle = 360 * progress / 100f; // 进度百分比转换为弧度 canvas.drawArc(new RectF(0, 0, getWidth(), getHeight()), -90, sweepAngle, false, progressPaint); } } ``` 为了支持多种样式，我们可以添加更多的属性，例如内填充颜色、进度条是否显示文字、文字颜色和字体大小等。通过使用`attrs.xml`文件定义自定义属性，并在`CircleProgressBar`类中解析它们。 ```xml <!-- attrs.xml --> <resources> <declare-styleable name="CircleProgressBar"> <attr name="progressColor" format="color"/> <attr name="backgroundColor" format="color"/> <attr name="progressWidth" format="dimension"/> <attr name="showText" format="boolean"/> <attr name="textColor" format="color"/> <attr name="textSize" format="dimension"/> </declare-styleable> </resources> ``` 然后，在`CircleProgressBar`类中解析这些属性： ```java public class CircleProgressBar extends View { // 添加更多属性，如showText, textColor, textSize等 // ... public CircleProgressBar(Context context) { this(context, null); } public CircleProgressBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } private void init(AttributeSet attrs) { if (attrs != null) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar); progressColor = a.getColor(R.styleable.CircleProgressBar_progressColor, Color.BLUE); backgroundColor = a.getColor(R.styleable.CircleProgressBar_backgroundColor, Color.GRAY); progressWidth = a.getDimension(R.styleable.CircleProgressBar_progressWidth, 10dp); showText = a.getBoolean(R.styleable.CircleProgressBar_showText, false); textColor = a.getColor(R.styleable.CircleProgressBar_textColor, Color.WHITE); textSize = a.getDimension(R.styleable.CircleProgressBar_textSize, 14sp); a.recycle(); } } // ... } ``` 现在，我们可以在布局文件中使用这个自定义的圆形进度条，并设置不同的样式： ```xml <com.example.myapp.CircleProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" app:progressColor="@color/colorPrimary" app:backgroundColor="@android:color/darker_gray" app:progressWidth="10dp" app:showText="true" app:textColor="@android:color/white" app:textSize="16sp" /> ``` 如果要显示进度的文字，还需要在`onDraw()`方法中添加代码来绘制文本： ```java // 在onDraw()方法中添加 if (showText) { String progressText = progress + "%"; Paint textPaint = new Paint(); textPaint.setColor(textColor); textPaint.setTextSize(textSize); textPaint.setTextAlign(Paint.Align.CENTER); float textWidth = textPaint.measureText(progressText); canvas.drawText(progressText, centerX - textWidth / 2, centerY + textSize / 2, textPaint); } ``` 别忘了在`CircleProgressBar`类中添加必要的getter和setter方法，以及更新进度的方法，如`setProgress(int progress)`。 这样，我们就创建了一个自定义的Android圆形进度条组件，它支持多种样式，包括改变颜色、宽度、是否显示文字等。在实际项目中，可以根据需求进一步扩展这个组件，例如添加动画效果或者自定义更复杂的样式。