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

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

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

माइग्रेशन के चरण

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

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

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