RecyclerView থেকে Lazy list-এ মাইগ্রেট করা

RecyclerView হল একটি ভিউ কম্পোনেন্ট যা প্রচুর পরিমাণে ডেটা সহজে ও দক্ষতার সাথে দেখাতে সাহায্য করে। ডেটা সেটের প্রতিটি আইটেমের জন্য ভিউ তৈরি করার পরিবর্তে, RecyclerView ভিউয়ের একটি ছোট পুল রেখে আপনার অ্যাপের পারফর্ম্যান্স উন্নত করে এবং আপনি আইটেমগুলির মধ্যে স্ক্রল করার সময় সেগুলিকে রিসাইকেল করে।

Compose-এ, একই কাজ করার জন্য আপনি লেজি লিস্ট ব্যবহার করতে পারবেন। এই পৃষ্ঠায় Compose-এ কীভাবে আপনার RecyclerView প্রয়োগকে লেজি লিস্ট ব্যবহার করার জন্য মাইগ্রেট করতে পারবেন তা বর্ণনা করা হয়েছে।

মাইগ্রেশনের ধাপ

আপনার RecyclerView ইমপ্লিমেন্টেশন Compose-এ মাইগ্রেট করতে, এইসব ধাপ অনুসরণ করুন:

1. আপনার UI হায়ারার্কি থেকে RecyclerView কমেন্ট আউট করুন বা সরিয়ে দিন এবং হায়ারার্কিতে এখনও কোনওটি না থাকলে, এটি রিপ্লেস করতে একটি ComposeView যোগ করুন। এটি হল লেজি তালিকার কন্টেনার যা আপনি যোগ করবেন:

         <FrameLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent">
   
     <!--    <androidx.recyclerview.widget.RecyclerView-->
     <!--            android:id="@+id/recycler_view"-->
     <!--            android:layout_width="match_parent"-->
     <!--            android:layout_height="match_parent />"-->
   
             <androidx.compose.ui.platform.ComposeView
                 android:id="@+id/compose_view"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent" />
   
         </FrameLayout>
   

2. আপনার RecyclerView-এর লেআউট ম্যানেজারের (নিচের সারণী দেখুন) উপর ভিত্তি করে, আপনার কোন ধরনের লেজি লিস্ট কম্পোজ করার মতো আইটেম প্রয়োজন তা নির্ধারণ করুন। আপনি যে কম্পোজ করার উপযুক্ত আইটেম বেছে নেবেন, সেটি আগের ধাপে আপনার যোগ করা ComposeView-এর টপ-লেভেল কম্পোজ করার উপযুক্ত আইটেম হবে।

   LayoutManager	কম্পোজেবল
   LinearLayoutManager	LazyColumn বা LazyRow
   GridLayoutManager	LazyVerticalGrid বা LazyHorizontalGrid
   StaggeredGridLayoutManager	LazyVerticalStaggeredGrid বা LazyHorizontalStaggeredGrid

   // recyclerView.layoutManager = LinearLayoutManager(context)
   composeView.setContent {
       LazyColumn(Modifier.fillMaxSize()) {
           // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
       }
   }
   MigrationCommonScenariosSnippets.kt

3. আপনার RecyclerView.Adapter ইমপ্লিমেন্টেশনে প্রতিটি ভিউ ধরনের জন্য একটি করে সংশ্লিষ্ট কম্পোজ করার মতো আইটেম তৈরি করুন। প্রতিটি ভিউয়ের ধরন সাধারণত একটি ViewHolder সাবক্লাসের সাথে ম্যাপ করা হয়, যদিও এটি সবসময় নাও হতে পারে। আপনার তালিকায় বিভিন্ন ধরনের এলিমেন্টের UI রিপ্রেজেন্টেশন হিসেবে এইসব কম্পোজেবল ব্যবহার করা হবে:

   @Composable
   fun ListItem(data: MyData, modifier: Modifier = Modifier) {
       Row(modifier.fillMaxWidth()) {
           Text(text = data.name)
           // … other composables required for displaying `data`
       }
   }
   MigrationCommonScenariosSnippets.kt

   আপনার RecyclerView.Adapter-এর onCreateViewHolder() ও onBindViewHolder() মেথডের লজিক এইসব কম্পোজ করার উপযুক্ত আইটেম ও সেগুলির সাথে আপনার দেওয়া স্টেট দ্বারা প্রতিস্থাপিত হবে। Compose-এ, কোনও আইটেমের জন্য কম্পোজ করার মতো আইটেম তৈরি করা এবং সেটিতে ডেটা বাইন্ড করার মধ্যে কোনও পার্থক্য নেই—এইসব ধারণা একত্রিত করা হয়েছে।

4. content লেজি লিস্টের স্লটের (ট্রেলিং ল্যাম্বডা প্যারামিটার) মধ্যে, আপনার তালিকার ডেটা ইটারেট করতে items() ফাংশন (বা সমতুল্য ওভারলোড) ব্যবহার করুন। itemContent ল্যাম্বডাতে, আপনার ডেটার জন্য উপযুক্ত কম্পোজ করার উপযুক্ত আইটেম ইনভোক করুন:

   val data = listOf<MyData>(/* ... */)
   composeView.setContent {
       LazyColumn(Modifier.fillMaxSize()) {
           items(data) {
               ListItem(it)
           }
       }
   }
   MigrationCommonScenariosSnippets.kt

সাধারণ ব্যবহারিক প্রয়োগ

আইটেম সজ্জা

RecyclerView-এ ItemDecoration-এর ধারণা আছে, যা আপনি তালিকার আইটেমের জন্য বিশেষ ড্রয়িং যোগ করতে ব্যবহার করতে পারেন। যেমন, আইটেমের মধ্যে বিভাজন রেখা যোগ করতে আপনি ItemDecoration যোগ করতে পারেন:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Compose-এ আইটেম সজ্জার সমতুল্য কোনও ধারণা নেই। পরিবর্তে, আপনি সরাসরি কম্পোজিশনে তালিকায় যেকোনও UI সজ্জা যোগ করতে পারেন। যেমন, তালিকায় ডিভাইডার যোগ করতে, আপনি প্রতিটি আইটেমের পরে Divider কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করতে পারেন:

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            HorizontalDivider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

আইটেম অ্যানিমেশন

অ্যাডাপ্টরে পরিবর্তন করা হলে, আইটেম কীভাবে দেখা যাবে তা অ্যানিমেট করতে RecyclerView-এ ItemAnimator সেট করা যেতে পারে। সাধারণত, RecyclerView ব্যবহার করে DefaultItemAnimator যা সরিয়ে দেওয়া, যোগ করা এবং ইভেন্ট সরানোর ক্ষেত্রে প্রাথমিক অ্যানিমেশন প্রদান করে।

animateItemPlacement মডিফায়ারের মাধ্যমে লেজি লিস্টের একই ধরনের কনসেপ্ট আছে। আরও জানতে আইটেম অ্যানিমেশন দেখুন।

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

RecyclerView থেকে Compose-এ মাইগ্রেট করা সম্পর্কে আরও জানতে, এইসব রিসোর্স দেখুন:

• তালিকা ও গ্রিড: Compose-এ কীভাবে তালিকা ও গ্রিড প্রয়োগ করতে হয় সেই সংক্রান্ত ডকুমেন্টেশন।
• Jetpack Compose Interop: Using Compose in a RecyclerView: RecyclerView-এর মধ্যে Compose দক্ষতার সাথে ব্যবহার করার জন্য ব্লগ পোস্ট।