드래그 앤 드롭

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

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

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

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

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

드래그 이벤트 시작

구성요소 내에서 드래그 이벤트를 사용 설정하려면 dragAndDropSource 수정자를 추가합니다. 이 함수는 정지 함수를 매개변수로 사용합니다. 함수가 사용자 정의 드래그 작업을 시작하는 상호작용을 나타냅니다. dragAndDropSource 수정자 포인터 입력 이벤트를 수신할 때까지 대기한 다음 람다를 실행 이벤트 핸들러로 전달됩니다. 람다를 사용하여 다양한 입력 이벤트 감지 탭이나 길게 누르기 등이 있습니다 자세한 내용은 포인터를 참조하세요. 입력을 참고하세요.

포인터 입력 이벤트는 일반적으로 길게 누르기로 다음과 같이 구현됩니다.

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        // Transfer data here.
    })
}
DragAndDropSnippets.kt

드래그 앤 드롭 세션을 시작하려면 startTransfer() 함수를 호출합니다. 이 범위 내에서 DragAndDropTransferData를 사용하여 데이터를 전송할 수 있습니다 데이터는 원격 URI, 웹 서버의 서식 있는 텍스트 데이터일 수 로컬 파일 등이 포함될 수 있지만 모두 단일 리전의 ClipData 객체. 예를 들어 다음과 같이 일반 텍스트를 제공합니다.

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                )
            )
        )
    })
}
DragAndDropSnippets.kt

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

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            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를 반환해야 합니다. 이벤트가 거부되고 상위 구성요소에 전파되지 않는 경우.

드래그 앤 드롭 이벤트 처리

다음과 같은 경우 관찰할 수 있도록 DragAndDropTarget 인터페이스의 콜백을 재정의합니다. 드래그 앤 드롭 이벤트 시작, 종료 또는 구성요소 들어가거나 나가기 다음과 같이 UI 및 앱 동작을 제어할 수 있습니다.

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에서 드래그 앤 드롭