Android 自定义控件（折线图绘制）

  • 通过自定义view去完成界面上复杂图形的绘制
  • view 是Android中所有控件的公共父类
  • 重写onDraw方法实现绘制中对界面的绘制

image-20211227151540795

1
2
3
4
5
6
7
8
9
10
11
12
13
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

//        canvas 画布(View中承载绘制的图形的类)
//        Android中（0,0）坐标是在最左上角——（getWidth(), getHeight()）最右下角
//        Paint  画笔
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        canvas.drawLine(0, 0, getWidth(), getHeight(), paint);


    }

image-20211227152406001

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

//        canvas 画布(View中承载绘制的图形的类)
//        Android中（0,0）坐标是在最左上角——（getWidth(), getHeight()）最右下角
//        Paint  画笔
//        paint.setStyle(Paint.Style.STROKE);//设置画笔的填充样式
//        paint.setStyle(Paint.Style.STROKE);//空心的
//        paint.setStyle(Paint.Style.FILL);  //填满

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(10, 10, getWidth()-10, getHeight()-10, paint);

    }

image-20211227152504400

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

//        canvas 画布(View中承载绘制的图形的类)
//        Android中（0,0）坐标是在最左上角——（getWidth(), getHeight()）最右下角
//        Paint  画笔
//        paint.setStyle(Paint.Style.STROKE);//设置画笔的填充样式
//        paint.setStyle(Paint.Style.STROKE);//空心的
//        paint.setStyle(Paint.Style.FILL);  //填满

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawRect(10, 10, getWidth()-10, getHeight()-10, paint);

    }

image-20211227152802140

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

//        canvas 画布(View中承载绘制的图形的类)
//        Android中（0,0）坐标是在最左上角——（getWidth(), getHeight()）最右下角
//        Paint  画笔
//        paint.setStyle(Paint.Style.STROKE);//设置画笔的填充样式
//        paint.setStyle(Paint.Style.STROKE);//空心的
//        paint.setStyle(Paint.Style.FILL);  //填满

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
//        paint.setColor(0xffff0000);//ARGB-int值
        paint.setColor(Color.RED);//ARGB-int值
        canvas.drawRect(10, 10, getWidth()-10, getHeight()-10, paint);

    }

image-20211227153914664

image-20211227160133897

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    float w = getWidth();
    float h = getHeight();
    float b = 50;
    int max = 50;

    float wm = w / 6;


    Paint paint = new Paint();
    paint.setAntiAlias(true);//抗锯齿
    paint.setStrokeWidth(3);
    paint.setStyle(Paint.Style.STROKE);

    canvas.drawLine(0, h - b, w, h - b, paint);
    canvas.drawLine(b, 0, b, h, paint);

    Path path = new Path();
    int k = 0;
    for (float data : datas) {
        float x = k * wm + b*1.5f;
        float y = (1 - data / max) * (h-b);//
        if (k == 0) {
            path.moveTo(x, y);
        } else {
            path.lineTo(x, y);
        }
        k++;
    }

    canvas.drawPath(path, paint);
}

image-20211227161213944

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public static int maxlen = 6;

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

    float w = getWidth();
    float h = getHeight();
    float b = 50;
    int max = 50;
    float wm = w / (maxlen+1);


    Paint paint = new Paint();
    paint.setAntiAlias(true);//抗锯齿
    paint.setStrokeWidth(3);
    paint.setStyle(Paint.Style.STROKE);

    canvas.drawLine(0, h - b, w, h - b, paint);
    canvas.drawLine(b, 0, b, h, paint);


    Path path = new Path();
    int k = 0;
    for (float data : datas) {
        float x = k * wm +wm*0.75f+ b ;
        float y = (1 - data / max) * (h - b);//

        canvas.drawRect(x - wm / 3, y, x + wm / 3, h - b, paint);
        k++;
    }

    canvas.drawPath(path, paint);
}