העברת RecyclerView לרשימת 'עצלים'

‫RecyclerView הוא רכיב View שמאפשר להציג ביעילות מערכי נתונים גדולים. במקום ליצור תצוגות לכל פריט במערך הנתונים, RecyclerView משפרת את הביצועים של האפליקציה על ידי שמירה של מאגר קטן של תצוגות ושימוש חוזר בהן כשגוללים בין הפריטים.

ב-Compose, אפשר להשתמש ברשימות עצלניות כדי להשיג את אותה התוצאה. בדף הזה מוסבר איך אפשר להעביר את ההטמעה של RecyclerView לשימוש ברשימות Lazy ב-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. מחליטים איזה סוג של Lazy list composable צריך בהתאם למנהל הפריסה של 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 האלה ישמשו כייצוג של ממשק המשתמש לסוגים שונים של רכיבים ברשימה:

   @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 של הרשימה העצלנית (הפרמטר האחרון של lambda), משתמשים בפונקציה 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

ב-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 lists יש מושג דומה באמצעות המאפיין animateItemPlacement. מידע נוסף זמין במאמר בנושא אנימציות של פריטים.

מקורות מידע נוספים

למידע נוסף על העברת RecyclerView ל-Compose, אפשר לעיין במקורות המידע הבאים:

• רשימות ורשתות: תיעוד שמסביר איך להטמיע רשימות ורשתות ב-Compose.
• ‫Jetpack Compose Interop: Using Compose in a RecyclerView: פוסט בבלוג בנושא שימוש יעיל ב-Compose בתוך RecyclerView.