관리 메뉴

moozi

그래픽 2D 4 - onTouchEvent 사용하기 본문

안드로이드개발강좌

그래픽 2D 4 - onTouchEvent 사용하기

moozi 2010. 3. 9. 20:13

이번 강좌는 [ 안드로이드 개발 2.0 ] 그래픽 2D 3 - SurfaceView 활용 2 ] 에서 이어집니다.

지난 강좌에서 화면에 안드로이드 마스코트 아이콘을 띄웠습니다. 이번 강좌에서는 이 아이콘이 화면을 터치한 위치로 이동하도록 코드를 작성해 보겠습니다.


1. CustomView 클래스의 생성자를 다음과 같이 작성합니다.

public CustomView(Context context) {
            super(context);
            getHolder().addCallback(this);
            CVThread = new CustomViewThread(getHolder(), this);
            setFocusable(true);
        }

기존 코드에 setFocusable(true); 가 추가되었습니다. setFocusable(true);  는 해당 View가 touch mode에서 Focus가 가도록 지정합니다.


2. CustomView 클래스에서 터치한 위치를 표시하는 x, y 멤버변수를 사용하도록 다음과 같이 작성합니다.

class CustomView extends SurfaceView implements SurfaceHolder.Callback {
        private CustomViewThread CVThread;
        private int x = 70;
       private int y = 70;

 
        ...... 중간 생략

        @Override
        public void onDraw(Canvas canvas) {
         Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
            canvas.drawColor(Color.parseColor("#dedede"));
            canvas.drawBitmap(bm, x, y, null);
        }
  
... 이하 생략
}

비트맵이 표시되는 좌표를 x, y 변수에 저장해서 canvas.drawBitmap(bm, x, y, null); 에서 사용하고 있습니다.


3. 터치이벤트를 처리하는 onTouchEvent 메서드를 CustomView 클래스에 작성합니다.

@Override
        public boolean onTouchEvent(MotionEvent event) {
            x = (int) event.getX();
         y = (int) event.getY();
            return true;
        }

      x = (int) event.getX(); // x좌표
     y = (int) event.getY(); // y좌표


4. Ctrl + Shift + O 를 눌러서 pacakage들을 확실하게 추가한다음 Ctrl + F11 로 실행합니다.

[ 실행결과 ]

실행후 마우스를 이용해서 다른 위치를 클릭하면 해당위치로 아이콘이 이동하는 것을 알 수 있습니다.
그런데, 커서위치에 아이콘의 중심이 아닌 왼쪽 상단 부분이 위치합니다.(위의 그림을 잘 살펴보세요) 


5. 이미지의 중심이 터치한 위치에 오도록 onTouchEvent 메서드 내부를 다음과 같이 수정합니다.

@Override
        public void onDraw(Canvas canvas) {
         Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
            canvas.drawColor(Color.parseColor("#dedede"));
            canvas.drawBitmap(bm, x- (bm.getWidth() / 2), y - (bm.getHeight() / 2), null);
        }

터치한 위치를 이미지의 중심에 오게하려면, x좌표와 y좌표를 각각 가로, 세로 사이즈의 반만큼 왼쪽으로 이동하면 되므로 x- (bm.getWidth() / 2), y - (bm.getHeight() / 2) 와 같이 작성합니다.


6. 지금까지 작성한 CustomView 클래스의 전체 코드는 다음과 같습니다.

class CustomView extends SurfaceView implements SurfaceHolder.Callback {
        private CustomViewThread CVThread;
        private int x = 70;
        private int y = 70;
 
        public CustomView(Context context) {
            super(context);
            getHolder().addCallback(this);
            CVThread = new CustomViewThread(getHolder(), this);
            setFocusable(true);
        }
 
        @Override
        public void onDraw(Canvas canvas) {
         Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
            canvas.drawColor(Color.parseColor("#dedede"));
            canvas.drawBitmap(bm, x- (bm.getWidth() / 2), y - (bm.getHeight() / 2), null);
        }
       
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            x = (int) event.getX();
            y = (int) event.getY();
            return true;
        }
       
 
        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            // TODO Auto-generated method stub
 
        }
 
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            CVThread.setRunning(true);
            CVThread.start();
        }
 
        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
           
            boolean retry = true;
            CVThread.setRunning(false);
            while (retry) {
                try {
                    CVThread.join();
                    retry = false;
                } catch (InterruptedException e) {
                   
                }
            }
        }
    }

ctrl + F11 로 실행하면 다음과 같은 결과를 얻을 수 있습니다.

[ 실행결과 - 마우스 커서 위치에 아이콘의 중앙부분이 위치합니다. ]


10 Comments
  • 프로필사진 hnin3 2010.03.10 11:42 처음부터 지금까지 쭈우욱 잘 보았고..
    많이 배웠습니다..
    감사합니다..꾸벅..
  • 프로필사진 moozi 2010.03.10 12:03 신고 hnin3님 반갑습니다.

    도움이 되셨다니 저도 기분 좋네요... ^^
  • 프로필사진 solkit 2010.03.11 06:12 안녕하세요? Reference 보고 view interface 에 있는 onKeyDown 메소드를 구현해 보려고 시도 했습니다.

    문자 m을 누르면 좌표 x=100 , y=100 으로 옮기려고 CustomView 클래스에 아래를 추가했습니다.

    int a = 92;
    public boolean onKeyDown(int a , KeyEvent event) {

    x = 100;
    y = 100;
    return true;
    }

    이렇게 하니까 이클립스에서 자동으로 import android.view.KeyEvent; 하더라구요.

    근데 작동은 하지 않습니다.

    뭘 더 추가 해야 되나요?
  • 프로필사진 moozi 2010.03.11 20:59 신고 글쎄요...

    KeyDown이면 에뮬레이터 오른쪽에 있는 키들을 눌러보세요. 그럼 동작하지 않을까 싶습니다.

    한번 해보세요

    ^^
  • 프로필사진 초보자 2010.03.11 10:32 안녕하세요...
    처음 안드로이드를 접하면서 여기 강좌로 공부를 시작한 초보입니다^^
    중간중간에 질문도 몇개 하고 그랬었는데...
    도움이 많이 되고 있습니다...
    지금까지 많은걸 알아가고 배워가고 있습니다^^
    감사드립니다...^^

    아!... 그리고 기억 나실진 모르겠지만 초반에 한질문중에 에률레이터는 작동이 되는데 연결이 끊기는 에러가 난다고 말씀드린거 기억 나실련지요?....

    역시 제생각대로 제 컴터가 너무 느려 터져서 중간에 연결이 끊기는 거였더라구요...
    에뮬레이터는 실행이되어서 구동이 되는데 정작 프로그램이 작동이 안되고... 에러 메시지엔 연결이 끊겼다고 나왔었거든요...^^
    컴터를 업그레이드 하고나서는 100% 잘 구동이 됩니다^^
    그럼 앞으로도 좋은 강좌부탁드립니다^^
  • 프로필사진 moozi 2010.03.11 21:01 신고 네 기억합니다.

    컴을 업그레이드 하고 잘 되신다니 다행입니다. ^^

    저도 분발하겠습니다. ^^
  • 프로필사진 북극 2010.04.02 16:39 안드로이드 처음 접하는데 잘 배우고 있습니다

    질문이 있는데

    @Override
    public boolean onTouchEvent(MotionEvent event) {
    x = (int) event.getX();
    y = (int) event.getY();
    return true;
    }

    이부분에서 onTouchEvent 부분에서 에러가 발생하더군요
    저번에 한 것부터 다 작성했는데 이부분만 막혔어요

    그리고 이해가 안되는 부분이 많은데 종종 질문해도 될까요
  • 프로필사진 moozi 2010.04.04 00:39 신고 북극님 반갑습니다.

    적어주신 부분은 이상이 없는것 같은데요...

    전체적으로 작성하신 코드를 제가 작성한 것과 다시 비교해 보세요

    ^^
  • 프로필사진 0000 2013.01.25 20:47 사진은 지정해주지않으면 저 사진으로 뜨나요??
  • 프로필사진 moozi 2013.01.28 15:45 신고 아이콘 이미지 파일의 이름이 icon.png 입니다.

    Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
    여기서 R.drawable.icon 파일을 지정해 주고 있습니다.
댓글쓰기 폼