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

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

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

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

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

  1. פיתוח מסכים חדשים באמצעות 'כתיבה'.
  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.

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

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

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

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

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

השלבים הבאים

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