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

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

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

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

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 में माइग्रेट करने के बारे में ज़्यादा जानकारी के लिए, ये संसाधन देखें: