android 刻度盘指针不动刻度可滑动上半圆刻度

原创

mob64ca12ea10ec 2025-01-06 05:03:51 ©著作权

文章标签 Android xml 自定义视图 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ea10ec的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android 刻度盘与滑动圆刻度的实现

在Android开发中，刻度盘常常用于显示数值，例如温度、速度等。本文将探讨如何创建一个刻度盘，指针保持不动，而刻度可滑动，特别是上半圆的刻度。这种设计在很多应用中都非常实用，比如用于展示实时数据或进行设置。

1. 项目准备

在开始之前，你需要一个Android项目。确保你的Android SDK已经设置好并可以正常运行。可以使用Android Studio创建新的项目。

2. 界面布局

首先，创建一个“activity_main.xml”布局文件，添加一个用于显示刻度盘的自定义视图。这是我们自定义的刻度盘类。

<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.yourapp.GaugeView
        android:id="@+id/gauge_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

3. 自定义刻度盘类

接下来，创建一个自定义的View类：GaugeView.java，在其中绘制刻度盘，并实现滑动功能。

package com.example.yourapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class GaugeView extends View {
    private Paint paint;
    private float currentAngle = 0;
    private float sweepAngle = 180; // 上半圆

    public GaugeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setColor(0xFF000000); // 黑色
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawGauge(canvas);
        drawScale(canvas);
    }

    private void drawGauge(Canvas canvas) {
        float centerX = getWidth() / 2;
        float centerY = getHeight();
        float radius = getWidth() / 2 - 50;

        canvas.drawArc(centerX - radius, centerY - radius, centerX + radius, centerY + radius,
                        180, sweepAngle, false, paint);
        
        // 这里你可以添加一个指针
        float pointerX = (float) (centerX + radius * Math.cos(Math.toRadians(currentAngle)));
        float pointerY = (float) (centerY - radius * Math.sin(Math.toRadians(currentAngle)));
        canvas.drawLine(centerX, centerY, pointerX, pointerY, paint);
    }

    private void drawScale(Canvas canvas) {
        // implement scale drawing logic here
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_MOVE) {
            float x = event.getX();
            float y = event.getY();
            currentAngle = (float) Math.toDegrees(Math.atan2(centerY - y, x - centerX));
            invalidate();
            return true;
        }
        return super.onTouchEvent(event);
    }
}

4. 添加刻度和滑动功能

在 drawScale 方法中，您可以根据需要绘制刻度和文本。对于滑动逻辑，使用 onTouchEvent 方法来捕捉用户的滑动手势。

示例代码：

下面是 drawScale 方法的简单示例，用于绘制刻度：

private void drawScale(Canvas canvas) {
    for (int i = 0; i <= 10; i++) {
        float angle = 180f / 10 * i;
        float startX = (float) (centerX + (radius - 20) * Math.cos(Math.toRadians(angle)));
        float startY = (float) (centerY - (radius - 20) * Math.sin(Math.toRadians(angle)));
        float stopX = (float) (centerX + radius * Math.cos(Math.toRadians(angle)));
        float stopY = (float) (centerY - radius * Math.sin(Math.toRadians(angle)));
        canvas.drawLine(startX, startY, stopX, stopY, paint);
    }
}

5. 添加饼状图与序列图

接下来，可以在本文中插入饼状图和序列图。以下是它们的mermaid语法示例：

pie
    title 饼状图示例
    "部分A": 30
    "部分B": 40
    "部分C": 30

sequenceDiagram
    participant User
    participant GaugeView
    User->>GaugeView: Touch and slide
    GaugeView->>User: Update gauge angle
    User->>GaugeView: Release touch