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

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

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

مراحل نقل تطبيق يستند إلى العرض إلى Compose
الشكل 1. مراحل نقل تطبيق يستند إلى العرض إلى 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()
            }
        }
    }
}

لمزيد من المعلومات، يمكنك الاطّلاع على ComposeView في Fragments.

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

شاشة حالية تتضمّن Views وCompose
الشكل 3 شاشة حالية تتضمّن Views وCompose

يمكنك أيضًا استخدام 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>

بعد تضخيم العرض، يمكنك لاحقًا الرجوع إلى 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>

يمكن إعادة كتابة ملف 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))
        }
    }
}

شاشات العرض المختلط وCompose

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

النهج التصاعدي لنقل واجهة مستخدم مختلطة بين Views وCompose إلى Compose
الشكل 4 نهج تصاعدي لنقل واجهة مستخدم مختلطة بين Views وCompose إلى Compose

إزالة المكوّنَين Fragments وNavigation

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

مراجع إضافية

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

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

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