自定义一个可滑动时间刻度尺

2023-09-23 20:54:37

自定义时间刻度尺

首先，我们来看一下时间刻度尺的截图：

[图片]

控件的外观可能不是很美观，不过功能基本都有了，可以自己设置选中的时间片段，暂时没有支持自定义样式。。。

接下来介绍如何实现这个控件。首先要先知道android' view的绘制过程，这里简单说一下，当我们调用view.invalidate()方法后，系统会调用view.onDraw()方法，在这个方法中我们可以通过canvas对象来绘制各种图形。

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

    // 绘制刻度尺背景
    canvas.drawRect(0, 0, getWidth(), getHeight(), mBackgroundPaint);

    // 绘制刻度线
    for (int i = 0; i < mScaleCount; i++) {
        float x = i * mScaleWidth;
        canvas.drawLine(x, 0, x, getHeight(), mScaleLinePaint);
    }

    // 绘制时间标签
    for (int i = 0; i < mScaleCount; i++) {
        float x = i * mScaleWidth;
        String text = mScaleLabels[i];
        canvas.drawText(text, x, getHeight() - mScaleLabelHeight, mScaleLabelPaint);
    }

    // 绘制选中的时间片段
    if (mIsSelecting) {
        float left = Math.min(mStartX, mEndX);
        float right = Math.max(mStartX, mEndX);
        canvas.drawRect(left, 0, right, getHeight(), mSelectedAreaPaint);
    }
}

在onDraw()方法中，我们首先绘制刻度尺背景，然后绘制刻度线和时间标签。最后，如果正在选中时间片段，则绘制选中的时间片段。

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mStartX = event.getX();
            mEndX = mStartX;
            mIsSelecting = true;
            invalidate();
            return true;
        case MotionEvent.ACTION_MOVE:
            mEndX = event.getX();
            invalidate();
            return true;
        case MotionEvent.ACTION_UP:
            mIsSelecting = false;
            invalidate();
            return true;
    }

    return super.onTouchEvent(event);
}