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

אם יש לכם אפליקציה קיימת שמבוססת על 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, ועדיין לתת מענה לצרכים העסקיים של החברה.

מסך חדש שנכתב ב-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 in 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 אחרי שמסירים את כל רכיבי ה-Fragment ומחליפים אותם ברכיבי Composable מקבילים ברמת המסך. רכיבי Composable ברמת המסך יכולים להכיל שילוב של תוכן Compose ותוכן View, אבל כל יעדי הניווט צריכים להיות רכיבי Composable כדי לאפשר העברה של Navigation Compose. עד אז, כדאי להמשיך להשתמש ברכיב הניווט מבוסס-Fragment בבסיס הקוד המעורב של View ו-Compose. מידע נוסף זמין במאמר העברת ניווט ב-Jetpack ל-Navigation Compose.

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

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

השלבים הבאים

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