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!") }
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>
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 } }
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 } }
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!") } } } } }
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 // ... } ) } }
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>
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") }
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>
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“