Kotlin으로 안드로이드 스와이프 제스처 구현하기

이 튜토리얼에서는 Kotlin을 사용해 안드로이드 앱에서 오른쪽에서 왼쪽(Right-to-Left) 및 왼쪽에서 오른쪽(Left-to-Right) 스와이프 제스처를 감지하고 처리하는 방법을 단계별로 알아봅니다.

스와이프 제스처는 이미지 갤러리 탐색, 화면 전환, 목록 항목 삭제 등 다양한 UX 시나리오에서 활용되는 핵심 기능입니다. 안드로이드에서는 GestureDetector 클래스를 활용하여 손쉽게 구현할 수 있습니다.

1단계: 새 프로젝트 생성

Android Studio를 실행한 뒤, 상단 메뉴에서 File → New Project를 선택하고 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다. 언어는 반드시 Kotlin으로 설정하세요.

2단계: 레이아웃 파일 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 화면 중앙에 스와이프 안내 문구를 표시하는 TextView를 배치했습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="#008080"
        android:padding="5dp"
        android:text="TutorialsPoint"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Right-to-Left and Left-to-Right swipe gestures"
        android:textAlignment="center"
        android:textColor="@android:color/holo_blue_light"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

3단계: MainActivity에 제스처 로직 구현

src/MainActivity.kt 파일에 아래 코드를 작성합니다. 핵심은 GestureDetector.OnGestureListener 인터페이스의 onFling() 콜백에서 X축과 Y축의 이동 거리 및 속도를 비교하여 스와이프 방향을 판별하는 부분입니다.

import android.os.Bundle
import android.view.GestureDetector
import android.view.MotionEvent
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlin.math.abs

class MainActivity : AppCompatActivity(), GestureDetector.OnGestureListener {

    lateinit var gestureDetector: GestureDetector
    private val swipeThreshold = 100
    private val swipeVelocityThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        gestureDetector = GestureDetector(this)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        return if (gestureDetector.onTouchEvent(event)) {
            true
        } else {
            super.onTouchEvent(event)
        }
    }

    override fun onDown(p0: MotionEvent?): Boolean {
        return false
    }

    override fun onShowPress(p0: MotionEvent?) {
        return
    }

    override fun onSingleTapUp(p0: MotionEvent?): Boolean {
        return false
    }

    override fun onScroll(p0: MotionEvent?, p1: MotionEvent?, p2: Float, p3: Float): Boolean {
        return false
    }

    override fun onLongPress(p0: MotionEvent?) {
        return
    }

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

            // 수평 이동이 수직 이동보다 클 때만 스와이프로 판단
            if (abs(diffX) > abs(diffY)) {
                if (abs(diffX) > swipeThreshold && abs(velocityX) > swipeVelocityThreshold) {
                    if (diffX > 0) {
                        Toast.makeText(applicationContext,
                            "Left to Right swipe gesture", Toast.LENGTH_SHORT).show()
                    } else {
                        Toast.makeText(applicationContext,
                            "Right to Left swipe gesture", Toast.LENGTH_SHORT).show()
                    }
                }
            }
        } catch (exception: Exception) {
            exception.printStackTrace()
        }
        return true
    }
}

핵심 로직 설명

diffX / diffY 계산: 터치 시작 지점(e1)과 종료 지점(e2) 사이의 X, Y 거리 차이를 구합니다.
방향 판별: X축 이동량이 Y축보다 크면 수평 스와이프로 간주합니다.
임계값 검증: 이동 거리가 100px 이상이고 속도가 임계값을 넘어야 실제 스와이프로 인식합니다. 이를 통해 의도치 않은 미세한 터치 움직임을 걸러낼 수 있습니다.
방향 결정: diffX가 양수면 왼쪽→오른쪽, 음수면 오른쪽→왼쪽 스와이프입니다.

4단계: 매니페스트 확인

androidManifest.xml에는 별도의 권한 추가 없이 기본 설정 그대로 사용하면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

앱 실행 및 결과 확인

실제 안드로이드 기기를 컴퓨터에 연결한 상태에서 프로젝트를 실행해 보겠습니다. Android Studio 툴바에서 Run ▶ 버튼을 클릭하고, 목록에서 자신의 모바일 기기를 선택합니다.

앱이 실행되면 화면 중앙에 안내 문구가 표시됩니다. 이제 손가락으로 화면을 좌우로 빠르게 밀어 보세요. 스와이프 방향에 따라 아래와 같은 토스트 메시지가 나타나는 것을 확인할 수 있습니다.

왼쪽 → 오른쪽 스와이프: "Left to Right swipe gesture"
오른쪽 → 왼쪽 스와이프: "Right to Left swipe gesture"