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

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

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

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

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
    }
}

  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`
    }
}

    आपके RecyclerView.Adapter के onCreateViewHolder() और onBindViewHolder() तरीकों में मौजूद लॉजिक को इन कंपोज़ेबल और उन्हें दी गई स्थिति से बदल दिया जाएगा. Compose में, किसी आइटम के लिए कंपोज़ेबल बनाने और उसमें डेटा बाइंड करने के बीच कोई अंतर नहीं होता है. ये दोनों कॉन्सेप्ट एक साथ काम करते हैं.

  4. लेज़ी लिस्ट के content स्लॉट (ट्रेलिंग लैम्ब्डा पैरामीटर) में, items() फ़ंक्शन (या इसके जैसा कोई ओवरलोड) का इस्तेमाल करें, ताकि आपकी सूची के डेटा को बार-बार दोहराया जा सके. itemContent लैम्ब्डा में, अपने डेटा के लिए सही कंपोज़ेबल आइटम को कॉल करें:

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}

इस्तेमाल के सामान्य उदाहरण

आइटम की सजावट

RecyclerView में ItemDecoration का कॉन्सेप्ट है. इसका इस्तेमाल करके, सूची में मौजूद आइटम के लिए खास ड्रॉइंग जोड़ी जा सकती है. उदाहरण के लिए, आइटम के बीच डिवाइडर जोड़ने के लिए, ItemDecoration जोड़ा जा सकता है:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)

Compose में, आइटम डेकोरेशन जैसा कोई कॉन्सेप्ट नहीं है. इसके बजाय, कंपोज़िशन में सीधे तौर पर सूची में यूज़र इंटरफ़ेस (यूआई) की कोई भी सजावट जोड़ी जा सकती है. उदाहरण के लिए, सूची में डिवाइडर जोड़ने के लिए, हर आइटम के बाद Divider कंपोज़ेबल का इस्तेमाल किया जा सकता है:

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            HorizontalDivider()
        }
    }
}

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

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

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

अन्य संसाधन

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