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

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

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

השלבים בהעברה של אפליקציה מבוססת-View ל-Compose
איור 1. השלבים בהעברה של אפליקציה מבוססת-View ל-Compose

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

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

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

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

מסך חדש שנכתב ב-Compose
איור 2. מסך חדש שנכתב ב-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 ב-Fragments.

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

מסך קיים עם תצוגות מעורבות ועם חלון הכתיבה
איור 3. מסך קיים עם תצוגות מעורבות ועם כתיבה

אפשר גם להשתמש ב-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. הגישה הזו נקראת גם גישת מלמטה למעלה.

גישה מלמטה למעלה להעברת ממשק משתמש משולב של Views ו-Compose ל-Compose
איור 4. גישה מלמטה למעלה להעברת ממשק משתמש שמבוסס על Views ו-Compose ל-Compose

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

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

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

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

השלבים הבאים

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