手把手教你用自定义 View 实现一个实用直尺

2023-10-01 23:04:26

创建自定义 View

首先，我们需要创建一个自定义 View。在 Android Studio 中，我们可以通过新建一个类并继承自 View 类来创建自定义 View。

public class RulerView extends View {

    public RulerView(Context context) {
        super(context);
    }

    public RulerView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RulerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // 在这里绘制直尺
    }
}

2. 绘制刻度

接下来，我们需要在自定义 View 中绘制刻度。我们可以使用 Canvas 类来绘制各种图形，包括线条、矩形、圆形等。

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

    // 计算刻度线的长度
    float lineLength = TypeValue.applyDimension(TypedValue.COMPLEX_UNIT_MM, 1, getResources().getDisplayMetrics());

    // 循环绘制刻度线
    for (int i = 0; i < 10; i++) {
        // 绘制刻度线
        canvas.drawLine(i * lineLength, 0, i * lineLength, 10, paint);

        // 绘制刻度值
        canvas.drawText(String.valueOf(i), i * lineLength, 20, paint);
    }
}

3. 显示刻度值

我们还可以使用 Canvas 类来绘制文本。我们可以使用 drawText() 方法来绘制文本。

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

    // 计算刻度线的长度
    float lineLength = TypeValue.applyDimension(TypedValue.COMPLEX_UNIT_MM, 1, getResources().getDisplayMetrics());

    // 循环绘制刻度线
    for (int i = 0; i < 10; i++) {
        // 绘制刻度线
        canvas.drawLine(i * lineLength, 0, i * lineLength, 10, paint);

        // 绘制刻度值
        canvas.drawText(String.valueOf(i), i * lineLength, 20, paint);
    }
}

4. 支持滚动

为了支持滚动，我们需要在自定义 View 中重写 onTouchEvent() 方法。

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 记录按下的位置
            startX = event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            // 计算移动的距离
            float deltaX = event.getX() - startX;

            // 平移画布
            canvas.translate(deltaX, 0);

            // 刷新画布
            invalidate();

            // 更新按下的位置
            startX = event.getX();
            break;
        case MotionEvent.ACTION_UP:
            // 手指抬起后，停止移动画布
            break;
    }

    return true;
}