खींचना और छोड़ना

Jetpack Compose में, खींचने और छोड़ने की सुविधा का इस्तेमाल करने के लिए, दो मॉडिफ़ायर उपलब्ध हैं:

  • dragAndDropSource: यह कंपोज़ेबल को ड्रैग जेस्चर के शुरुआती पॉइंट के तौर पर तय करता है
  • dragAndDropTarget: यह एक ऐसा कंपोज़ेबल तय करता है जो ड्रॉप किए गए डेटा को स्वीकार करता है

उदाहरण के लिए, उपयोगकर्ताओं को आपके ऐप्लिकेशन में किसी इमेज को खींचकर छोड़ने की सुविधा देने के लिए, एक इमेज कंपोज़ेबल बनाएं और dragAndDropSource मॉडिफ़ायर जोड़ें. ड्रॉप टारगेट सेट अप करने के लिए, एक और इमेज कंपोज़ेबल बनाएं और dragAndDropTarget मॉडिफ़ायर जोड़ें.

मॉडिफ़ायर को कई ड्रैग सोर्स और कई ड्रॉप टारगेट पर लागू किया जा सकता है.

मॉडिफ़ायर की मदद से, ऐप्लिकेशन दो या इससे ज़्यादा कंपोज़ेबल के बीच डेटा शेयर कर सकते हैं. इसके लिए, ClipData का इस्तेमाल किया जाता है. यह View के साथ काम करता है.

खींचने और छोड़ने के लिए सोर्स तय करना

किसी कॉम्पोनेंट में ड्रैग इवेंट चालू करने के लिए, dragAndDropSource मॉडिफ़ायर जोड़ें. यह फ़ंक्शन को पैरामीटर के तौर पर लेता है. इस फ़ंक्शन में, ट्रांसफ़र किए जा सकने वाले डेटा को दिखाने के लिए, DragAndDropTransferData का इस्तेमाल करें. डेटा, रिमोट यूआरआई, क्लिपबोर्ड पर मौजूद रिच टेक्स्ट डेटा, लोकल फ़ाइल वगैरह हो सकता है. हालांकि, इन सभी को ClipData ऑब्जेक्ट में रैप करना ज़रूरी है. सामान्य टेक्स्ट दें, उदाहरण के लिए:

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

खींचने और छोड़ने की कार्रवाई को ऐप्लिकेशन की सीमाओं से बाहर ले जाने की अनुमति देने के लिए, DragAndDropTransferData कंस्ट्रक्टर, flags आर्ग्युमेंट को स्वीकार करता है. यहां दिए गए उदाहरण में, DRAG_FLAG_GLOBAL कॉन्सटैंट से पता चलता है कि डेटा को एक ऐप्लिकेशन से दूसरे ऐप्लिकेशन में खींचकर छोड़ा जा सकता है:

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

DragAndDropTransferData, Android व्यू सिस्टम के साथ काम करने वाले फ़्लैग स्वीकार करता है. उपलब्ध फ़्लैग की पूरी सूची के लिए, व्यू कॉन्सटैंट की सूची देखें.

ड्रॉप डेटा पाएं

किसी कंपोज़ेबल को dragAndDropTarget मॉडिफ़ायर असाइन करें, ताकि कंपोज़ेबल को खींचने और छोड़ने वाले इवेंट मिल सकें. मॉडिफ़ायर में दो पैरामीटर होते हैं: पहला पैरामीटर, फ़िल्टर के तौर पर काम करता है और यह तय करता है कि मॉडिफ़ायर किस तरह का डेटा स्वीकार कर सकता है. वहीं, दूसरा पैरामीटर कॉलबैक में डेटा डिलीवर करता है.

ध्यान दें कि कॉलबैक इंस्टेंस को याद रखना चाहिए. यहां दिए गए स्निपेट में, कॉलबैक को याद रखने का तरीका बताया गया है:

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

अन्य ऐप्लिकेशन से डेटा पाने के लिए, requestDragAndDropPermission का इस्तेमाल करके डेटा पाने की सुविधा चालू करें. डेटा मिल जाने के बाद, इसे रिलीज़ करें:

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

यह याद रखना ज़रूरी है कि Compose कॉलबैक से मिला DragAndDropEvent, requestDragAndDropPermission तरीके से मिलने वाले से अलग होता है. इसलिए, आपको अनुमति के अनुरोध को पास करने से पहले, पैरामीटर पर toAndroidDragEvent() एक्सटेंशन फ़ंक्शन को कॉल करना होगा.

अगले स्निपेट में, ड्रॉप किए गए सादे टेक्स्ट को मैनेज करने का तरीका बताया गया है:

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

अगर इवेंट का इस्तेमाल किया जाता है, तो कॉलबैक फ़ंक्शन को true दिखाना चाहिए. इसके अलावा, अगर इवेंट को अस्वीकार कर दिया जाता है और वह पैरंट कॉम्पोनेंट पर लागू नहीं होता है, तो कॉलबैक फ़ंक्शन को false दिखाना चाहिए.

'खींचें और छोड़ें' इवेंट मैनेज करना

यूज़र इंटरफ़ेस (यूआई) और ऐप्लिकेशन के काम करने के तरीके को सटीक तरीके से कंट्रोल करने के लिए, 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
}

अन्य संसाधन

कोडलैब: Compose में खींचें और छोड़ें