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

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

Compose में, इसी काम के लिए Lazy lists का इस्तेमाल किया जा सकता है. इस पेज पर बताया गया है कि 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

    Composable

    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 लैंबडा में, अपने डेटा के लिए सही कंपोज़ेबल आइटम को लागू करें:

    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

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

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

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

अन्य संसाधन

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