도전과제 24 : 빨간 사각형을 터치하여 움직이기 (Do it Android 앱 프로그래밍) [JAVA]

 

도전 24

패널에 빨간색 사각형을 만든 후 손가락으로 터치하여 드래그하면 사각형이 손가락과 함께 움직이도록 만들어 보세요.

1. 화면에는 패널 하나가 보이도록 한 다음 이 패널 안에 빨간색 사각형을 하나 그려 넣습니다.
2. 화면이 처음 띄워졌을 때 빨간색 사각형이 보이는 위치는 화면의 가운데 또는 좌측 상단으로 지정합니다.
3. 손가락을 터치하여 움직이면 빨간색 사각형이 손가락의 움직임에 따라서 이동하도록 만듭니다.

참고할 점
손가락으로 터치하여 선을 그렸던 것과 같은 원리로 소스 코드를 구성하면 됩니다.

 

풀이

메인 레이아웃은 그냥 빈 레이아웃에 터치하여 움직이라는 글자만 배치하였다. 이제 이 레이아웃에 뷰를 그리는데, 이 뷰 안에서 빨간 버튼을 움직이도록 할 것이다.

RedButton이라는 View를 상속하는 객체를 만들어 위에서 빨간 버튼을 클릭하고 움직이게 할 것인데, 우선 뷰에 그리는 방법은 이전 도전과제와 마찬가지로, 비트맵에 미리 그리도록 할 것이다. 우선 pastrect에 직전 사각형의 x,y 좌표를 저장해두고,  TouchEvent로 만약 사각형 내의 좌표를 클릭한 지 검사한다. 만약 사각형을 잡고 움직인다면 pastrect을 빠르게 흰색으로 칠하고 움직인 좌표에 새 빨간 사각형을 칠하는 방식으로 구현하였다.

public boolean onTouchEvent(MotionEvent event){
        int action = event.getAction();
        Rect rect;
        float x = event.getX();
        float y = event.getY();
        if(x > rectLeftX && x < rectRightX && y < rectBottomY && y > rectTopY){
            Log.d("RedButton" , rectRightX + " " + rectLeftX + " " + rectTopY + " " + rectBottomY);
            switch (action){
                case MotionEvent.ACTION_UP : {
                    rect = touchUp(event,false);
                    if(rect!= null){
                        invalidate(rect);
                    }
                    return true;
                }

                case MotionEvent.ACTION_DOWN :{
                    rect = touchDown(event);
                    if(rect!= null){
                        invalidate(rect);
                    }
                    return true;
                }
                case MotionEvent.ACTION_MOVE : {
                    rect = touchMove(event);
                    if(rect!= null){
                        invalidate(rect);
                    }
                    return true;
                }
            }
        }
        return true;
    }
    private Rect touchDown(MotionEvent event){
        Rect rect = processMove(event);
        return rect;
    }
    private Rect touchMove(MotionEvent event){
        Rect rect = processMove(event);
        return rect;
    }
    private Rect touchUp(MotionEvent event, boolean cancel){
        Rect rect = processMove(event);
        return rect;
    }
    private Rect processMove(MotionEvent event){
        final float x = event.getX();
        final float y = event.getY();
        pastrect = DrawRect(x,y);
        return pastrect;
    }

    protected Rect DrawRect(float x, float y){
        if(pastrect != null){ //이전 사각형을 하얀색으로 색칠하고 (없애버림)
            mPaint.setColor(Color.WHITE);
            mCanvas.drawRect(pastrect,mPaint);
        }

        mPaint.setColor(Color.RED);
        rectTopY = y-100;
        rectBottomY = y+100;
        rectLeftX = x-100;
        rectRightX = x+100;

        Rect rect = new Rect(); //터치 지점을 가운데로하여 새 사각형을 그리기
        rect.set((int)rectLeftX, (int)rectTopY, (int)rectRightX, (int)rectBottomY);
        mCanvas.drawRect(rect , mPaint);
        return rect;
    }

메인 액티비티에서 빨간 버튼에 대한 리스너를 설정해 (물론 pastrect부터 사각형 좌표 범위 내인지 검사해야 한다) 터치 시 작동할 이벤트를 추가적으로 정할 수 있다.

 

결과

전체 소스코드 : https://github.com/howtolivelikehuman/DoitAndroid/tree/master/DoitMission_24/app/src/main

howtolivelikehuman/DoitAndroid