ড্র্যাগ করে ড্রপ করুন

Jetpack Compose-এ দুটি মডিফায়ারের সাহায্যে টেনে নিয়ে রাখুন ফিচার কাজ করে:

  • dragAndDropSource: ড্র্যাগ জেসচারের শুরুর পয়েন্ট হিসেবে কম্পোজেবল নির্দিষ্ট করে
  • dragAndDropTarget: ড্রপ করা ডেটা গ্রহণ করে এমন কম্পোজেবল নির্দিষ্ট করে ডেটা

যেমন, আপনার অ্যাপে ব্যবহারকারীদের কোনও ছবি টেনে আনার সুবিধা দিতে, একটি ছবি কম্পোজেবল তৈরি করুন এবং dragAndDropSource মডিফায়ার যোগ করুন। ড্রপ টার্গেট সেট-আপ করতে, আরেকটি ইমেজ কম্পোজেবল তৈরি করুন এবং dragAndDropTarget মডিফায়ার যোগ করুন।

একাধিক ড্র্যাগ সোর্স ও ড্রপ টার্গেটে মডিফায়ার প্রয়োগ করা যেতে পারে।

মডিফায়ারগুলি অ্যাপগুলিকে ClipData ব্যবহার করে দুই বা ততোধিক কম্পোজেবলের মধ্যে ডেটা শেয়ার করতে সক্ষম করে, যা View ইমপ্লিমেন্টেশনের সাথে ইন্টারঅপারেবল।

টেনে আনার সোর্স নির্দিষ্ট করুন

কোনও কম্পোনেন্টের মধ্যে ড্র্যাগ ইভেন্ট চালু করতে, dragAndDropSource মডিফায়ার যোগ করুন। এটি প্যারামিটার হিসেবে একটি ফাংশন নেয়। এই ফাংশনের মধ্যে, ট্রান্সফার করা যায় এমন ডেটা দেখানোর জন্য DragAndDropTransferData ব্যবহার করুন। ডেটা রিমোট URI, ক্লিপবোর্ডে রিচ টেক্সট ডেটা, স্থানীয় ফাইল বা আরও অনেক কিছু হতে পারে, তবে সেগুলি সবই 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 রিটার্ন করবে।

টেনে নিয়ে রাখার ইভেন্ট ম্যানেজ করা

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
}

অতিরিক্ত রিসোর্স

কোডল্যাব: Compose-এ ড্র্যাগ-অ্যান্ড-ড্রপ