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

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

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

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

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

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

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

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

מסך חדש שנכתב ב-Compose
איור 2. מסך חדש שנכתב ב-Compose

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

כדי להשתמש ב-Compose ב-Fragment, צריך להחזיר ComposeView ב-method של מחזור החיים 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. מסך קיים עם תצוגות שונות ו'כתיבה'

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

@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

הסרת קטעים ורכיב הניווט

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

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

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

השלבים הבאים

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