RecyclerView को लेज़ी लिस्ट पर माइग्रेट करना

RecyclerView एक व्यू कॉम्पोनेंट है. इसकी मदद से, डेटा के बड़े सेट को आसानी से दिखाया जा सकता है. डेटा सेट में हर आइटम के लिए व्यू बनाने के बजाय, RecyclerView आपके ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाता है. इसके लिए, वह व्यू का एक छोटा पूल बनाता है और उन आइटम को स्क्रोल करने पर, उन व्यू को फिर से इस्तेमाल करता है.

'लिखें' टैब में, लेज़ी सूचियों का इस्तेमाल करके भी ऐसा किया जा सकता है. इस पेज पर, RecyclerView को लागू करने के तरीके को Compose में, लेट-लोड होने वाली सूचियों का इस्तेमाल करने के लिए माइग्रेट करने का तरीका बताया गया है.

माइग्रेट करने का तरीका

RecyclerView को Compose में माइग्रेट करने के लिए, यह तरीका अपनाएं:

  1. अपनी यूज़र इंटरफ़ेस (यूआई) हैरारकी से RecyclerView को हटाएं या उस पर टिप्पणी करें. अगर हैरारकी में कोई ComposeView मौजूद नहीं है, तो उसे बदलने के लिए 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 सबक्लास से मैप होता है. हालांकि, ऐसा हमेशा नहीं होता. इन कॉम्पोज़ेबल का इस्तेमाल, आपकी सूची में अलग-अलग तरह के एलिमेंट के यूज़र इंटरफ़ेस (यूआई) के तौर पर किया जाएगा:

    @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 lambda फ़ंक्शन में, अपने डेटा के लिए सही कॉम्पोज़ेबल आइटम को इनवोक करें:

    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 में, आइटम को सजाने की सुविधा नहीं है. इसके बजाय, सूची में सीधे कॉम्पोज़िशन में कोई भी यूज़र इंटरफ़ेस (यूआई) डेकोरेशन जोड़ा जा सकता है. उदाहरण के लिए, सूची में डिवाइडर जोड़ने के लिए, हर आइटम के बाद Divider कॉम्पोज़ेबल का इस्तेमाल किया जा सकता है:

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

आइटम के ऐनिमेशन

अडैप्टर में बदलाव होने पर, आइटम के दिखने के तरीके को ऐनिमेट करने के लिए, ItemAnimator को RecyclerView पर सेट किया जा सकता है. डिफ़ॉल्ट रूप से, RecyclerView DefaultItemAnimator का इस्तेमाल करता है. यह इवेंट हटाने, जोड़ने, और एक से दूसरी जगह ले जाने पर बुनियादी ऐनिमेशन दिखाता है.

animateItemPlacement मॉडिफ़ायर की मदद से, लेज़ी लिस्ट का कॉन्सेप्ट भी ऐसा ही होता है. ज़्यादा जानने के लिए, आइटम ऐनिमेशन देखें.

अन्य संसाधन

RecyclerView को Compose में माइग्रेट करने के बारे में ज़्यादा जानकारी के लिए, ये संसाधन देखें: