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

Public on June 2, 2014

1.Tạo 1 project android với tên “GraphicsDrawPointSurfaceView”
Create new Android application project
Figure 1 : Create new Android application project

2.

Configure the project
Figure 2 : Configure the project

3. 
Design application launcher icon
Figure 3 : Design application launcher icon

4. 
Create a blank activity
Figure 4 : Create a blank activity

5.
Enter MainActivity details
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
Screenshot of the application in execution
Figure 6 : Screenshot of the application in execution





[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon