يمكنك إضافة واجهة مستخدم مستندة إلى 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 و"وضع المشاهدة"