自定义模拟时间选择器

Question

我正在开发一个教育应用程序。与其他课程一起，这个应用程序将教孩子们阅读模拟时钟。课程结束后，应用程序将进行测验，通过在模拟时钟中移动小时，分针和秒针，它将要求孩子们设置时间说1超过37。

我怎样才能制作这个模拟时钟？

一种方法是使用Android Timer Picker，但我不确定它可以自定义的程度。

Answer 1

一个想法：你可以用TextView方法放置一些android:onClick组件，所以当用户点击一些像5这样的数字时，它会选择25分钟。

<TextView
        android:id="@+id/tvNumber5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="number5"
        android:text="@string/number5"
        android:textColor="@color/white" />

在您的活动中，您将拥有以下内容：

public void number5(View view) {
        minutes = 25;
}

但是，如果有人有另一个想法从Android的选择真正的自定义TimePicker，请不要使用此方法^^

Answer 2

我建议你为每个时钟指针创建独立的图像。

因此，您可以从ACTION_MOVE事件（e.getRawX和e.getRawY）的位置计算角度。在那里使用atan配方。

这是执行旋转跟踪的示例活动。

@EActivity(R.layout.activity_main)
public class MainActivity extends AppCompatActivity {

@ViewById(R.id.linear_hand)
protected LinearLayout linearHand;

@ViewById(R.id.root_layout)
protected RelativeLayout rootLayout;

private int generalMargin;
private int rayon;
private SimplePoint centerPoint;

boolean isMoving = false;


@AfterViews
protected void initAfterViews() {

    initCenterPoint();

    linearHand.setOnTouchListener((v, event) -> {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                int[] location = new int[2];
                rootLayout.getLocationOnScreen(location);
                int rootLayoutLocationY = location[1];

                //since getRawY return y position including phone header need to make it from rootLayout
                float rotationAngle = getRotationAngle(new 
SimplePoint(event.getRawX(), event.getRawY()-rootLayoutLocationY), 
centerPoint);
                rotate(linearHand, rotationAngle);
                break;
        }
        return true;
    });

}


private void initCenterPoint() {
    generalMargin = getResources().getDimensionPixelSize(R.dimen.general_margin);
    rayon = getResources().getDimensionPixelSize(R.dimen.hand_length);
    centerPoint = new SimplePoint(generalMargin + rayon, generalMargin + rayon);
    Log.d("log", "the program works perfectly " + adjustToCenter(new SimplePoint(), centerPoint));

}


/***
 * transform point into mathematical point
 * @param point the point to be translated
 * @param center the center of the circle
 * @return
 */
public static SimplePoint adjustToCenter(SimplePoint point, SimplePoint center) {
    SimplePoint ans = new SimplePoint();
    ans.setX(point.getX() - center.getX());
    ans.setY((point.getY() - center.getY()) * -1);
    return ans;
}

/***
 *
 * @param point the point
 * @param centerPoint the center
 * @return angle of rotation
 */
public static float getRotationAngle(SimplePoint point, SimplePoint centerPoint) {
    SimplePoint realPoint = adjustToCenter(point, centerPoint);
    return (float) Math.toDegrees(Math.atan2(realPoint.getY(), realPoint.getX()));
}

public static void rotate(View v, float angle) {
    // make some adjustments for anti clockwise rotation
    v.setRotation((angle-90f) * -1);
}
}

对不起，我已经使用Java8和Android Annotation作为示例代码，但它很容易理解。

如果你想查看应用程序，我已经上传了here。