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

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

يمكنك إضافة واجهة مستخدم مستندة إلى Compose إلى تطبيق حالي يستخدم تصميمًا مستندًا إلى View.

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

لتغيير ViewCompositionStrategy، استدعِ طريقة setViewCompositionStrategy() وقدِّم استراتيجية مختلفة.

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

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

`ComposeView` في "المقاطع"

إذا أردت دمج محتوى واجهة مستخدم Compose في جزء أو تخطيط View حالي، استخدِم 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، واضبط استراتيجية Composition الأنسب للعنصر المضيف 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

بدلاً من ذلك، يمكنك أيضًا استخدام View Binding للحصول على مراجع إلى 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 في التسلسل الهرمي لواجهة مستخدم View. يتم عرض النص "Hello Android!‎" من خلال أداة TextView. يتم عرض النص "Hello Compose!" من خلال عنصر نصي قابل للإنشاء في Compose.

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

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

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

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