Diese Seite wurde von der Cloud Translation API übersetzt.

„Schreiben“ in Ansichten verwenden

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

Wenn du einen neuen, komplett auf dem E-Mail-Schreibmodus basierenden Bildschirm erstellen möchtest, musst du dein Aktivität: Rufen Sie die Methode setContent() auf und übergeben Sie alle zusammensetzbaren Funktionen. die Ihnen gefallen.

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 definiert, wann die Komposition entfernt 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 Apps, bei denen nur eine Aktivität geschrieben wird, lautet 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, die Sie verwenden können ViewCompositionStrategy in:

`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 eine vorhandene Ansicht einbinden möchten Layout, ComposeView verwenden und nennen Sie seine setContent() . 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

Blenden Sie im Kotlin-Quellcode eine Inflation des Layouts aus dem Layout- Ressource in XML definiert. Hol dir dann die 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 die Bindung der Ansicht 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

Zwei leicht unterschiedliche Textelemente, eines übereinander

Abbildung 1: Hier sehen Sie die Ausgabe des Codes, mit dem Compose-Elemente in einem UI-Hierarchie ansehen. Die Seite "Hello Android!" Text wird von einem Widget „TextView“. Die Seite "Hello Compose!" Text wird von einem Textelement verfassen.

Du kannst ein ComposeView auch direkt in ein Fragment einfügen, wenn du den Vollbildmodus verwendest wird mit Compose erstellt, wodurch Sie die Verwendung einer XML-Layoutdatei vollständig vermeiden können.

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 es mehrere ComposeView-Elemente im selben Layout gibt, muss jedes haben eine eindeutige ID, 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

Sie können zusammensetzbare Funktionen für Ihr XML-Layout auch im Layout-Editor in der Vorschau ansehen mit einem ComposeView. So sehen Sie, wie Ihre zusammensetzbaren Funktionen in einem gemischten Layout mit den Optionen „Views“ und „Schreiben“.

Angenommen, Sie möchten die folgende zusammensetzbare Funktion im Layout-Editor anzeigen. Hinweis sind mit @Preview gekennzeichnete zusammensetzbare Funktionen gut geeignet für eine Vorschau in der Layout-Editor.

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

Verwenden Sie zum Anzeigen dieser zusammensetzbaren Funktion das Tool-Attribut tools:composableName und Legen Sie als Wert den voll qualifizierten Namen der zusammensetzbaren Funktion fest, die in der Vorschau angezeigt werden soll. Layout.

<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

Zusammensetzbare Funktion wird im Layout-Editor angezeigt

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 „Compose“ und „View ansehen“