我们怎样才能让孩子定时

Question

我正在尝试制作一个计时器应用程序，它可以直观地显示不同颜色剩余的时间。像这样 -

我用我自己的观点制作了模拟时钟，但不知道我们怎样才能制作这种变色的东西。如果任何机构可以提供任何建议或示例代码将是非常好的。我找到了一个代码，但它是CoreDova我在原生中做的。 https://github.com/shaungallagher/timer-for-kids

Answer 1

尝试绘制自定义视图圈 (using canvas.drawCircle(...))，然后绘制弧 (using canvas.drawArc(...))，每次时间（角度）发生变化时都会重绘，也改变了背景颜色。你需要自己弄清楚其余部分。

Answer 2

我最终提出了自己的看法。它看起来像这样 -

public class TimerView extends View {

private static final String TAG = TimerView.class.getName();

private static final int RADIUS = 600;
private static final int BACKGROUND_COLOR = 0x50ff0000;
private static final int FOREGROUND_COLOR = 0xa0ff0000;

private static final float STARTING_ANGLE = -90f;
private static final float FULL_CIRCLE = 360f;

private ShapeDrawable circle;
private ShapeDrawable arc;

private float lastFraction;

public TimerView(Context context) {
    super(context);
    this.init();
}

public TimerView(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);
    this.init();
}

private void init() {
    this.circle = new ShapeDrawable(new OvalShape());
    this.circle.getPaint().setColor(BACKGROUND_COLOR);
    this.circle.setBounds(0, 0, RADIUS, RADIUS);
    this.lastFraction = 0f;
    this.arc = new ShapeDrawable(new ArcShape(STARTING_ANGLE,
            this.lastFraction));
    this.arc.getPaint().setColor(FOREGROUND_COLOR);
    this.arc.setBounds(0, 0, RADIUS, RADIUS);
}

protected void onDraw(Canvas canvas) {
    this.circle.draw(canvas);
    this.arc.draw(canvas);
}

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.setMeasuredDimension(RADIUS, RADIUS);
}

public void setFraction(float fraction) {
    if (fraction < 0f || fraction > 1.f) {
        throw new IllegalArgumentException("Out of range: " + fraction);
    }
    if (fraction != this.lastFraction) {
        float sweepingAngle = FULL_CIRCLE * fraction;
        this.arc.setShape(new ArcShape(STARTING_ANGLE, sweepingAngle));
        this.postInvalidate();
        this.lastFraction = fraction;
    } else {
        Log.v(TAG, "Error");
    }
 }
}

并在布局中调用 -

<com.abc.xyz.TimerView
    android:id="@+id/pieChart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp" />

更改需要调用活动或片段的值 -

pieChart.setFraction((float) .99);

感谢大家的大力支持