„Schreiben“ in Ansichten verwenden

Sie können die auf dem Schreiben basierende UI in eine vorhandene App einbinden, die ein ansichtsbasiertes Design verwendet.

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 zusammensetzbare 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 Sie es in einer Anwendung nur zum Schreiben finden würden.

ViewCompositionStrategy für ComposeView

Mit ViewCompositionStrategy wird festgelegt, wann die Komposition entsorgt werden soll. Die Standardeinstellung ViewCompositionStrategy.Default, die Komposition verwirft, wenn die zugrunde liegende ComposeView löst sich vom Fenster, es sei denn, es ist Teil eines Pooling-Containers wie RecyclerView In einer App zum Schreiben einer einzelnen Aktivität ist dieses Standardverhalten was Sie möchten, wenn Sie die Funktion "Verfassen" schrittweise in Ihrem Codebasis zu verwenden, kann dieses Verhalten in einigen Szenarien zu Zustandsverlusten führen.

Rufen Sie zum Ändern der ViewCompositionStrategy die setViewCompositionStrategy() auf und eine andere Strategie bieten.

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. Interoperabilitätsszenario: * ComposeView, ob es sich um das einzige Element in der Ansichtshierarchie oder im Kontext eines gemischten Ansichts-/Erstellungsbildschirms handelt (nicht im Fragment).
DisposeOnDetachedFromWindowOrReleasedFromPool (Standard)	Ähnlich wie bei DisposeOnDetachedFromWindow, wenn sich die Komposition nicht in einem Pooling-Container wie einem RecyclerView befindet. Wenn es sich in einem Pooling-Container befindet, wird es verworfen, wenn sich der Pooling-Container selbst vom Fenster löst oder wenn das Element verworfen wird (d.h. wenn der Pool voll ist). Interoperabilitätsszenario: * ComposeView Ob es das einzige Element in der Ansichtshierarchie oder im Kontext eines gemischten Ansichts-/Erstellungsbildschirms ist (nicht im Fragment). * ComposeView als Element in einem Pooling-Container wie RecyclerView.
DisposeOnLifecycleDestroyed	Die Komposition wird entsorgt, wenn das bereitgestellte Lifecycle zerstört wird. Interoperabilitätsszenario * ComposeView in der Ansicht eines Fragments.
DisposeOnViewTreeLifecycleDestroyed	Die Komposition wird gelöscht, wenn das Lifecycle, das dem LifecycleOwner gehört, das ViewTreeLifecycleOwner.get des nächsten Fensters, an das die Ansicht angehängt ist, zurückgegeben wurde. Interoperabilitätsszenario: * ComposeView in der Ansicht eines Fragments. * ComposeView in einer Ansicht, deren Lebenszyklus noch nicht bekannt ist.

ComposeView in Fragmenten

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

Blenden Sie im Kotlin-Quellcode eine Inflation des Layouts aus dem Layout- Ressource in XML definiert. Hol dir dann das ComposeView anhand der XML-ID, lege eine Strategie für die Komposition fest, die am besten für den Host View und rufen Sie setContent() auf, um die Funktion „Schreiben“ 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 eine Ansichtsbindung verwenden, um Verweise auf die ComposeView durch Verweisen auf die generierte Bindungsklasse für Ihre XML-Layoutdatei:

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

Abbildung 1: Hier sehen Sie die Ausgabe des Codes, mit dem Compose-Elemente in einem UI-Hierarchie ansehen. 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 Compose-Elemente in einem gemischten Layout mit Ansichten und Compose-Elementen aussehen.

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

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

Wenn Sie dieses Composeable anzeigen möchten, verwenden Sie das tools:composableName-Attribut „Tools“ 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

Nächste Schritte

Sie kennen nun die Interoperabilitäts-APIs für die Funktion „Schreiben“ in Views. Ansichten in „Schreiben“ verwenden

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Weitere Hinweise
• Migrationsstrategie {:#migration-strategy}
• Leistung von „Erstellen“ und „Anzeigen“ vergleichen