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

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

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

مراحل نقل بيانات تطبيق مستند إلى ملف الاطِّلاع إلى ميزة "الإنشاء"
الشكل 1. مراحل نقل بيانات تطبيق مستند إلى ملف الاطِّلاع إلى Compose

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

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

إنشاء شاشات جديدة باستخدام ميزة "إنشاء"

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

شاشة جديدة مكتوبة في Compose
الشكل 2. شاشة جديدة مكتوبة في ميزة "الإنشاء"

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

لاستخدام ميزة "إنشاء" في "جزء"، يجب عرض 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 في الأجزاء لمعرفة المزيد من المعلومات.

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

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

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

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

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

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

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

يمكن أن يؤدي ضبط إعداد تطبيقك في Compose فقط إلى تسريع وتيرة تطوير تطبيقك وتقليل حجم حِزم APK وإطالة مدة إنشاء التطبيق. راجع مقارنة أداء الإنشاء والعرض للحصول على مزيد من المعلومات.

الشاشات البسيطة

أول أماكن يجب البحث فيها عند نقل الميزات الحالية إلى ميزة "إنشاء" هي الشاشات البسيطة. يمكن أن تكون الشاشات البسيطة شاشة ترحيب أو شاشة تأكيد أو شاشة إعدادات تكون البيانات المعروضة فيها في واجهة المستخدم ثابتة نسبيًا.

خذ ملف 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 في ميزة "إنشاء" باستخدام بضعة أسطر:

@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. ويُعرف هذا النهج أيضًا باسم النهج من أسفل إلى أعلى.

النهج التصاعدي لنقل واجهة مستخدم مختلطة لعرض الرسائل وإنشاءها إلى ميزة &quot;إنشاء&quot;
الشكل 4. النهج التصاعدي لنقل واجهة مستخدم مختلطة من "الملف الشخصي" و"إنشاء" إلى "إنشاء"

إزالة الأجزاء ومكوِّن التنقل

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

مصادر إضافية

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

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

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