تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

استخدام ميزة "الإنشاء" في طرق العرض

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

لإنشاء شاشة جديدة بالكامل قائمة على Compose، اتّبِع الخطوات التالية: يستدعي النشاط الطريقة setContent()، ويمرر أي دوال قابلة للإنشاء التي تريدها.

class ExampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { // In here, we can call composables!
            MaterialTheme {
                Greeting(name = "compose")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}InteroperabilityAPIsSnippets.kt

يشبه هذا الرمز تمامًا ما ستجده في تطبيق Compose فقط.

`ViewCompositionStrategy` لـ `ComposeView`

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

لتغيير ViewCompositionStrategy، اتّصِل بالرقم setViewCompositionStrategy(). منهجية مختلفة، وتقدم إستراتيجية مختلفة.

يلخّص الجدول التالي السيناريوهات المختلفة التي يمكنك استخدام ViewCompositionStrategy فيها:

`ViewCompositionStrategy`	سيناريو الوصف وعملية التشغيل التفاعلي
`DisposeOnDetachedFromWindow`	سيتم التخلص من التركيب عند فصل `ComposeView` الأساسي عن النافذة. تم استبداله منذ ذلك الحين بـ `DisposeOnDetachedFromWindowOrReleasedFromPool`. سيناريو التشغيل التفاعلي: * `ComposeView` سواء كان العنصر الوحيد في التسلسل الهرمي لعرض المحتوى، أو في سياق شاشة عرض/إنشاء مختلطة (وليس في المقتطف).
`DisposeOnDetachedFromWindowOrReleasedFromPool` (الإعداد التلقائي)	على غرار السمة `DisposeOnDetachedFromWindow`، عندما لا تكون المقطوعة الموسيقية في حاوية تجميع، مثل `RecyclerView`. إذا كانت الحزمة موجودة في حاوية تجميع، سيتم التخلص منها عند فصل حاوية التجميع نفسها عن النافذة، أو عند تجاهل العنصر (أي عندما يكون المسبح ممتلئًا). سيناريو إمكانية التشغيل التفاعلي: * `ComposeView` سواء كان هذا هو العنصر الوحيد في العرض الهرمي للعرض، أو في سياق شاشة عرض/إنشاء مختلطة (وليس في جزء من الصفحة). * `ComposeView` كعنصر في حاوية تجميع مثل `RecyclerView`.
`DisposeOnLifecycleDestroyed`	سيتم التخلص من التركيب عند إتلاف `Lifecycle` المقدَّمة. سيناريو التشغيل التفاعلي * `ComposeView` في عرض "العنصر"
`DisposeOnViewTreeLifecycleDestroyed`	سيتم التخلص من المقطوعة الموسيقية عند إتلاف `Lifecycle` التي تعود ملكيتها إلى `LifecycleOwner` والتي تم إرجاعها من خلال `ViewTreeLifecycleOwner.get` من النافذة التالية المرفقة بها. سيناريو إمكانية التشغيل التفاعلي: * `ComposeView` في عرض جزء. * `ComposeView` في عرض لا يُعرف فيه مسار الإحالة الناجحة بعد

`ComposeView` في "الأجزاء"

إذا كنت ترغب في دمج محتوى واجهة مستخدم Compose في جزء أو في طريقة عرض حالية التنسيق، استخدِم ComposeView واستدعاء setContent() . ComposeView هو الإصدار View من نظام التشغيل Android.

يمكنك وضع ComposeView في تنسيق XML تمامًا مثل أي View آخر:

<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

في رمز Kotlin المصدر، وسِّع التنسيق من مورد ملف تخطيط المحدَّد في XML. بعد ذلك، احصل على ComposeView باستخدام معرّف XML، يمكنك تحديد استراتيجية مقطوعة موسيقية تناسب المضيف View، والاتصال بـ setContent() لاستخدام Compose.

class ExampleFragmentXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_example, container, false)
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }
}InteroperabilityAPIsSnippets.kt

بدلاً من ذلك، يمكنك أيضًا استخدام ربط العرض للحصول على إحالات إلى ComposeView من خلال الإشارة إلى فئة الربط التي تم إنشاؤها لملف تنسيق XML:

class ExampleFragment : Fragment() {

    private var _binding: FragmentExampleBinding? = null

    // This property is only valid between onCreateView and onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        val view = binding.root
        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}InteroperabilityAPIsSnippets.kt

عنصران نصيان مختلفان قليلاً، أحدهما فوق الآخر

الشكل 1: يوضح هذا مخرجات التعليمة البرمجية التي تضيف عناصر Compose في عرض التدرّج الهرمي لواجهة المستخدم رسالة "مرحبًا Android!" يتم عرض النص بواسطة التطبيق المصغّر "TextView". يتم عرض النص "مرحبًا Compose" من خلال عنصر نص Compose.

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

class ExampleFragmentNoXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MaterialTheme {
                    // In Compose world
                    Text("Hello Compose!")
                }
            }
        }
    }
}InteroperabilityAPIsSnippets.kt

عدة نسخ افتراضية من "`ComposeView`" بالتنسيق نفسه

إذا كانت هناك عناصر ComposeView متعددة في التنسيق نفسه، يجب أن يكون لكل عنصر معرّف فريد لكي يعمل savedInstanceState.

class ExampleFragmentMultipleComposeView : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = LinearLayout(requireContext()).apply {
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_x
                // ...
            }
        )
        addView(TextView(requireContext()))
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_y
                // ...
            }
        )
    }
}InteroperabilityAPIsSnippets.kt

يتم تحديد أرقام تعريف ComposeView في ملف res/values/ids.xml:

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>ids.xml

معاينة العناصر القابلة للتجميع في "أداة تعديل التنسيق"

يمكنك أيضًا معاينة عناصر قابلة للإنشاء ضمن "محرِّر التنسيق" لتنسيق XML. تحتوي على ComposeView. يتيح لك ذلك الاطّلاع على شكل العناصر القابلة للتجميع ضمن تنسيق مختلط من "العروض" و"الإنشاء".

لنفترض أنّك تريد عرض العنصر التالي القابل للتجميع في "أداة تصميم التنسيقات". ملاحظة تكون العناصر القابلة للإنشاء التي تمت إضافة تعليقات توضيحية إليها باستخدام @Preview مرشحة بشكل جيد لمعاينتها في أداة تعديل التنسيق.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}InteroperabilityAPIsSnippets.kt

لعرض هذا العنصر القابل للتجميع، استخدِم سمة tools:composableName tools (الأدوات) و اضبط قيمتها على الاسم المؤهَّل بالكامل للعنصر القابل للتجميع لمعاينته في التنسيق.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/my_compose_view"
      tools:composableName="com.example.compose.snippets.interop.InteroperabilityAPIsSnippetsKt.GreetingPreview"
      android:layout_height="match_parent"
      android:layout_width="match_parent"/>

</LinearLayout>interop_layout_preview_composable.xml

عنصر قابل للتجميع معروض في "أداة تعديل التنسيق"

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

بعد أن تعرّفت على واجهات برمجة التطبيقات للتشغيل التفاعلي لاستخدام Compose في Views، تعرَّف على كيفية استخدام Views في Compose.

أفلام مُقترَحة لك

ملاحظة: يظهر نص الرابط عند إيقاف JavaScript
اعتبارات أخرى
استراتيجية نقل البيانات {:#migration-strategy}
مقارنة أداء "الكتابة" و"عرض"