组件--游标尺数值选择器

最新推荐文章于 2024-09-13 21:38:40 发布

原创最新推荐文章于 2024-09-13 21:38:40 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#View

android 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一种自定义的数值选择器组件实现方法，该组件采用尺子样式设计，支持用户通过滑动来调整数值。文章提供了详细的代码示例，并解释了其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近看到很多金融应用用一种数值选择器，一把尺子的设计，刻度可以左右滑动改变，如下图：
这里写图片描述

不多说，上代码

public class Ruler extends View {

    private static final int RULER_LINE_MAX = 50;
    private static final int RULER_LINE_MID = 30;
    private static final int RULER_LINE_MIN = 20;
    private static final int RULER_LINE_SLOT = 15;
    private final int slop;
    int width;
    int height;
    Paint mPaint;
    Paint mColorPaint;
    float lastX;

    float moveX;
    float bottom;

    int current;

    public Ruler(Context context) {
        this(context, null);
    }

    public Ruler(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public Ruler(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        slop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
        mPaint = new Paint();
        mColorPaint = new Paint();
        mColorPaint.setColor(Color.RED);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = event.getX();
                return true;
            case MotionEvent.ACTION_MOVE:
                float dx = lastX - event.getX();
                moveX += dx;
                Log.e("----", dx + "");
                lastX = event.getX();
                if (moveX < 0) {
                    moveX = 0;
                }
                invalidate();
                return true;
            case MotionEvent.ACTION_UP:
                if (moveX % RULER_LINE_SLOT == 0) {
                    invalidate();
                    return true;
                }
                moveX = (Math.round(moveX / RULER_LINE_SLOT)) * RULER_LINE_SLOT;
                invalidate();
                return true;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (height == 0) {
            width = getMeasuredWidth();
            height = getMeasuredHeight();
            bottom = height / 2;
        }
        int lineLen = 0;
        boolean drawText;
        for (int i = (int) (moveX / RULER_LINE_SLOT) + 1, slot = RULER_LINE_SLOT - (int) (moveX % RULER_LINE_SLOT); slot < width; i++, slot += RULER_LINE_SLOT) {
            if (i % 10 == 0) {
                lineLen = RULER_LINE_MAX;
                drawText = true;
            } else if (i % 5 == 0) {
                lineLen = RULER_LINE_MID;
                drawText = false;
            } else {
                lineLen = RULER_LINE_MIN;
                drawText = false;
            }
            canvas.drawLine(slot, bottom, slot, bottom - lineLen, mPaint);
            if (drawText) {
                canvas.drawText(String.valueOf(i), slot, bottom - lineLen, mPaint);
            }
            if (Math.abs(slot - width / 2) < RULER_LINE_SLOT / 2) {
                current = i;
            }
        }
        canvas.drawLine(0, bottom, width, bottom, mPaint);
        canvas.drawLine(width / 2, bottom, width / 2, bottom - RULER_LINE_MAX * 3 / 2, mColorPaint);
        canvas.drawText(String.valueOf(current), width / 2, bottom - RULER_LINE_MAX * 3 / 2, mColorPaint);
    }
}