אסטרטגיית ההעברה

אם יש לכם אפליקציה קיימת שמבוססת על View, יכול להיות שלא תרצו לשכתב את כל ממשק המשתמש שלה בבת אחת. בדף הזה מוסבר איך להוסיף רכיבי Compose חדשים לאפליקציה קיימת. כדי להתחיל להשתמש ב-Compose באפליקציה, אפשר לעיין במאמר בנושא הגדרה של Compose באפליקציה קיימת.

המסגרת Jetpack Compose תוכננה עם יכולת פעולה הדדית של View כבר מההתחלה. הפונקציונליות הזו מאפשרת להעביר את האפליקציה הקיימת שמבוססת על View ל-Compose, ועדיין להוסיף תכונות חדשות. כדי לעבור ל-Compose, מומלץ לבצע העברה מצטברת שבה Compose ו-Views מתקיימים יחד בבסיס הקוד עד שהאפליקציה עוברת באופן מלא ל-Compose.

כדי להעביר את האפליקציה ל-Compose, פועלים לפי השלבים הבאים:

1. ליצור מסכים חדשים באמצעות Compose.
2. במהלך פיתוח התכונות, כדאי לזהות רכיבים שאפשר להשתמש בהם שוב ולהתחיל ליצור ספרייה של רכיבים נפוצים בממשק המשתמש.
3. להחליף את התכונות הקיימות, מסך אחד בכל פעם.

יצירת מסכים חדשים באמצעות Compose

הדרך הכי טובה לעבור לשימוש ב-Compose היא להשתמש בו כדי ליצור תכונות חדשות שמוצגות במסך מלא. באמצעות האסטרטגיה הזו, תוכלו להוסיף תכונות וליהנות מהיתרונות של Compose, ועדיין לענות על הצרכים העסקיים של החברה.

כשמשתמשים ב-Compose כדי ליצור מסכים חדשים באפליקציה קיימת, עדיין עובדים במסגרת המגבלות של ארכיטקטורת האפליקציה. אם אתם משתמשים ב-Fragments וברכיב Navigation, תצטרכו ליצור Fragment חדש ולהוסיף את התוכן שלו ב-Compose.

כדי להשתמש ב-Compose ב-Fragment, מחזירים ComposeView בשיטת מחזור החיים onCreateView() של ה-Fragment. ל-ComposeView יש שיטה שבה אפשר לספק פונקציה שאפשר להרכיב.setContent()

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

מידע נוסף זמין במאמר ComposeView in Fragments.

הוספת תכונות חדשות למסכים קיימים

אפשר גם להשתמש ב-Compose במסך קיים שמבוסס על View, אם התכונה החדשה שאתם מוסיפים היא חלק ממסך קיים. כדי לעשות את זה, מוסיפים ComposeView לתצוגה ההיררכית, בדיוק כמו כל תצוגה אחרת.

לדוגמה, נניח שרוצים להוסיף תצוגת ילד ל-LinearLayout. כך עושים זאת ב-XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

אחרי שהתצוגה מתרחבת, אפשר להפנות בהמשך אל ComposeView בהיררכיה ולקרוא ל-setContent().

מידע נוסף על ComposeView זמין במאמר ממשקי API של יכולת פעולה הדדית.

יצירת ספרייה של רכיבים נפוצים בממשק המשתמש

במהלך יצירת התכונות באמצעות Compose, תבינו מהר מאוד שאתם יוצרים ספרייה של רכיבים. יצירת ספרייה של רכיבי ממשק משתמש משותפים מאפשרת לכם ליצור מקור מידע אמין אחד לרכיבים האלה באפליקציה שלכם, ולקדם שימוש חוזר בהם. אחרי זה, התכונות שאתם יוצרים יכולות להסתמך על הספרייה הזו. הטכניקה הזו שימושית במיוחד אם אתם בונים מערכת עיצוב בהתאמה אישית ב-Compose.

בהתאם לגודל האפליקציה, יכול להיות שהספרייה הזו תהיה חבילה נפרדת, מודול או מודול ספרייה. מידע נוסף על ארגון מודולים באפליקציה זמין במדריך למודולריזציה של אפליקציות ל-Android.

החלפת התכונות הקיימות ב-Compose

בנוסף לשימוש ב-Compose כדי ליצור תכונות חדשות, כדאי להעביר בהדרגה תכונות קיימות באפליקציה כדי ליהנות מ-Compose.

שימוש ב-Compose בלבד באפליקציה יכול להאיץ את הפיתוח וגם להקטין את גודל ה-APK ואת זמני הבנייה של האפליקציה. מידע נוסף זמין במאמר השוואה בין הביצועים של Compose ו-View.

מסכים פשוטים

כשמעבירים תכונות קיימות ל-Compose, כדאי להתחיל עם מסכים פשוטים. מסכים פשוטים יכולים להיות מסך פתיחה, מסך אישור או מסך הגדרות שבו הנתונים שמוצגים בממשק המשתמש הם יחסית סטטיים.

לוקחים את קובץ ה-XML הבא:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

אפשר לכתוב מחדש את קובץ ה-XML בכמה שורות בכלי הכתיבה:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

תצוגה משולבת ומסכי כתיבה

מסך שכבר מכיל קצת קוד Compose הוא מועמד טוב נוסף להעברה מלאה ל-Compose. בהתאם למורכבות המסך, אפשר להעביר אותו כולו ל-Compose או לעשות זאת חלק אחר חלק. אם המסך התחיל עם Compose בעץ משנה של היררכיית ממשק המשתמש, תמשיכו להעביר רכיבי ממשק משתמש עד שכל המסך יהיה ב-Compose. הגישה הזו נקראת גם גישת מלמטה למעלה.

הסרת רכיבים של Fragments ו-Navigation

אפשר לבצע מיגרציה ל-Navigation Compose אחרי שמסירים את כל רכיבי ה-Fragment ומחליפים אותם ברכיבי Composable מקבילים ברמת המסך. רכיבי Composable ברמת המסך יכולים להכיל שילוב של תוכן Compose ותוכן View, אבל כל יעדי הניווט צריכים להיות רכיבי Composable כדי לאפשר העברה של Navigation Compose. עד אז, כדאי להמשיך להשתמש ברכיב הניווט מבוסס-Fragment בבסיס הקוד המעורב של View ו-Compose. מידע נוסף זמין במאמר העברת ניווט ב-Jetpack לניווט ב-Compose.

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

כדאי לעיין במקורות המידע הנוספים הבאים כדי לקבל מידע נוסף על העברת אפליקציה קיימת מבוססת-View אל Compose:

• Codelab
  • מעבר ל-Jetpack Compose: במעבדת הקוד הזו מוסבר איך להעביר חלקים מאפליקציית Sunflower ל-Compose.
• פוסטים בבלוג
  • העברת Sunflower ל-Jetpack Compose: במאמר הזה מוסבר איך בוצעה ההעברה של Sunflower ל-Compose באמצעות האסטרטגיה שמתוארת בדף הזה.
  • ‫Jetpack Compose Interop: Using Compose in a RecyclerView: איך משתמשים ב-Compose ב-RecyclerView בצורה יעילה.

השלבים הבאים

עכשיו, אחרי שאתם יודעים איזו אסטרטגיה מתאימה להעברת האפליקציה הקיימת שלכם שמבוססת על View, כדאי לעיין בממשקי ה-API של Interoperability כדי לקבל מידע נוסף.