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

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

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

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

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

  1. टिप्पणी करें या अपने यूज़र इंटरफ़ेस (यूआई) हैरारकी से 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 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

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