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

يمكنك إضافة واجهة مستخدم مستندة إلى 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 يحدّد الوقت الذي يجب فيه التخلّص من 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 في جزء أو تخطيط 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 عليها هي خيار مناسب للمعاينة في &quot;محرّر التصميم&quot;.

@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

العنصر القابل للإنشاء المعروض في &quot;محرّر التصميم&quot;

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

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