[TIL] #25 OnSwipeListener

대부분의 휴대폰에 있는 기능이겠지만 현재 내가 사용하는 갤럭시 폰에서는 연락처 또는 전화번호를 오른쪽으로 밀어 전화를 걸거나 왼쪽으로 밀어 메시지를 보낼 수 있는 기능이 있다.
이 기능은 코드를 어떻게 작성해야 하나 고민하고 구글링도 해보다가 사용자의 스와이프 동작을 감지하고 처리하는 OnSwipeListener를 구현해야 한다는 것을 알게 되었다. 비슷하다고 할 수 있는 기능으로는 OnClickListener가 있다.

1. OnClickListener vs. OnSwipeListener

1) OnClickListener

• Android에서 제공하는 인터페이스 중 하나
• 버튼이나 뷰(View)와 같은 UI 요소의 클릭 이벤트를 처리하기 위해 사용
• 이 인터페이스를 구현하면 클릭 이벤트가 발생했을 때 호출되는 onClick 메서드를 재정의하여 원하는 동작을 수행할 수 있음
• setOnClickListener 메서드를 사용하여 해당 뷰에 클릭 리스너를 등록함

btn.setOnClickListener {
    // 클릭 이벤트 발생 시 수행할 동작
}

2) OnSwipeListener

• 스와이프와 같은 제스처 이벤트를 처리하기 위한 커스텀 리스너!
• Android 프레임워크에서는 기본적으로 스와이프 동작을 위한 미리 만들어진 리스너를 제공하지 않기 때문에 개발자가 직접 구현해야 함
• 보통 View.OnTouchListener 인터페이스를 구현하여 해당 뷰의 터치 이벤트를 감지하고, 제스처에 따른 동작을 구현함

class OnSwipeListener(context: Context) : View.OnTouchListener {
    // ...
    
    override fun onTouch(view: View, event: MotionEvent): Boolean {
        return gestureDetector.onTouchEvent(event)
    }

    // ...
}

2. OnSwipeListener 예시 코드

import android.content.Context
import android.view.GestureDetector
import android.view.MotionEvent
import android.view.View

class OnSwipeListener(context: Context) : View.OnTouchListener {
    private val gestureDetector = GestureDetector(context, GestureListener())

    override fun onTouch(view: View, event: MotionEvent): Boolean {
        return gestureDetector.onTouchEvent(event)
    }

    private inner class GestureListener : GestureDetector.SimpleOnGestureListener() {
        private val SWIPE_THRESHOLD = 100
        private val SWIPE_VELOCITY_THRESHOLD = 100

        override fun onFling(
            e1: MotionEvent, e2: MotionEvent,
            velocityX: Float, velocityY: Float
        ): Boolean {
            val diffX = e2.x - e1.x

            if (Math.abs(diffX) > SWIPE_THRESHOLD &&
                Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD
            ) {
                if (diffX > 0) {
                    onSwipeRight()
                } else {
                    onSwipeLeft()
                }
                return true
            }
            
            return false
        }
    }

    fun onSwipeRight() {
        // 오른쪽으로 스와이프 시 처리할 로직
    }

    fun onSwipeLeft() {
        // 왼쪽으로 스와이프 시 처리할 로직
    }
}

1) OnSwipeListener 클래스 정의

• View.OnTouchListener 인터페이스를 구현하도록 정의
• 이 클래스를 뷰의 OnTouchListener로 설정하여 뷰의 터치 이벤트를 감지합니다.
  
  

2) GestureDetector 생성

• 클래스 내부에서 gestureDetector라는 이름으로 GestureDetector 객체 생성
• 이 객체는 사용자의 터치 동작을 감지하는 역할을 함
• GestureDetector는 주어진 컨텍스트와 GestureListener 객체를 인자로 받아 생성됨
  
  

3) GestureListener 구현

• GestureListener 클래스는 GestureDetector.SimpleOnGestureListener를 상속하여 구현됨
• onFling 메서드는 사용자의 스와이프 동작을 감지하고 그에 따라 로직을 실행하는 핵심 메서드!
• SWIPE_THRESHOLD와 SWIPE_VELOCITY_THRESHOLD는 스와이프 감지에 사용되는 임계값으로, 이 값들을 기반으로 사용자의 스와이프 동작을 판단함
• onFling 메서드에서는 오른쪽 스와이프와 왼쪽 스와이프를 판단하여 해당하는 로직을 실행함
  
  

4) 스와이프 처리 로직

• onSwipeRight 메서드는 오른쪽 스와이프 시 실행할 로직을 정의함
• 여기에는 뷰나 액티비티의 상태를 변경하거나 기타 원하는 작업을 수행할 수 있음
• onSwipeLeft 메서드는 왼쪽 스와이프 시 실행할 로직을 정의!
  • 스와이프 방향에 맞는 작업을 정의할 수 있음
    
    

5) 클래스 사용

이 클래스를 사용하려면, 스와이프를 감지하고 처리하고자 하는 뷰에 OnTouchListener로 설정하면 됨
예를 들어, 액티비티나 프래그먼트에서 아래와 같이 사용할 수 있음

val swipeListener = OnSwipeListener(this)
myView.setOnTouchListener(swipeListener)

• 위와 같이 코드를 쓰면 myView에서 사용자의 스와이프 동작을 감지하고, 정의한 로직에 따라 onSwipeRight 또는 onSwipeLeft 메서드가 호출됨

---

[참고 사이트]

'[Kotlin][Android] 터치 제스처 감지 (Gesture Detector)', 팀노바 & Stickode 개발자 블로그
'[코틀린] Kotlin Swipe 동작 구현하기 (OnSwipeTouchListener)', evolog
'[Android] 화면 터치 중 Swiping을 이용한 View 전환', GIS DEVELOPER