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

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

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

لنقل تطبيقك إلى Compose، اتّبِع الخطوات التالية:

1. أنشئ شاشات جديدة باستخدام Compose.
2. أثناء إنشاء الميزات، حدِّد العناصر القابلة لإعادة الاستخدام وابدأ في إنشاء مكتبة من مكوّنات واجهة المستخدم الشائعة.
3. استبدِل الميزات الحالية شاشة واحدة في كل مرة.

أنشئ شاشات جديدة باستخدام Compose

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

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

لاستخدام Compose في جزء، عليك عرض ComposeView في onCreateView() طريقة مراحل نشاط الجزء. تحتوي 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 في شاشة حالية مستندة إلى العرض إذا كانت الميزة الجديدة التي تضيفها جزءًا من شاشة حالية. لإجراء ذلك، أضِف 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، يُرجى الاطّلاع على واجهات برمجة التطبيقات لإمكانية التشغيل التفاعلي.

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

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

إزالة الفراغات ومكوِّن التنقّل

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

مراجع إضافية

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

• درس تطبيقي حول الترميز
  • نقل البيانات إلى Jetpack Compose: تعرَّف على كيفية نقل أجزاء من تطبيق Sunflower إلى Compose في هذا الدرس التطبيقي حول الترميز.
• منشورات مدوَّنة
  • نقل Sunflower إلى Jetpack Compose: تعرَّف على كيفية نقل Sunflower إلى Compose باستخدام الاستراتيجية الموضّحة في هذه الصفحة.
  • التشغيل التفاعلي في Jetpack Compose: استخدام Compose في RecyclerView: تعرَّف على كيفية استخدام Compose بكفاءة في RecyclerView.

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

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