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

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

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

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

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

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

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

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

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

عند استخدام أداة "الإنشاء" لإنشاء شاشات جديدة في تطبيقك الحالي، سيظلّ عملك خاضعًا لقيود بنية تطبيقك. في حال استخدام الأقسام ومكوِّن التنقل، عليك إنشاء جزء جديد ووضع محتواه في 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()
            }
        }
    }
}

اطّلع على 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>

بعد تضخيم العرض، يمكنك الإشارة لاحقًا إلى ComposeView في التدرّج الهرمي واستدعاء setContent().

لمزيد من المعلومات عن ComposeView، اطّلِع على واجهات برمجة التطبيقات للتوافق.

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

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

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

استبدال الميزات الحالية بميزة "الكتابة"

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

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

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

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

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

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

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

إزالة المكوّنين "المقاطع" و"التنقّل"

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

مصادر إضافية

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

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

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