استراتيجية نقل البيانات

إذا كان لديك تطبيق حالي مستند إلى 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 مع الاستمرار في تلبية احتياجات شركتك التجارية.

شاشة جديدة مكتوبة بلغة 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 في "التقسيمات" لمزيد من المعلومات.

إضافة ميزات جديدة في الشاشات الحالية

شاشة حالية تتضمّن عروضًا مختلطة وCompose
الشكل 3. شاشة حالية تتضمّن عروضًا مختلطة وCompose

يمكنك أيضًا استخدام Compose في شاشة حالية مستندة إلى View إذا كانت الميزة الجديدة التي تضيفها جزءًا من شاشة حالية. لإجراء ذلك، أضِف ComposeView إلى عرض العناصر الهرمية، تمامًا مثل أي عنصر View آخر.

على سبيل المثال، لنفترض أنّك تريد إضافة طريقة عرض فرعية إلى 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، يمكنك الاطّلاع على واجهات برمجة التطبيقات الخاصة بإمكانية التشغيل التفاعلي.

إنشاء مكتبة لمكوّنات واجهة المستخدم الشائعة

أثناء إنشاء الميزات باستخدام Compose، ستدرك سريعًا أنّك ستنتهي بك المطاف إلى إنشاء مكتبة من المكوّنات. يتيح لك إنشاء مكتبة تضمّ مكوّنات شائعة في واجهة المستخدم توفير مصدر واحد للحقيقة لهذه المكوّنات في تطبيقك وتعزيز إمكانية إعادة استخدامها. يمكن أن تعتمد الميزات التي تنشئها بعد ذلك على هذه المكتبة. تكون هذه الطريقة مفيدة بشكل خاص عند إنشاء نظام تصميم مخصّص في Compose.

واستنادًا إلى حجم تطبيقك، يمكن أن تكون هذه المكتبة حزمة أو وحدة أو وحدة مكتبة منفصلة. لمزيد من المعلومات حول تنظيم الوحدات في تطبيقك، يمكنك الاطّلاع على دليل تقسيم تطبيقات Android إلى وحدات.

استبدال الميزات الحالية بميزة "إنشاء"

بالإضافة إلى استخدام 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 في 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 واستبدالها بعناصر قابلة للإنشاء على مستوى الشاشة. يمكن أن تحتوي العناصر القابلة للإنشاء على مستوى الشاشة على مزيج من محتوى Compose وView، ولكن يجب أن تكون جميع وجهات التنقّل عناصر قابلة للإنشاء لتفعيل عملية نقل Navigation Compose. وحتى ذلك الحين، عليك مواصلة استخدام مكوّن التنقّل المستند إلى Fragment في قاعدة الرموز المختلطة بين View وCompose. لمزيد من المعلومات، راجِع مقالة نقل بيانات Jetpack Navigation إلى Navigation Compose.

مراجع إضافية

اطّلِع على المراجع الإضافية التالية لمعرفة المزيد حول نقل تطبيقك الحالي المستند إلى View إلى Compose:

الخطوات التالية

بعد أن تعرّفت على الاستراتيجية التي يمكنك اتّخاذها لنقل تطبيقك الحالي المستند إلى View، يمكنك استكشاف واجهات برمجة التطبيقات الخاصة بالتوافق لمعرفة المزيد.