Android — 드래그 앤 드롭

오늘 저는 안드로이드 개발에서 제가 가장 좋아하는 기능 중 하나인 "드래그 앤 드롭"에 대해 이야기하고 싶습니다.

최신 사용자 인터페이스에서 끌어서 놓기는 사용자가 터치 제스처로 화면에서 개체를 이동할 수 있도록 하는 필수 상호 작용 패턴이 되었습니다.

Android Kotlin의 드래그 앤 드롭 프레임워크는 앱에서 드래그 앤 드롭 기능을 구현하는 간단하고 유연한 방법을 제공합니다. 사용자는 항목을 길게 탭한 다음 원하는 대상으로 드래그하여 보기 또는 항목을 한 위치에서 다른 위치로 끌 수 있습니다. 끌어서 놓기 프레임워크는 DragEvent, DragShadow및 ClipData개체의 세 가지 주요 구성 요소를 기반으로 합니다.

드래그 이벤트:

이 DragEvent클래스는 전체 끌어서 놓기 수명 주기를 관리하는 책임이 있습니다. 끌어서 놓기 작업의 여러 상태를 나타내는 상수 집합을 제공합니다. 이러한 상태에는 ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP및 가 포함됩니다 ACTION_DRAG_ENDED. 이러한 상태는 끌기 작업이 시작되는 시기, 진행 중인 시기 및 완료되는 시기를 식별하는 데 사용됩니다.

드래그섀도우:

이 DragShadow클래스는 드래그되는 항목의 시각적 표현을 만드는 일을 담당합니다. 끌어오는 항목의 사용자 지정 시각적 표현을 제공하는 데 사용할 수 있는 선택적 구성 요소입니다. 드래그되는 뷰의 단순 불투명 이미지인 기본 드래그 그림자를 사용하는 것도 가능합니다.

클립데이터:

이 ClipData클래스는 끌어오는 항목과 관련된 데이터를 저장하는 역할을 합니다. 이 데이터는 텍스트, 이미지 또는 기타 유형의 데이터와 같이 항목과 연결하려는 모든 것이 될 수 있습니다. 이 메서드를 사용하여 일반 텍스트 데이터가 포함된 ClipData.newPlainText()새 개체를 만들 ClipData거나 모든 유형의 데이터가 포함된 사용자 지정 개체를 만들 수 있습니다 ClipData.

기본적인 부분들이었습니다. 이제 아이들을 위해 만들고 싶은 드래그 앤 드롭 게임에 대해 생각해 봅시다. 이를 구축하려면 View.setOnTouchListener() 및 View.OnDragEventListener() 에 대해 알아야 합니다 .

기본 개념만 공유하고 있습니다. 모양을 일치시키고 싶다고 가정합니다. 그것을 " 모양 맞추기 " 라고 부르자 . 나는 이 응용 프로그램에서 삼각형 모양의 물체를 가지고 있고 그것을 모양과 일치시키고 싶습니다. 이제 이 작은 응용 프로그램 만들기를 진행합니다.

1. File 을 클릭한 다음 New => New Project 를 클릭하십시오 .
2. 그런 다음 Kotlin 지원을 포함하고 다음을 클릭합니다.
3. 편의에 따라 최소 SDK를 선택하고 다음 버튼을 클릭합니다.
4. 그런 다음 빈 활동 => 다음 => 완료를 선택합니다 .

이 프로젝트에서 뷰 바인딩을 사용했습니다. 모듈에서 보기 바인딩을 활성화하려면 다음 예제와 같이 모듈 수준 파일에서 viewBinding빌드 옵션을 로 설정합니다.truebuild.gradle

buildFeatures {
    viewBinding = true
}

ImageViewxml 파일에는 도형을 표시하기 위한 것과 도형 위로 끌기 위한 두 가지 ivTriangle가 있습니다 .ivTriangleDrag

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Match the Shape"
        android:textAlignment="center"
        android:textSize="24sp" />

    <ImageView
        android:id="@+id/ivTriangle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:src="@drawable/ic_triangle" />

    <ImageView
        android:id="@+id/ivTriangleDrag"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:src="@drawable/ic_triangle_drag" />


</LinearLayout>

onTouch의 및 onDrag기능을 View.OnTouchListener그에 따라 구현할 것입니다 View.OnDragListener.

class MainActivity : AppCompatActivity(), View.OnTouchListener, View.OnDragListener{

..........
 override fun onTouch(v: View?, event: MotionEvent?): Boolean {
        ........
  }

 override fun onDrag(v: View?, event: DragEvent?): Boolean {
        .........
  }

}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    mViewBinding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(mViewBinding.root)

    mViewBinding.ivTriangleDrag.setOnTouchListener(this)
    mViewBinding.ivTriangle.setOnDragListener(this)

}

override fun onTouch(v: View?, event: MotionEvent?): Boolean {
    return if (event!!.action == MotionEvent.ACTION_DOWN) {
        val data = ClipData.newPlainText("", "")
        val shadowBuilder = DragShadowBuilder(v)
        v?.startDragAndDrop(data, shadowBuilder, v, 0)
        true
    } else {
        false
    }
}

override fun onDrag(v: View?, event: DragEvent?): Boolean {
    when (event?.action) {
        ACTION_DRAG_STARTED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_STARTED");
        }
        ACTION_DRAG_ENTERED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENTERED")
        }
        ACTION_DRAG_EXITED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_EXITED")
        }
        ACTION_DRAG_LOCATION -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_LOCATION")
        }
        ACTION_DRAG_ENDED -> {
            Log.d(msg, "Action is DragEvent.ACTION_DRAG_ENDED")
        }
        ACTION_DROP -> {
            Log.d(msg, "ACTION_DROP event")
            mViewBinding.ivTriangle.setImageResource(R.drawable.ic_triangle_drag)
            mViewBinding.ivTriangleDrag.visibility = INVISIBLE
            Toast.makeText(this@MainActivity,"You have matched the shape!!",Toast.LENGTH_SHORT).show()
        }

    }
    return true
}

이 기사가 도움이 되길 바랍니다. 전체 코드를 확인하려면 여기 Repository가 있습니다 .

기사가 마음에 들면 Android 개발에 대한 더 흥미로운 주제를 위해 저를 팔로우하세요.

행복한 코딩! :)