The project needs to make a curve, and the curve data is constantly loaded. As you drag to the left, the graph moves with the drag and loads more data as you drag to the edge.
Take a look at the steps:
1. Put a surfaceView in the Activity
2. Add listeners to the surfaceView
surfaceHolder = surfaceView1.getHolder();
mMySurfaceCallback = new MySurfaceCallback();
surfaceHolder.addCallback(mMySurfaceCallback);
Copy the code3. Implement listeners.
class MySurfaceCallback implements android.view.SurfaceHolder.Callback {
MyDraw mMyDraw;
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
mMyDraw.onSurfaceChanged();
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
mMyDraw = new MyDraw();
mMyDraw.draw();
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
}
}
Copy the code4. Write the method of drawing graphics
class MyDraw { Paint p; Canvas canvas; int unit_x = 80; Int unit_y = 10; // Int unit_y = 10; // Final int preInit_x = 50; // Start position final int preInit_y = 550; // The largest Y vertex. Point origin; final int MAX_Fliing_X = unit_x * 20; Public MyDraw() {super(); p = new Paint(); // Create pen origin = new Point(preInit_x, preInit_y); } /** * drag range, x > 0 means drag from left to right. * * @param x_changed */ public void onFliing(float x_changed) {float newX = origin. X + x_changed; if (newX > preInit_x) newX = preInit_x; int minNewX = -((result.length) * unit_x - surfaceView1.getWidth()); boolean isToEnd = false; // Whether the last point has been reached. I drag it to the extreme right-hand limit. if (newX < minNewX) { newX = minNewX; isToEnd = true; } int x = (int) newX; if (x == origin.x) return; origin = new Point(x, origin.y); // Change the position of the coordinate origin draw(); If (isToEnd) {// Trigger the method to reach the vertex. raiseScrollToEnd(); } } public void draw() { canvas = surfaceHolder.lockCanvas(); onDdraw(canvas); surfaceHolder.unlockCanvasAndPost(canvas); } public void onDdraw(Canvas c) {log. I ("PDWY", string. format(" new origin :(%s, %s)", origine.x, origine.y)); Rect r; int height = c.getHeight(); int width = c.getWidth(); c.drawColor(Color.BLACK); p.setColor(Color.RED); p.setStrokeWidth(2); p.setStyle(Paint.Style.STROKE); r = new Rect(2, 2, width - 2, height - 2); c.drawRect(r, p); p.reset(); p.setColor(Color.RED); p.setStrokeWidth(5); float[] lines = new float[max_unit]; lines = evalPosition(result, unit_x, unit_y, origin); / / lines = new float [],0,50,500,100,400,100,400,150,500,0,0 {0}; DrawLines (lines, 2, lines.length-2, p); // drawLines(lines, 2, lines.length-2, p); // drawLines(lines, 2, lines.length-2, p); p.reset(); p.setColor(Color.parseColor("#dcdcdc")); drawEndPoint(lines, 2, lines.length - 2, p, c); } private void drawEndPoint(float[] lines, int offset, int count, Paint p2, Canvas c) { for (int i = offset; i < count; i += 2) { float x = lines[i]; float y = lines[i + 1]; c.drawCircle(x, y, 8, p2); } } private float[] evalPosition(float[] result2, int unit_widht, int unit_height, Point origin) { if (result2 == null) return new float[0]; float[] val = new float[result2.length * 4]; for (int i = 0; i < result2.length; i++) { float y = origin.y - result2[i] * unit_height; float x = origin.x + unit_widht * i; val[i * 4 + 0] = x; val[i * 4 + 1] = y; val[i * 4 + 2] = x; val[i * 4 + 3] = y; } return val; } final int max_unit = 6; public void onSurfaceChanged() { } }Copy the code5. Register gestures, with curves that change as your fingers drag.
surfaceView1.setOnTouchListener(new OnTouchListener() { int state = 0; float x_start; @Override public boolean onTouch(View v, MotionEvent event) { // mGestureDetector.onTouchEvent(event); if (event.getAction() == MotionEvent.ACTION_DOWN) { state = 1; x_start = event.getX(); } if (event.getAction() == MotionEvent.ACTION_UP) { state = 0; x_start = 0; } if (event.getAction() == MotionEvent.ACTION_MOVE) { if (state == 1) { if (mMySurfaceCallback ! = null && mMySurfaceCallback.mMyDraw ! = null) { float xEnd = event.getX(); Float x_changed = (float) ((xend-x_start) / 1.3); If (math.abs (x_changed) > 5) {log. I ("PDWY", "moved" + x_changed); mMySurfaceCallback.mMyDraw.onFliing(x_changed); x_start = xEnd; } } } } return true; }});Copy the code
6. Remember to calculate the coordinate position, and when you keep dragging to the left at the end, trigger a custom event onScrollToEnd. Objects subscribed to this event can “load more data” at the appropriate time
/** * The drag range, x > 0 indicates the drag from left to right. X <0 is dragged from right to left@param x_changed
*/
public void onFliing(float x_changed) {
float newX = origin.x + x_changed;
if (newX > preInit_x)
newX = preInit_x;
int minNewX = -((result.length) * unit_x - surfaceView1.getWidth());
boolean isToEnd = false;// Whether the last point has been reached. I drag it to the extreme right-hand limit.
if (newX < minNewX) {
newX = minNewX;
isToEnd = true;
}
int x = (int) newX;
if (x == origin.x)
return;
origin = new Point(x, origin.y);// Change the origin position of the coordinate system
draw();
if (isToEnd) {// Trigger the method to reach the vertex.raiseScrollToEnd(); }}Copy the codeImplementation of custom events
ScrollToEndListener mScrollToEndListener; private void raiseScrollToEnd() { if (mScrollToEndListener ! = null) mScrollToEndListener.onScrollToEnd(); } public void setScrollToEndListener(ScrollToEndListener scrollToEndListener) { mScrollToEndListener = scrollToEndListener; } public static interface ScrollToEndListener { public void onScrollToEnd(); }Copy the code————————-
Finally, see how to use it:
public class MainActivity extends Activity { SurfaceView surfaceView1; MyCustomCurve mMyCustomCurve; float[] result; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Package pck = Package.getPackage(this.getPackageName()); Resources resource = this.getResources(); surfaceView1 = (SurfaceView)findViewById(resource.getIdentifier("surfaceView1", "id", pck.getName())); mMyCustomCurve = new MyCustomCurve(this,surfaceView1); Result = new float[] {1, 30, 50, 40, 30, 5,15, 35, 20,3,12,15,31, 30, 50, 40, 30, 5,15, 35, 20,3,12,15,15}; mMyCustomCurve.setResult(result); / / when the end of the read data mMyCustomCurve setScrollToEndListener (new ScrollToEndListener () {@ Override public void onScrollToEnd () { ArrayList<Float> lst = new ArrayList<Float>(); for (int i = 0; i < result.length; i++) { lst.add(result[i]); } // Append new data, add 10 Random numbers, the value is not greater than 50. for (int j = 0; j < 10; j++) { lst.add(r.nextFloat() * 50); } float[] newArray = new float[lst.size()]; for (int i = 0; i < lst.size(); i++) { newArray[i] = lst.get(i); } result = newArray; // Set the new data source mmyCustomCurve.setresult (result); Toast.maketext (mainactivity.this, "loading a new data ", 0).show(); toast.maketext (mainactivity.this," loading a new data ", 0).show(); }}); }Copy the code
Code download extraction code: 883C