RecyclerView را به لیست Lazy منتقل کنید

RecyclerView یک کامپوننت View است که نمایش کارآمد مجموعه‌های بزرگ داده‌ها را آسان می‌کند. به جای ایجاد View برای هر آیتم در مجموعه داده‌ها، RecyclerView با نگه داشتن مجموعه‌ای کوچک از Viewها و بازیابی آنها هنگام پیمایش در بین آن آیتم‌ها، عملکرد برنامه شما را بهبود می‌بخشد.

در Compose، می‌توانید از لیست‌های Lazy برای انجام همین کار استفاده کنید. این صفحه نحوه‌ی مهاجرت پیاده‌سازی RecyclerView خود را برای استفاده از لیست‌های Lazy در Compose شرح می‌دهد.

مراحل مهاجرت

برای انتقال پیاده‌سازی RecyclerView به Compose، مراحل زیر را دنبال کنید:

  1. RecyclerView از سلسله مراتب رابط کاربری خود حذف یا کامنت کنید و اگر هنوز RecyclerView در سلسله مراتب وجود ندارد، یک 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 خود، یک composable متناظر ایجاد کنید. هر نوع نما معمولاً به یک زیرکلاس ViewHolder نگاشت می‌شود، هرچند ممکن است همیشه اینطور نباشد. این composableها به عنوان نمایش رابط کاربری برای انواع مختلف عناصر در لیست شما استفاده می‌شوند: 

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    منطق موجود در متدهای onCreateViewHolder() و onBindViewHolder() از RecyclerView.Adapter شما با این composableها و حالتی که شما برای آنها فراهم می‌کنید جایگزین خواهد شد. در Compose، هیچ تفکیکی بین ایجاد یک composable برای یک آیتم و اتصال داده به آن وجود ندارد - این مفاهیم با هم ترکیب می‌شوند.

  4. درون جایگاه content لیست Lazy (پارامتر لامبدا انتهایی)، از تابع items() (یا یک overload معادل) برای پیمایش روی داده‌های لیست خود استفاده کنید. در لامبدا 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 composable بعد از هر آیتم استفاده کنید: 

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

انیمیشن‌های آیتم

می‌توان یک ItemAnimator روی RecyclerView تنظیم کرد تا ظاهر آیتم‌ها را با اعمال تغییرات در آداپتور، متحرک‌سازی کند. به طور پیش‌فرض، RecyclerView از DefaultItemAnimator استفاده می‌کند که انیمیشن‌های اولیه را در رویدادهای حذف، اضافه و جابجایی ارائه می‌دهد.

لیست‌های تنبل (lazy list) از طریق اصلاح‌کننده animateItemPlacement مفهوم مشابهی دارند. برای کسب اطلاعات بیشتر به بخش انیمیشن‌های آیتم مراجعه کنید.

منابع اضافی

برای اطلاعات بیشتر در مورد انتقال RecyclerView به Compose، به منابع زیر مراجعه کنید:

{% کلمه به کلمه %} {% فعل کمکی %} {% کلمه به کلمه %} {% فعل کمکی %}