يمكنك إضافة واجهة مستخدم مستندة إلى 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!") }
يبدو هذا الرمز تمامًا مثل الرمز الذي تجده في تطبيق Compose فقط.
ViewCompositionStrategy لـ ComposeView
يحدّد ViewCompositionStrategy متى يجب التخلص من Composition. تتخلص القيمة التلقائية،
ViewCompositionStrategy.Default،
من Composition عندما يتم فصل
ComposeView
الأساسي عن النافذة، ما لم يكن جزءًا من حاوية تجميع مثل
RecyclerView. في تطبيق يتضمّن نشاطًا واحدًا فقط باستخدام Compose، يكون هذا السلوك التلقائي هو ما تريده، ولكن إذا كنت تضيف Compose بشكل تدريجي في قاعدة الرموز البرمجية، قد يتسبّب هذا السلوك في فقدان الحالة في بعض السيناريوهات.
لتغيير ViewCompositionStrategy، استخدِم طريقة setViewCompositionStrategy()
وقدِّم استراتيجية مختلفة.
يلخّص الجدول أدناه السيناريوهات المختلفة التي يمكنك استخدام
ViewCompositionStrategy فيها:
| ViewCompositionStrategy | الوصف وسيناريو التشغيل التفاعلي | 
|---|---|
| DisposeOnDetachedFromWindow | سيتم إيقاف Composition نهائيًا عند فصل ComposeViewالأساسي عن النافذة. تم استبدالها منذ ذلك الحين بـDisposeOnDetachedFromWindowOrReleasedFromPool.سيناريو التوافق: * ComposeViewسواء كان العنصر الوحيد في بنية العرض أو في سياق شاشة مختلطة من View/Compose (ليس في Fragment). | 
| DisposeOnDetachedFromWindowOrReleasedFromPool(تلقائي) | على غرار DisposeOnDetachedFromWindow، عندما لا يكون العمل الموسيقي في حاوية تجميع، مثلRecyclerViewإذا كان في حاوية تجميع، سيتم التخلص منه عندما تنفصل حاوية التجميع نفسها عن النافذة، أو عندما يتم تجاهل العنصر (أي عندما تكون المجموعة ممتلئة).سيناريو التشغيل التفاعلي: * ComposeViewما إذا كان العنصر الوحيد في بنية العرض أو في سياق شاشة مختلطة من "عرض" و"إنشاء" (ليس في Fragment).* ComposeViewكعنصر في حاوية تجميع، مثلRecyclerView | 
| DisposeOnLifecycleDestroyed | سيتم إيقاف Composition نهائيًا عند إيقاف Lifecycleالمقدَّم.سيناريو التشغيل التفاعلي * ComposeViewفي "طريقة العرض" الخاصة بـ Fragment. | 
| DisposeOnViewTreeLifecycleDestroyed | سيتم التخلص من Composition عندما يتم إتلاف Lifecycleالذي يملكهLifecycleOwnerالذي تم عرضه بواسطةViewTreeLifecycleOwner.getفي النافذة التالية التي تم ربط العرض بها.سيناريو التشغيل التفاعلي: * ComposeViewفي "طريقة العرض" الخاصة بـ "الجزء".*  ComposeViewفي طريقة عرض لم يتم تحديد حالة Lifecycle فيها بعد | 
ComposeView في "المقاطع"
إذا أردت دمج محتوى Compose UI في جزء أو تخطيط 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>
في رمز مصدر 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 } }
بدلاً من ذلك، يمكنك أيضًا استخدام 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 } }
 
 
الشكل 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!") } } } } }
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 // ... } ) } }
يتم تحديد أرقام تعريف ComposeView في الملف res/values/ids.xml:
<resources> <item name="compose_view_x" type="id" /> <item name="compose_view_y" type="id" /> </resources>
معاينة العناصر القابلة للإنشاء في "أداة تعديل التنسيق"
يمكنك أيضًا معاينة العناصر القابلة للإنشاء داخل "أداة تعديل التصميم" لتصميم XML الذي يحتوي على ComposeView. يتيح لك ذلك معرفة شكل العناصر القابلة للإنشاء
ضمن تنسيق مختلط من طرق العرض وCompose.
لنفترض أنّك تريد عرض الدالة البرمجية القابلة للإنشاء التالية في "أداة تعديل التصميم". يُرجى العِلم أنّ الدوال البرمجية القابلة للإنشاء التي تمّت إضافة التعليق التوضيحي @Preview إليها هي خيارات مناسبة للمعاينة في "محرّر التصميم".
@Preview @Composable fun GreetingPreview() { Greeting(name = "Android") }
لعرض هذا العنصر القابل للإنشاء، استخدِم السمة 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>

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