Android 自订视图第二弹：旋转的体重

2023-09-03 18:49:18

探索交互式旋转体重秤自订视图的奥秘：打造您的 Android 交互式体验

在 Android 开发领域，自订视图充当了独一无二且引人入胜的用户界面的基石。踏上创建旋转体重秤自订视图的非凡旅程，解锁您的创造力，踏入高度交互式体验的殿堂。

绘制您的自订画布：体重秤的骨架

自订视图之旅的第一步始于绘制自订画布，它将成为体重秤视图的根基。在 Android 世界中，您可以在 onDraw() 方法中挥洒自如，尽情绘制。

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 绘制体重秤刻度
    drawScale(canvas);

    // 绘制体重指针
    drawPointer(canvas);
}

在 drawScale() 方法中，让我们构建体重秤刻度，包括刻度标记和数字。

private void drawScale(Canvas canvas) {
    // 计算刻度标记之间的角度
    float anglePerMark = 360f / NUM_MARKS;

    // 循环绘制刻度标记和数字
    for (int i = 0; i < NUM_MARKS; i++) {
        // 计算刻度标记的角度
        float angle = i * anglePerMark;

        // 绘制刻度标记
        canvas.drawLine(
            centerX, centerY,
            centerX + SCALE_RADIUS * Math.cos(Math.toRadians(angle)),
            centerY + SCALE_RADIUS * Math.sin(Math.toRadians(angle)),
            scalePaint
        );

        // 绘制刻度数字
        String text = (i * WEIGHT_INCREMENT).toString();
        Rect textBounds = new Rect();
        scalePaint.getTextBounds(text, 0, text.length(), textBounds);
        canvas.drawText(
            text,
            centerX + (SCALE_RADIUS + TEXT_OFFSET) * Math.cos(Math.toRadians(angle)) - textBounds.width() / 2,
            centerY + (SCALE_RADIUS + TEXT_OFFSET) * Math.sin(Math.toRadians(angle)) + textBounds.height() / 2,
            scalePaint
        );
    }
}

接下来，在 drawPointer() 方法中，绘制体重指针，它将动态显示您的体重读数。

private void drawPointer(Canvas canvas) {
    // 计算指针角度
    float angle = (weight / MAX_WEIGHT) * 360f;

    // 绘制指针
    canvas.drawLine(
        centerX, centerY,
        centerX + POINTER_RADIUS * Math.cos(Math.toRadians(angle)),
        centerY + POINTER_RADIUS * Math.sin(Math.toRadians(angle)),
        pointerPaint
    );
}

驾驭用户交互：将您的体重秤变为触控响应

为了让体重秤视图真正灵动起来，我们需要处理用户的轻触。当用户与视图互动时，我们将实时更新体重读数并移动指针。

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            // 获取触摸点距离中心的距离
            float distance = getDistanceFromCenter(event.getX(), event.getY());

            // 检查触摸点是否在可触摸区域内
            if (distance < TOUCHABLE_RADIUS) {
                // 开始触摸
                isTouching = true;
                startTouchAngle = getAngleFromCenter(event.getX(), event.getY());
            }
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            if (isTouching) {
                // 更新体重读数
                updateWeight(event.getX(), event.getY());
            }
            break;
        }
        case MotionEvent.ACTION_UP: {
            // 停止触摸
            isTouching = false;
            break;
        }
    }

    return true;
}