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

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

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

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

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

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

          <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
        }
    }

  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`
        }
    }

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

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

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

সাধারণ ব্যবহারিক ক্ষেত্র

আইটেম সজ্জা

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

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

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

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

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

অ্যাডাপ্টারে পরিবর্তন করা হলে আইটেমের উপস্থিতি অ্যানিমেট করার জন্য RecyclerView-এ ItemAnimator সেট করা যেতে পারে। ডিফল্ট হিসেবে, RecyclerView DefaultItemAnimator ব্যবহার করে যা ইভেন্ট সরানো, যোগ করা ও সরানোর সময় বেসিক অ্যানিমেশন প্রদান করে।

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

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

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