تمت ترجمة هذه الصفحة بواسطة 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

يبدو هذا الرمز تمامًا مثل الرمز الذي يظهر في تطبيق "الإنشاء" فقط.

`ViewCompositionStrategy` لـ `ComposeView`

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

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