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 der Code in einer reinen Compose-App.

`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 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 angeordnet, wenn das zugrunde liegende `ComposeView`-Element 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 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 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 „Fragmente“

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.

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

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 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. 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 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. Mit @Preview annotierte Composeables eignen sich gut für die Vorschau im 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

Derzeit liegen keine Empfehlungen vor.

Versuchen Sie, sich bei Ihrem Google-Konto anzumelden.