Android 水平刻度

原创

mob64ca12dbdb81 2024-06-04 03:15:18 ©著作权

文章标签 Android 代码示例 java 文章分类 Android 移动开发

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

Android 水平刻度

在Android开发中，我们经常会遇到需要展示水平刻度的情况，比如音量调节器、进度条等等。本文将介绍如何在Android中实现水平刻度的效果，并提供代码示例供大家参考。

实现思路

实现水平刻度的效果主要涉及到以下几个步骤：

绘制刻度线
根据当前数值绘制指示器
响应用户的操作，实现拖动指示器改变数值的功能

代码示例

下面我们将通过一个简单的示例来演示如何实现水平刻度的效果。首先，我们需要在XML布局文件中定义一个自定义View：

<com.example.horizontalruler.HorizontalRuler
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:maxValue="100"
    app:minValue="0"
    app:defaultValue="50"/>

然后，我们来实现HorizontalRuler类：

public class HorizontalRuler extends View {

    private Paint mLinePaint;
    private Paint mIndicatorPaint;
    
    private int mMaxValue;
    private int mMinValue;
    private int mDefaultValue;
    
    private int mIndicatorPosition;

    public HorizontalRuler(Context context, AttributeSet attrs) {
        super(context, attrs);
        
        mLinePaint = new Paint();
        mLinePaint.setColor(Color.BLACK);
        
        mIndicatorPaint = new Paint();
        mIndicatorPaint.setColor(Color.RED);
        
        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.HorizontalRuler,
                0, 0);

        try {
            mMaxValue = a.getInteger(R.styleable.HorizontalRuler_maxValue, 100);
            mMinValue = a.getInteger(R.styleable.HorizontalRuler_minValue, 0);
            mDefaultValue = a.getInteger(R.styleable.HorizontalRuler_defaultValue, 50);
            mIndicatorPosition = mDefaultValue;
        } finally {
            a.recycle();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        // 绘制刻度线
        for (int i = 0; i <= mMaxValue - mMinValue; i++) {
            int x = i * getWidth() / (mMaxValue - mMinValue);
            canvas.drawLine(x, 0, x, getHeight(), mLinePaint);
        }
        
        // 绘制指示器
        int indicatorX = mIndicatorPosition * getWidth() / (mMaxValue - mMinValue);
        canvas.drawLine(indicatorX, 0, indicatorX, getHeight(), mIndicatorPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                float x = event.getX();
                mIndicatorPosition = (int) ((x / getWidth()) * (mMaxValue - mMinValue));
                invalidate();
                break;
        }
        return true;
    }
}

在代码中，我们首先定义了刻度线和指示器的画笔，然后在onDraw方法中绘制刻度线和指示器，最后在onTouchEvent方法中响应用户的操作，实现拖动指示器改变数值的功能。

序列图

下面是一个简单的序列图，展示了用户拖动指示器改变数值的过程：

sequenceDiagram
    participant User
    participant View
    User->>View: Touch event
    View->>View: Calculate new position
    View->>View: Redraw indicator