在View Android上动态绘制线条

Question

I want to implement something like below:

The default would be one red dot + 1 plot on the x-axis. User can then add up to 5 red dots and the view will be redrawn and show the number of dots and respective plots with it distance shown below the plot. Does any one knows how can I achieve this? How can I draw the lines (plot) on the view?

Any help is much appreciated!! Thanks...

Answer 1

you can create a subclass of View class and override its onDraw() method

Then you can draw lines, text and circles (dots) on the canvas to show such image inside the View

Activity:

package hk.patsolution.drawlineexample.app;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        addContentView(new MyView(this), new ViewGroup.LayoutParams(1000,1000));
    }
}

And the view:

package hk.patsolution.drawlineexample.app;

/**
 * Created by patrickchan on 16/12/14.
 */

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {
    private Paint paint;
    private Paint black;

    public MyView(Context c){
        this(c,null);
    }

    public MyView(Context c, AttributeSet s) {
        super(c, s);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);

        black=new Paint();
        black.setColor(Color.BLACK);
        paint.setStrokeWidth(10);
    }

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

        canvas.drawLine(0, 100, 1000, 100, black);
        canvas.drawLine(100, 0, 100, 1000, black);

        canvas.drawText("hello", 200, 200, paint);

        canvas.drawCircle(400, 400, 100, paint);
    }

}