Android 绘制简单的走势图

走势图是一种常见的数据可视化方式，可以直观地展示数据的变化趋势。在Android开发中，我们可以利用Canvas和Paint类来绘制走势图。本文将介绍如何使用Android的绘图工具来绘制简单的走势图，并提供代码示例。

准备工作

在开始之前，我们需要在Android项目中添加一个自定义的View，用于绘制走势图。创建一个名为TrendChartView的类，继承自View类，并重写onDraw方法。在onDraw方法中，我们将使用Canvas和Paint来进行绘制操作。

public class TrendChartView extends View {

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

    public TrendChartView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

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

        // 在这里绘制走势图
    }
}

绘制坐标轴

首先，我们需要绘制走势图的坐标轴。坐标轴一般由两条直线组成，一条是垂直于x轴的y轴，一条是水平于x轴的x轴。我们可以使用Paint来设置坐标轴的样式，然后使用Canvas的drawLine方法来绘制。

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

    // 绘制坐标轴
    Paint axisPaint = new Paint();
    axisPaint.setColor(Color.BLACK);
    axisPaint.setStrokeWidth(2);

    // 绘制y轴
    canvas.drawLine(100, 100, 100, 500, axisPaint);

    // 绘制x轴
    canvas.drawLine(100, 500, 700, 500, axisPaint);
}

绘制数据点

接下来，我们需要绘制走势图的数据点。数据点一般由一个个小圆点组成，每个小圆点代表一个数据。我们可以使用Paint来设置数据点的样式，然后使用Canvas的drawCircle方法来绘制。

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

    // 绘制坐标轴

    // 绘制数据点
    Paint pointPaint = new Paint();
    pointPaint.setColor(Color.RED);
    pointPaint.setStyle(Paint.Style.FILL);

    // 绘制第一个数据点
    canvas.drawCircle(200, 400, 5, pointPaint);

    // 绘制第二个数据点
    canvas.drawCircle(300, 300, 5, pointPaint);

    // 绘制第三个数据点
    canvas.drawCircle(400, 450, 5, pointPaint);

    // 绘制更多数据点...
}

绘制连接线

最后，我们需要绘制连接数据点的线条，以展示数据的变化趋势。我们可以使用Paint来设置线条的样式，然后使用Canvas的drawLine方法来绘制连接线。

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

    // 绘制坐标轴

    // 绘制数据点

    // 绘制连接线
    Paint linePaint = new Paint();
    linePaint.setColor(Color.BLUE);
    linePaint.setStrokeWidth(2);

    // 连接第一个数据点和第二个数据点
    canvas.drawLine(200, 400, 300, 300, linePaint);

    // 连接第二个数据点和第三个数据点
    canvas.drawLine(300, 300, 400, 450, linePaint);

    // 连接更多数据点...
}

完整示例

下面是一个完整的示例代码，展示了如何使用Canvas和Paint来绘制简单的走势图。

public class TrendChartView extends View {

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

    public TrendChartView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

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

        // 绘制坐标轴
        Paint axisPaint = new Paint();
        axisPaint.setColor(Color.BLACK);
        axisPaint.setStrokeWidth(2);

        canvas.drawLine(100, 100, 100, 500, axisPaint);
        canvas.drawLine(100