Trascina

Jetpack Compose supporta il trascinamento con due modificatori:

Ad esempio, per consentire agli utenti di trascinare un'immagine nella tua app, crea un'immagine componibile e aggiungi il modificatore dragAndDropSource. Per configurare un target di rilascio, crea un altro componibile immagine e aggiungi il modificatore dragAndDropTarget.

I modificatori possono essere applicati a più origini di trascinamento e a più destinazioni di rilascio.

I modificatori consentono alle app di condividere dati tra due o più composabili utilizzando ClipData, che è interoperabile con le implementazioni di View.

Specifica un'origine di trascinamento

Per attivare gli eventi di trascinamento all'interno di un componente, aggiungi il modificatore dragAndDropSource. Questa funzione accetta una funzione come parametro. All'interno di questa funzione, utilizza DragAndDropTransferData per rappresentare i dati trasferibili. I dati possono essere un URI remoto, dati RTF negli appunti, un file locale o altro, ma devono essere tutti contenuti in un oggetto ClipData. Fornisci un testo normale, ad esempio:

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

Per consentire all'azione di trascinamento di superare i confini dell'app, il costruttore DragAndDropTransferData accetta un argomento flags. Nell'esempio seguente, la costante DRAG_FLAG_GLOBAL specifica che i dati possono essere trascinati da un'app all'altra:

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

DragAndDropTransferData accetta i flag supportati dal sistema di visualizzazione Android. Consulta l'elenco delle costanti View per un elenco completo dei flag disponibili.

Ricevi dati di rilascio

Assegna il modificatore dragAndDropTarget a un composable per consentirgli di ricevere eventi di trascinamento. Il modificatore ha due parametri: il primo funge da filtro e specifica il tipo di dati che il modificatore può accettare, mentre il secondo fornisce i dati in un callback.

Tieni presente che l'istanza di callback deve essere memorizzata. Il seguente snippet mostra come ricordare il callback:

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

Per accettare dati da altre app, utilizza requestDragAndDropPermission per attivare la ricezione e rilasciala al termine:

val externalAppCallback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            val permission =
                activity.requestDragAndDropPermissions(event.toAndroidDragEvent())
            // Parse received data
            permission?.release()
            return true
        }
    }
}

È importante ricordare che l'oggetto DragAndDropEvent restituito dal callback di Compose è diverso da quello previsto dal metodo requestDragAndDropPermission, quindi devi chiamare la funzione di estensione toAndroidDragEvent() sul parametro prima di passarlo alla richiesta di autorizzazione.

Lo snippet successivo mostra come gestire il testo normale trascinato:

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
    }, target = callback // or externalAppCallback
)

La funzione di callback deve restituire true se l'evento viene utilizzato o false se l'evento viene rifiutato e non viene propagato al componente principale.

Gestisci gli eventi di trascinamento

Esegui l'override dei callback nell'interfaccia DragAndDropTarget per osservare quando un evento di trascinamento inizia, termina o entra o esce da un componente per un controllo preciso della UI e del comportamento dell'app:

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
}

Risorse aggiuntive

Codelab: Trascina e rilascia in Compose