그리드 레이아웃에서 Fling 제스처 감지하기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

Fling gesture detection on grid layout

그리드 레이아웃에서 Fling 제스처 감지하기

 문제 내용 

I want to get fling gesture detection working in my Android application.

나는 내 안드로이드 애플리케이션에서 제스처 감지 기능을 작동시키고 싶다.

 

What I have is a GridLayout that contains 9 ImageViews. The source can be found here: Romain Guys's Grid Layout.

제가 가지고 있는 것은 9개의 이미지 뷰를 포함하는 그리드 레이아웃입니다. 출처는 여기서 찾을 수 있다: 로맹 가이즈의 그리드 레이아웃.

 

That file I take is from Romain Guy's Photostream application and has only been slightly adapted.

내가 가져온 그 파일은 로맹 가이의 포토스트림 애플리케이션에서 나온 것이고 약간만 수정되었다.

 

For the simple click situation I need only set the onClickListener for each ImageView I add to be the main activity which implements View.OnClickListener. It seems infinitely more complicated to implement something that recognizes a fling. I presume this is because it may span views?

간단한 클릭 상황의 경우 View.OnClickListener를 구현하는 기본 액티비티에 추가한 각 ImageView에 대해 onClickListener만 설정하면 됩니다. Fling을 인식하는 무언가를 구현하는 것은 훨씬 더 복잡해 보인다. 내 생각에 이것은 그것이 View에 걸쳐있기 때문인 것 같다.

 

 

I really just need a concrete example of this working across views. What, when and how should I attach this listener? I need to be able to detect single clicks also.

저는 이것이 여러 View에서 작용하는 구체적인 예가 정말 필요합니다. 이 리스너를 언제 어떻게 첨부해야 합니까? 클릭 한 번도 감지할 수 있어야 합니다.

// Gesture detection
mGestureDetector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {

    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        int dx = (int) (e2.getX() - e1.getX());
        // don't accept the fling if it's too short
        // as it may conflict with a button push
        if (Math.abs(dx) > MAJOR_MOVE && Math.abs(velocityX) > Math.absvelocityY)) {
            if (velocityX > 0) {
                moveRight();
            } else {
                moveLeft();
            }
            return true;
        } else {
            return false;
        }
    }
});

 

Is it possible to lay a transparent view over the top of my screen to capture flings?

화면 상단에 투명한 View를 배치하여 Fling를 캡처할 수 있습니까?

 

If I choose not to inflate my child image views from XML can I pass the GestureDetector as a constructor parameter to a new subclass of ImageView that I create?

XML에서 자식 이미지 뷰를 inflate하지 않도록 선택한 경우 생성하는 ImageView의 새 하위 클래스에 생성자 매개 변수로 제스처 디텍터를 전달할 수 있습니까?

 

This is the very simple activity that I'm trying to get the fling detection to work for: SelectFilterActivity (Adapted from photostream).

이것은 제가 플링 감지 기능을 작동시키기 위해 시도한 매우 간단한 액티비티입니다: SelectFilterActivity(포토스트림에서 조정됨).

 

I've been looking at these sources:

나는 다음 자료들을 조사해 왔다.

 

• Detect Gestures - Tutorial
• SDK docs
• Calculator Code

 

Nothing has worked for me so far and I was hoping for some pointers.

지금까지 나에게 효과가 있는 것은 아무것도 없었고 나는 몇 가지 조언을 바라고 있었다.

 

 

 

 높은 점수를 받은 Solution 

Thanks to Code Shogun, whose code I adapted to my situation.

코드 쇼군 덕분에 내 상황에 적응했어.

 

Let your activity implementOnClickListener as usual:

액티비티에 평소와 같이 OnClickListener를 구현하도록 합니다.

public class SelectFilterActivity extends Activity implements OnClickListener {

  private static final int SWIPE_MIN_DISTANCE = 120;
  private static final int SWIPE_MAX_OFF_PATH = 250;
  private static final int SWIPE_THRESHOLD_VELOCITY = 200;
  private GestureDetector gestureDetector;
  View.OnTouchListener gestureListener;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    /* ... */

    // Gesture detection
    gestureDetector = new GestureDetector(this, new MyGestureDetector());
    gestureListener = new View.OnTouchListener() {
      public boolean onTouch(View v, MotionEvent event) {
        return gestureDetector.onTouchEvent(event);
      }
    };

  }

  class MyGestureDetector extends SimpleOnGestureListener {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
      try {
        if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
          return false;
        // right to left swipe
        if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
          Toast.makeText(SelectFilterActivity.this, "Left Swipe", Toast.LENGTH_SHORT).show();
        } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
          Toast.makeText(SelectFilterActivity.this, "Right Swipe", Toast.LENGTH_SHORT).show();
        }
      } catch (Exception e) {
         // nothing
      }
      return false;
    }

    @Override
    public boolean onDown(MotionEvent e) {
      return true;
    }
  }
}

 

Attach your gesture listener to all the views you add to the main layout;

기본 레이아웃에 추가하는 모든 View에 제스처 청취기를 연결합니다.

// Do this for each view added to the grid
imageView.setOnClickListener(SelectFilterActivity.this); 
imageView.setOnTouchListener(gestureListener);

 

Watch in awe as your overridden methods are hit, both the onClick(View v) of the activity and the onFling of the gesture listener.

액티비티의 onClick(View)과 제스처 리스너의 onFling 모두에서 재정의된 메서드가 히트하는 것을 경외심을 가지고 보십시오.

public void onClick(View v) {
  Filter f = (Filter) v.getTag();
  FilterFullscreenActivity.show(this, input, f);
}

 

The post 'fling' dance is optional but encouraged.

포스트 'fling' 댄스는 선택사항이지만 권장된다.

 

 

 

 가장 최근 달린 Solution 

If you dont like to create a separate class or make code complex,
You can just create a GestureDetector variable inside OnTouchListener and make your code more easier

만약 당신이 별도의 클래스를 만들거나 코드를 복잡하게 만들고 싶지 않다면, OnTouchListener 내에서 제스처 디텍터 변수를 생성하여 코드를 더 쉽게 만들 수 있습니다.

 

namVyuVar can be any name of the View on which you need to set the listner

namVyuVar는 리스너를 설정해야 하는 View의 모든 이름이 될 수 있습니다.

 

namVyuVar.setOnTouchListener(new View.OnTouchListener()
{
    @Override
    public boolean onTouch(View view, MotionEvent MsnEvtPsgVal)
    {
        flingActionVar.onTouchEvent(MsnEvtPsgVal);
        return true;
    }

    GestureDetector flingActionVar = new GestureDetector(getApplicationContext(), new GestureDetector.SimpleOnGestureListener()
    {
        private static final int flingActionMinDstVac = 120;
        private static final int flingActionMinSpdVac = 200;

        @Override
        public boolean onFling(MotionEvent fstMsnEvtPsgVal, MotionEvent lstMsnEvtPsgVal, float flingActionXcoSpdPsgVal, float flingActionYcoSpdPsgVal)
        {
            if(fstMsnEvtPsgVal.getX() - lstMsnEvtPsgVal.getX() > flingActionMinDstVac && Math.abs(flingActionXcoSpdPsgVal) > flingActionMinSpdVac)
            {
                // TskTdo :=> On Right to Left fling

                return false;
            }
            else if (lstMsnEvtPsgVal.getX() - fstMsnEvtPsgVal.getX() > flingActionMinDstVac && Math.abs(flingActionXcoSpdPsgVal) > flingActionMinSpdVac)
            {
                // TskTdo :=> On Left to Right fling

                return false;
            }

            if(fstMsnEvtPsgVal.getY() - lstMsnEvtPsgVal.getY() > flingActionMinDstVac && Math.abs(flingActionYcoSpdPsgVal) > flingActionMinSpdVac)
            {
                // TskTdo :=> On Bottom to Top fling

                return false;
            }
            else if (lstMsnEvtPsgVal.getY() - fstMsnEvtPsgVal.getY() > flingActionMinDstVac && Math.abs(flingActionYcoSpdPsgVal) > flingActionMinSpdVac)
            {
                // TskTdo :=> On Top to Bottom fling

                return false;
            }
            return false;
        }
    });
});

 

 

출처 : https://stackoverflow.com/questions/937313/fling-gesture-detection-on-grid-layout