如何在Android中使用基于值的圆大小绘制带有动画的圆形

Question

我想开发一个自定义组件，根据不同的数值绘制部分圆形。例如绘制 1/4 圆、1/2 圆等。 该组件需要进行动画处理以显示绘图过程。 部分圆形是在静态 imageview 上绘制的，并且我计划使用两个视图，其中一个在静态视图上方进行动画处理。 有什么建议如何开发这个组件吗？

我放了一张截图供参考。

请参考图片，感受一下它的外观。 谢谢！

提前致谢。

- Leon Li

Answer 1

你需要绘制圆形视图，然后创建一个动画。

创建圆形视图：

public class Circle extends View {

    private static final int START_ANGLE_POINT = 90;

    private final Paint paint;
    private final RectF rect;

    private float angle;

    public Circle(Context context, AttributeSet attrs) {
        super(context, attrs);

        final int strokeWidth = 40;

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        //Circle color
        paint.setColor(Color.RED);

        //size 200x200 example
        rect = new RectF(strokeWidth, strokeWidth, 200 + strokeWidth, 200 + strokeWidth);

        //Initial Angle (optional, it can be zero)
        angle = 120;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawArc(rect, START_ANGLE_POINT, angle, false, paint);
    }

    public float getAngle() {
        return angle;
    }

    public void setAngle(float angle) {
        this.angle = angle;
    }
}

创建动画类以设置新角度：

public class CircleAngleAnimation extends Animation {

    private Circle circle;

    private float oldAngle;
    private float newAngle;

    public CircleAngleAnimation(Circle circle, int newAngle) {
        this.oldAngle = circle.getAngle();
        this.newAngle = newAngle;
        this.circle = circle;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation transformation) {
        float angle = oldAngle + ((newAngle - oldAngle) * interpolatedTime);

        circle.setAngle(angle);
        circle.requestLayout();
    }
}

将圆形放入您的布局中：

<com.package.Circle
    android:id="@+id/circle"
    android:layout_width="300dp"
    android:layout_height="300dp" />

最后开始动画：

Circle circle = (Circle) findViewById(R.id.circle);

CircleAngleAnimation animation = new CircleAngleAnimation(circle, 240);
animation.setDuration(1000);
circle.startAnimation(animation);

结果是：

- John Cordeiro

---

谢谢John，感谢Marcus。我会检查代码并提供反馈。 - Leon Li

如果代码可行，请将其设置为问题的答案。 - John Cordeiro

嗨，约翰。如何绘制随红色弧线动画的黑色箭头？提前感谢您。 - Leon Li

有没有任何想法可以在运行时更改颜色？ - AMAN SINGH

谢谢你的代码。 如何在视图周围添加它？？@JohnCordeiro要更改颜色，请在圆形类中添加以下代码 public void setCurveColor(int i, int i2) { this.paint.setShader(new LinearGradient(0.0f, 0.0f, (float) this.endangle, (float) this.endangle, i, i2, TileMode.MIRROR)); } @AMANSINGH - Afjalur Rahman Rana

Answer 2

作为@JohnCordeiro回答的补充。我已经从xml中添加了参数，以便重用圆形并在需要时填充圆形。

class RecordingCircle(context: Context, attrs: AttributeSet) : View(context, attrs) {

private val paint: Paint
private val rect: RectF

private val fillPaint: Paint
private val fillRect: RectF

var angle: Float
var startAngle: Float

init {
    val typedArray = context.obtainStyledAttributes(attrs, R.styleable.RecordingCircle)
    startAngle = typedArray.getFloat(R.styleable.RecordingCircle_startAngle, 0f)
    val offsetAngle = typedArray.getFloat(R.styleable.RecordingCircle_offsetAngle, 0f)
    val color = typedArray.getColor(R.styleable.RecordingCircle_color, ResourcesCompat.getColor(resources, R.color.recording, null))
    val strokeWidth = typedArray.getFloat(R.styleable.RecordingCircle_strokeWidth, 20f)
    val circleSize = typedArray.getDimension(R.styleable.RecordingCircle_cicleSize, 100f)
    val fillColor = typedArray.getColor(R.styleable.RecordingCircle_fillColor, 0)
    typedArray.recycle()

    paint = Paint().apply {
        setAntiAlias(true)
        setStyle(Paint.Style.STROKE)
        setStrokeWidth(strokeWidth)
        setColor(color)
    }

    rect = RectF(
        strokeWidth,
        strokeWidth,
        (circleSize - strokeWidth),
        (circleSize - strokeWidth)
    )

    fillPaint = Paint().apply {
        setAntiAlias(true)
        setStyle(Paint.Style.FILL)
        setColor(fillColor)
    }

    val offsetFill = strokeWidth
    fillRect = RectF(
        offsetFill,
        offsetFill,
        (circleSize - offsetFill),
        (circleSize - offsetFill)
    )

    //Initial Angle (optional, it can be zero)
    angle = offsetAngle
}

override protected fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    if (fillColor > 0) {
        canvas.drawArc(rect, 0f, 360f, false, fillPaint)
    }
    canvas.drawArc(rect, startAngle, angle, false, paint)
}
}

关于 XML：

        <com.myapp.RecordingCircle android:id="@+id/cameraRecordButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:offsetAngle="360"
        app:color="@color/light_grey"
        app:strokeWidth="10"
        app:cicleSize="@dimen/camera_record_button"
        app:fillColor="@color/recording_bg" />

    <com.myapp.RecordingCircle android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:startAngle="270"
        app:color="@color/recording"
        app:strokeWidth="10"
        app:cicleSize="@dimen/camera_record_button" />

这里是结果： 注意按钮的半透明填充。

- Sulfkain

Answer 3

添加了计算正确圆形测量值的代码

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.view.View
import androidx.core.content.ContextCompat

class Circle(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val paint: Paint
    private val rect: RectF

    var angle = 0f

    companion object {
        private val START_ANGLE_POINT = 270f
    }

    init {
        val strokeWidth = resources.getDimension(R.dimen.toast_circle_stroke_width)

        paint = Paint().apply {
            setAntiAlias(true)
            setStyle(Paint.Style.STROKE)
            setStrokeWidth(strokeWidth)
            setColor(Color.RED)
        }

        val circleSize = resources.getDimension(R.dimen.toast_circle_size)

        rect = RectF(
            strokeWidth,
            strokeWidth,
            circleSize + strokeWidth,
            circleSize + strokeWidth
        )
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val circleSize = resources.getDimension(R.dimen.toast_circle_size).toInt()
        val strokeWidth = resources.getDimension(R.dimen.toast_circle_stroke_width).toInt()

        super.onMeasure(
            MeasureSpec.makeMeasureSpec(circleSize + 2 * strokeWidth, MeasureSpec.EXACTLY),
            MeasureSpec.makeMeasureSpec(circleSize + 2 * strokeWidth, MeasureSpec.EXACTLY));
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawArc(rect, START_ANGLE_POINT, angle, false, paint)
    }

}

- palimad