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

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

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

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

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

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

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

अन्य संसाधन

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