„Schreiben“ in Ansichten verwenden

Sie können einer vorhandenen App, die ein ansichtenbasiertes Design verwendet, eine Compose-basierte Benutzeroberfläche hinzufügen.

Wenn Sie einen neuen, vollständig auf Compose basierenden Bildschirm erstellen möchten, rufen Sie in Ihrer Aktivität die Methode setContent() auf und übergeben Sie beliebige kompositionsfähige Funktionen.

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

Dieser Code sieht genauso aus wie der Code in einer reinen Compose-App.

ViewCompositionStrategy für ComposeView

Mit ViewCompositionStrategy wird festgelegt, wann die Komposition entsorgt werden soll. Bei der Standardeinstellung, ViewCompositionStrategy.Default, wird die Komposition entfernt, wenn sich das zugrunde liegende ComposeView vom Fenster löst, es sei denn, es ist Teil eines Pools-Containers wie RecyclerView. Bei einer App mit nur einer Aktivität und Compose ist dieses Standardverhalten wünschenswert. Wenn Sie Compose jedoch nach und nach in Ihre Codebasis einfügen, kann dies in einigen Fällen zu einem Statusverlust führen.

Wenn Sie ViewCompositionStrategy ändern möchten, rufen Sie die Methode setViewCompositionStrategy() auf und geben Sie eine andere Strategie an.

In der folgenden Tabelle sind die verschiedenen Szenarien zusammengefasst, in denen Sie ViewCompositionStrategy verwenden können:

ViewCompositionStrategy Beschreibung und Interoperabilitätsszenario
DisposeOnDetachedFromWindow Die Komposition wird freigegeben, wenn die zugrunde liegende ComposeView vom Fenster getrennt wird. Wurde inzwischen durch DisposeOnDetachedFromWindowOrReleasedFromPool ersetzt.

Interop-Szenario:

* ComposeView Ob es sich um das einzige Element in der Ansichtshierarchie handelt oder um einen gemischten Ansichts-/Compose-Bildschirm (nicht im Fragment).
DisposeOnDetachedFromWindowOrReleasedFromPool (Standard) Ähnlich wie bei DisposeOnDetachedFromWindow, wenn sich die Komposition nicht in einem Pooling-Container wie einem RecyclerView befindet. Wenn sich das Element in einem Pooling-Container befindet, wird es freigegeben, wenn sich der Pooling-Container selbst vom Fenster löst oder das Element verworfen wird (d.h. wenn der Pool voll ist).

Interop-Szenario:

* ComposeView ob es sich um das einzige Element in der Ansichtshierarchie handelt oder um einen gemischten Ansichts-/Compose-Bildschirm (nicht im Fragment).
* ComposeView als Element in einem Pooling-Container wie RecyclerView
DisposeOnLifecycleDestroyed Die Komposition wird freigegeben, wenn die bereitgestellte Lifecycle zerstört wird.

Interop-Szenario

* ComposeView in der Ansicht eines Fragments.
DisposeOnViewTreeLifecycleDestroyed Die Komposition wird entsorgt, wenn die Lifecycle, die dem LifecycleOwner gehört, der von ViewTreeLifecycleOwner.get des nächsten Fensters zurückgegeben wird, an das die Ansicht angehängt ist, zerstört wird.

Interop-Szenario:

* ComposeView in der Ansicht eines Fragments.
* ComposeView in einer Datenansicht, deren Lebenszyklus noch nicht bekannt ist.

ComposeView in Fragments

Wenn Sie Compose-UI-Inhalte in ein Fragment oder ein vorhandenes Ansichtslayout einbinden möchten, verwenden Sie ComposeView und rufen Sie die Methode setContent() auf. ComposeView ist ein Android-View.

Sie können das ComposeView wie jedes andere View in Ihr XML-Layout einfügen:

<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

Im Kotlin-Quellcode wird das Layout aus der in XML definierten Layoutressource aufgebläht. Rufe dann ComposeView mit der XML-ID ab, lege eine Kompositionstrategie fest, die für den Host View am besten geeignet ist, und rufe setContent() auf, um Compose zu verwenden.

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

Alternativ können Sie auch die Ansichtsbindung verwenden, um Verweise auf die ComposeView zu erhalten. Dazu müssen Sie auf die generierte Bindungsklasse für Ihre XML-Layoutdatei verweisen:

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

Zwei leicht unterschiedliche Textelemente, eines über dem anderen

Abbildung 1: Hier sehen Sie die Ausgabe des Codes, mit dem Compose-Elemente in einer View-UI-Hierarchie hinzugefügt werden. Der Text „Hallo Android!“ wird in einem TextView-Widget angezeigt. Der Text „Hallo Compose!“ wird von einem Textelement vom Typ „Compose“ angezeigt.

Sie können ComposeView auch direkt in ein Fragment einfügen, wenn Ihr Vollbildmodus mit Compose erstellt wurde. So können Sie eine XML-Layoutdatei vollständig vermeiden.

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

Mehrere ComposeView-Instanzen im selben Layout

Wenn sich im selben Layout mehrere ComposeView-Elemente befinden, muss jedes eine eindeutige ID haben, damit savedInstanceState funktioniert.

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

Die ComposeView-IDs sind in der Datei res/values/ids.xml definiert:

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>
ids.xml

Vorschau von Composeables im Layout-Editor

Sie können sich auch eine Vorschau von Composeables im Layout-Editor für Ihr XML-Layout ansehen, das eine ComposeView enthält. So können Sie sehen, wie Ihre Composeables in einem gemischten Layout mit Ansichten und Compose aussehen.

Angenommen, Sie möchten das folgende Composeable im Layout-Editor anzeigen. Mit @Preview annotierte Composeables eignen sich gut für die Vorschau im Layout-Editor.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}
InteroperabilityAPIsSnippets.kt

Wenn Sie dieses Composeable anzeigen möchten, verwenden Sie das Attribut tools:composableName und legen Sie als Wert den voll qualifizierten Namen des Composeables fest, das im Layout als Vorschau angezeigt werden soll.

<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

Im Layout-Editor angezeigte Elemente

Nächste Schritte

Nachdem Sie nun die APIs zur Interoperabilität kennen, mit denen Sie Compose in Ansichten verwenden können, erfahren Sie, wie Sie Ansichten in Compose verwenden.