खींचें और छोड़ें

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

• dragAndDropSource: किसी कॉम्पोज़ेबल को, खींचने और छोड़ने के जेस्चर के शुरू होने के पॉइंट के तौर पर तय करता है
• dragAndDropTarget: उस कॉम्पोज़ेबल के बारे में बताता है जिसमें ड्रॉप किया गया डेटा डाला जा सकता है

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

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

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

ध्यान दें: खींचें और छोड़ें सुविधा, सूची के सामान्य पैटर्न उठाकर एक जगह से दूसरी जगह ले जाएं से अलग है.

ड्रैग सोर्स तय करना

किसी कॉम्पोनेंट में खींचें और छोड़ें इवेंट चालू करने के लिए, dragAndDropSource मॉडिफ़ायर जोड़ें. यह फ़ंक्शन को पैरामीटर के तौर पर लेता है. इस फ़ंक्शन में, ट्रांसफ़र किए जा सकने वाले डेटा को दिखाने के लिए, DragAndDropTransferData का इस्तेमाल करें. डेटा, रिमोट यूआरआई, क्लिपबोर्ड पर मौजूद रिच टेक्स्ट डेटा, लोकल फ़ाइल वगैरह हो सकता है. हालांकि, इन सभी को 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 व्यू सिस्टम के साथ काम करने वाले फ़्लैग स्वीकार करता है. उपलब्ध फ़्लैग की पूरी सूची के लिए, व्यू कॉन्स्टेंट की सूची देखें.

ड्रॉप का डेटा पाना

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

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

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

दूसरे ऐप्लिकेशन से डेटा पाने के लिए, 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
        }
    }
}
DragAndDropSnippets.kt

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

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

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

अगर इवेंट का इस्तेमाल किया जाता है, तो कॉलबैक फ़ंक्शन को 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
}
DragAndDropSnippets.kt

अन्य संसाधन

कोडलैब: Compose में आइटम खींचकर छोड़ना