Vous pouvez ajouter une UI basée sur Compose à une application existante qui utilise un design basé sur les vues.
Pour créer un écran entièrement basé sur Compose, demandez à votre activité d'appeler la méthode setContent()
et de transmettre toutes les fonctions modulables de votre choix.
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!") }
Ce code ressemble à ce que vous trouveriez dans une application Compose.
ViewCompositionStrategy
pour ComposeView
ViewCompositionStrategy
définit le moment où la composition doit être supprimée. Par défaut,
ViewCompositionStrategy.Default
,
supprime la composition lorsque l'élément sous-jacent
ComposeView
se détache de la fenêtre, sauf si elle fait partie d'un conteneur de pooling tel qu'un
RecyclerView
Dans une application Compose à activité unique, ce comportement par défaut est le suivant :
Toutefois, si vous ajoutez progressivement Compose à votre
codebase, ce comportement peut entraîner une perte d'état dans certains scénarios.
Pour modifier le ViewCompositionStrategy
, appelez la méthode setViewCompositionStrategy()
et proposer une stratégie différente.
Le tableau ci-dessous récapitule les différents scénarios que vous pouvez utiliser
ViewCompositionStrategy
dans:
ViewCompositionStrategy |
Description et scénario d'interopérabilité |
---|---|
DisposeOnDetachedFromWindow |
La composition sera supprimée lorsque la ComposeView sous-jacente sera dissociée de la fenêtre. A depuis été remplacé par DisposeOnDetachedFromWindowOrReleasedFromPool .Scénario d'interopérabilité: * ComposeView qu'il s'agisse du seul élément de la hiérarchie des vues ou dans le contexte d'un écran mixte View/Compose (et non dans un fragment). |
DisposeOnDetachedFromWindowOrReleasedFromPool (par défaut) |
Comme pour DisposeOnDetachedFromWindow , lorsque la composition ne se trouve pas dans un conteneur de pooling, tel qu'un RecyclerView . S'il se trouve dans un conteneur de pooling, il sera supprimé lorsque le conteneur de pooling lui-même sera dissocié de la fenêtre, ou lorsque l'élément est supprimé (c'est-à-dire lorsque le pool est plein).Scénario d'interopérabilité: * ComposeView , qu'il s'agisse du seul élément de la hiérarchie des vues ou dans le contexte d'un écran mixte View/Compose (pas dans un fragment).* ComposeView en tant qu'élément dans un conteneur de pooling tel que RecyclerView . |
DisposeOnLifecycleDestroyed |
La composition sera supprimée lorsque le Lifecycle fourni sera détruit.Scénario d'interopérabilité * ComposeView dans la vue d'un fragment. |
DisposeOnViewTreeLifecycleDestroyed |
La composition sera supprimée lorsque le Lifecycle appartenant au LifecycleOwner renvoyé par ViewTreeLifecycleOwner.get de la fenêtre suivante à laquelle la vue est associée est détruit.Scénario d'interopérabilité: * ComposeView dans la vue d'un fragment.* ComposeView dans une vue dont le cycle de vie n'est pas encore connu |
ComposeView
dans les fragments
Si vous souhaitez intégrer le contenu de l'interface utilisateur Compose dans un fragment ou une mise en page "View" existante, utilisez ComposeView
et appelez sa méthode setContent()
. ComposeView
est une View
Android.
Vous pouvez placer la ComposeView
dans votre mise en page XML comme n'importe quelle autre View
:
<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>
Dans le code source en Kotlin, gonflez la mise en page à partir de la ressource de mise en page définie en XML. Obtenez ensuite ComposeView
à l'aide de l'ID XML, définissez la stratégie de composition la plus adaptée pour l'hôte View
, puis appelez setContent()
pour utiliser Compose.
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 } }
Vous pouvez également utiliser la liaison de vue pour obtenir des références aux
ComposeView
en référençant la classe de liaison générée pour votre fichier de mise en page XML:
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 } }
Figure 1 : Cette image montre la sortie du code qui ajoute des éléments Compose dans une hiérarchie d'UI. Un widget TextView
affiche le message texte "Hello Android!". Un élément de texte Compose affiche le texte "Hello Compose!".
Vous pouvez également inclure une ComposeView
directement dans un fragment si votre mode plein écran est conçu avec Compose, ce qui vous évite d'utiliser un fichier de mise en page XML.
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!") } } } } }
Plusieurs instances ComposeView
dans la même mise en page
S'il existe plusieurs éléments ComposeView
dans la même mise en page, chacun doit disposer d'un ID unique pour que savedInstanceState
fonctionne correctement.
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 // ... } ) } }
Les ID ComposeView
sont définis dans le fichier res/values/ids.xml
:
<resources> <item name="compose_view_x" type="id" /> <item name="compose_view_y" type="id" /> </resources>
Prévisualiser les composables dans l'éditeur de mise en page
Vous pouvez également prévisualiser les composables dans l'éditeur de mise en page pour votre mise en page XML.
contenant un ComposeView
. Cela vous permet de voir à quoi ressemblent vos composables
dans une mise en page mixte
Views et Compose.
Imaginons que vous souhaitiez afficher le composable suivant dans l'éditeur de mise en page. Remarque
que les composables annotés avec @Preview
sont de bons candidats pour un aperçu dans le
Éditeur de mise en page.
@Preview @Composable fun GreetingPreview() { Greeting(name = "Android") }
Pour afficher ce composable, utilisez l'attribut d'outils tools:composableName
et
définissez sa valeur sur le nom complet du composable à prévisualiser dans
mise en page.
<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>
Étapes suivantes
Maintenant que vous connaissez les API d'interopérabilité pour utiliser Compose dans les vues, découvrez comment utiliser les vues dans Compose.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Autres points à prendre en compte
- Stratégie de migration {:#migration-strategy}
- Comparer les performances de Compose et View