„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 dem Erstellungsbasierten Bildschirm basierenden Bildschirm erstellen möchten, lassen Sie Ihre Aktivität die Methode setContent() aufrufen und beliebige zusammensetzbare Funktionen übergeben.

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

ViewCompositionStrategy legt fest, wann die Komposition entfernt werden soll. Die Standardeinstellung ViewCompositionStrategy.Default verwendet die Komposition, wenn sich der zugrunde liegende ComposeView vom Fenster trennt, es sei denn, sie ist Teil eines Pooling-Containers wie RecyclerView. In einer Compose-Anwendung mit einer einzigen Aktivität ist dieses Standardverhalten erwünscht. Wenn Sie jedoch Compose inkrementell zu Ihrer Codebasis hinzufügen, kann dieses Verhalten in einigen Szenarien zu Zustandsverlusten führen.

Rufen Sie zum Ändern der ViewCompositionStrategy 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 angeordnet, wenn das zugrunde liegende ComposeView-Element 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 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 Inhalte der Benutzeroberfläche „Compose“ in ein Fragment oder ein vorhandenes Ansichtslayout einbinden möchten, verwenden Sie ComposeView und rufen Sie die zugehörige Methode setContent() auf. ComposeView ist ein Android-View.

Du kannst das ComposeView wie jedes andere View in dein 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

Erhöhen Sie im Kotlin-Quellcode das Layout der in XML definierten Layoutressource. Anschließend kannst du die ComposeView mithilfe der XML-ID abrufen, eine Kompositionsstrategie festlegen, die für den Host View am besten geeignet ist, und setContent() aufrufen, um die Funktion „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 die Ansichtsbindung auch verwenden, um Verweise auf ComposeView zu erhalten, indem 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

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

Sie können ComposeView auch direkt in ein Fragment einfügen, wenn der Vollbildmodus mit der Funktion „Compose“ erstellt wird. So vermeiden Sie die Verwendung einer XML-Layoutdatei.

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 mehrere ComposeView-Elemente im selben Layout vorhanden sind, 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 der zusammensetzbaren Funktionen im Layout-Editor anzeigen

Für Ihr XML-Layout, das ein ComposeView enthält, können Sie zusammensetzbare Funktionen auch im Layout-Editor als Vorschau ansehen. So können Sie sehen, wie Ihre zusammensetzbaren Funktionen in einem gemischten Layout mit Ansichten und „Schreiben“ aussehen.

Angenommen, Sie möchten die folgende zusammensetzbare Funktion im Layout-Editor anzeigen. Mit @Preview gekennzeichnete zusammensetzbare Funktionen eignen sich gut für die Vorschau im Layout-Editor.

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

Um diese zusammensetzbare Funktion anzuzeigen, verwenden Sie das Tool-Attribut tools:composableName und legen Sie als Wert den voll qualifizierten Namen der zusammensetzbaren Funktion fest, die 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 das Schreiben in Views. Sehen Sie sich nun an, wie Sie Views in Compose verwenden.

Empfehlungen für dich

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