드래그 앤 드롭

Jetpack Compose는 두 가지 수정자를 사용하여 드래그 앤 드롭을 지원합니다.

  • dragAndDropSource: 컴포저블을 드래그 동작의 시작점으로 지정합니다.
  • dragAndDropTarget: 드롭된 데이터를 허용하는 컴포저블을 지정합니다.

예를 들어 사용자가 앱에서 이미지를 드래그할 수 있도록 하려면 이미지 컴포저블을 만들고 dragAndDropSource 수정자를 추가합니다. 드롭 타겟을 설정하려면 다른 이미지 컴포저블을 만들고 dragAndDropTarget 수정자를 추가합니다.

수정자는 여러 드래그 소스와 여러 드롭 타겟에 적용할 수 있습니다.

수정자를 사용하면 앱이 View 구현과 상호 운용 가능한 ClipData를 사용하여 둘 이상의 컴포저블 간에 데이터를 공유할 수 있습니다.

드래그 소스 지정

구성요소 내에서 드래그 이벤트를 사용 설정하려면 dragAndDropSource 수정자를 추가합니다. 함수를 매개변수로 사용합니다. 이 함수 내에서 DragAndDropTransferData를 사용하여 전송 가능한 데이터를 나타냅니다. 데이터는 원격 URI, 클립보드의 서식 있는 텍스트 데이터, 로컬 파일 등이 될 수 있지만 모두 ClipData 객체에 래핑되어야 합니다. 예를 들어 다음과 같이 일반 텍스트를 제공합니다.

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        ClipData.newPlainText(
            "image Url", url
        )
    )
}
DragAndDropSnippets.kt

드래그 작업이 앱의 경계를 넘을 수 있도록 DragAndDropTransferData 생성자는 flags 인수를 허용합니다. 다음 예에서 DRAG_FLAG_GLOBAL 상수는 한 앱에서 다른 앱으로 데이터를 드래그할 수 있음을 지정합니다.

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        ClipData.newPlainText(
            "image Url", url
        ),
        flags = View.DRAG_FLAG_GLOBAL
    )
}
DragAndDropSnippets.kt

DragAndDropTransferData는 Android 뷰 시스템에서 지원하는 플래그를 허용합니다. 사용 가능한 플래그의 전체 목록은 View 상수 목록을 참고하세요.

삭제 데이터 수신

컴포저블에 dragAndDropTarget 수정자를 할당하여 컴포저블이 드래그 앤 드롭 이벤트를 수신할 수 있도록 합니다. 수정자에는 매개변수 두 개가 있습니다. 첫 번째 매개변수는 필터 역할을 하고 수정자가 허용할 수 있는 데이터의 종류를 지정하고 두 번째 매개변수는 콜백으로 데이터를 전달합니다.

콜백 인스턴스는 기억해야 합니다. 다음 스니펫은 콜백을 기억하는 방법을 보여줍니다.

val callback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            // Parse received data
            return true
        }
    }
}
DragAndDropSnippets.kt

다음 스니펫은 삭제된 일반 텍스트를 처리하는 방법을 보여줍니다.

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
    }, target = callback
)
DragAndDropSnippets.kt

콜백 함수는 이벤트가 소비되면 true를 반환하고 이벤트가 거부되어 상위 구성요소에 전파되지 않으면 false를 반환해야 합니다.

드래그 앤 드롭 이벤트 처리

UI와 앱 동작을 정밀하게 제어하기 위해 드래그 앤 드롭 이벤트가 시작되거나 종료되거나 구성요소에 들어가거나 나가는 시점을 관찰하도록 DragAndDropTarget 인터페이스의 콜백을 재정의합니다.

object : DragAndDropTarget {
    override fun onStarted(event: DragAndDropEvent) {
        // When the drag event starts
    }

    override fun onEntered(event: DragAndDropEvent) {
        // When the dragged object enters the target surface
    }

    override fun onEnded(event: DragAndDropEvent) {
        // When the drag event stops
    }

    override fun onExited(event: DragAndDropEvent) {
        // When the dragged object exits the target surface
    }

    override fun onDrop(event: DragAndDropEvent): Boolean = true
}
DragAndDropSnippets.kt

추가 리소스

Codelab: Compose에서 드래그 앤 드롭