[Android ] SurfaceView-Vẽ hình tròn khi chạm lên màn hình

1.Tạo 1 project android với tên “GraphicsDrawPointSurfaceView”

Figure 1 : Create new Android application project

---

2.

Figure 2 : Configure the project

---

3. 

Figure 3 : Design application launcher icon

---

4. 

Figure 4 : Create a blank activity

---

5.

Figure 5 : Enter MainActivity details

---

6. Tạo 1 class mới tên PaintSurface src/in/wptrafficanalyzer/graphicsdrawpointsurfaceview/PaintSurface.java với nội dung như sau.

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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

package in.wptrafficanalyzer.graphicsdrawpointsurfaceview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.SurfaceHolder; import android.view.SurfaceView; import android.view.View; import android.view.View.OnTouchListener; public class PaintSurface extends SurfaceView implements Runnable, OnTouchListener{     // Surface holder allows to control and monitor the surface     private SurfaceHolder mHolder;     // A thread where the painting activities are taking place     private Thread mThread;     // A flag which controls the start and stop of the repainting of the SurfaceView     private boolean mFlag = false;     // X coordinate of the touched position     private float mX;     // Y Coordinate of the touched position     private float mY;     // Paint     private Paint mPaint;     public PaintSurface(Context context, AttributeSet attrs) {         super(context, attrs);         // Getting the holder         mHolder = getHolder();         // Initializing the X position         mX = -100;         // Initializing the Y position        mY = -100;         // Initializing the paint object mPaint         mPaint = new Paint();         // Setting the color for the paint object         mPaint.setColor(Color.BLUE);     }     public void resume(){         // Instantiating the thread         mThread = new Thread(this);         // setting the mFlag to true for start repainting         mFlag = true;         // Start repaint the SurfaceView         mThread.start();     }     public void pause(){         mFlag = false;     }     @Override     public boolean onTouch(View v, MotionEvent event) {         switch(event.getAction()){         case MotionEvent.ACTION_DOWN:             // Getting the X-Coordinate of the touched position             mX = event.getX();             // Getting the Y-Coordinate of the touched position             mY = event.getY();             break;         }         return true;     }     @Override     public void run() {         while(mFlag){             // Check whether the object holds a valid surface             if(!mHolder.getSurface().isValid())                 continue;             // Start editing the surface             Canvas canvas = mHolder.lockCanvas();             // Draw a background color             canvas.drawARGB(255, 255, 255, 255);             // Draw a circle at (mX,mY) with radius 5             canvas.drawCircle(mX, mY, 5, mPaint);             // Finish editing the canvas and show to the user             mHolder.unlockCanvasAndPost(canvas);         }     } }

---

7. file res/layout/activity_main.xml

1 2 3 4 5 6 7 8 9 10 11 12

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity" >     <in.wptrafficanalyzer.graphicsdrawpointsurfaceview.PaintSurface         android:id="@+id/paint_surface"         android:layout_width="fill_parent"         android:layout_height="fill_parent" /> </RelativeLayout>

---

8.  src/in/wptrafficanalyzer/graphicsdrawpointsurfaceview/MainActivity.java

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 36 37 38 39 40 41 42

package in.wptrafficanalyzer.graphicsdrawpointsurfaceview; import android.app.Activity; import android.os.Bundle; import android.view.Menu; public class MainActivity extends Activity {     PaintSurface mPaintSurface;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         // Getting reference to the PaintView         mPaintSurface = (PaintSurface)findViewById(R.id.paint_surface);         // Setting the touch listener         mPaintSurface.setOnTouchListener(mPaintSurface);     }     @Override     public boolean onCreateOptionsMenu(Menu menu) {         // Inflate the menu; this adds items to the action bar if it is present.         getMenuInflater().inflate(R.menu.main, menu);         return true;     }     @Override     protected void onResume() {         super.onResume();         mPaintSurface.resume();     }     @Override     protected void onPause() {         super.onPause();         mPaintSurface.pause();     } }

---

---

9.Ảnh chụp Demo

Figure 6 : Screenshot of the application in execution