Utilizzare la funzionalità Scrivi in Visualizzazioni

Puoi aggiungere un'interfaccia utente basata su Compose a un'app esistente che utilizza un design basato su Views.

Per creare una nuova schermata interamente basata su Compose, fai in modo che l'attività chiami il metodo setContent() e passi le funzioni componibili che preferisci.

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

Questo codice è identico a quello che troveresti in un'app solo in Compose.

`ViewCompositionStrategy` per `ComposeView`

ViewCompositionStrategy definisce quando la composizione deve essere eliminata. Il valore predefinito, ViewCompositionStrategy.Default, elimina la composizione quando il ComposeView sottostante viene scollegato dalla finestra, a meno che non faccia parte di un container di pooling come un RecyclerView. In un'app solo in Compose con una singola attività, questo comportamento predefinito è quello che vorresti, tuttavia, se stai aggiungendo Compose in modo incrementale al tuo codebase, questo comportamento potrebbe causare la perdita dello stato in alcuni scenari.

Per modificare ViewCompositionStrategy, chiama il setViewCompositionStrategy() metodo e fornisci una strategia diversa.

La tabella seguente riassume i diversi scenari in cui puoi utilizzare ViewCompositionStrategy:

`ViewCompositionStrategy`	Descrizione e scenario di interoperabilità
`DisposeOnDetachedFromWindow`	La composizione verrà eliminata quando il `ComposeView` sottostante viene scollegato dalla finestra. È stato sostituito da `DisposeOnDetachedFromWindowOrReleasedFromPool`. Scenario di interoperabilità: * `ComposeView` sia l'unico elemento nella gerarchia di oggetti View sia nel contesto di una schermata mista View/Compose (non in Fragment).
`DisposeOnDetachedFromWindowOrReleasedFromPool` (predefinito)	Simile a `DisposeOnDetachedFromWindow`, quando la composizione non si trova in un container di pooling, ad esempio un `RecyclerView`. Se si trova in un contenitore di pooling, verrà eliminato quando il contenitore di pooling stesso viene scollegato dalla finestra o quando l'elemento viene eliminato (ovvero quando il pool è pieno). Scenario di interoperabilità: * `ComposeView` sia l'unico elemento nella gerarchia di oggetti View sia nel contesto di una schermata mista View/Compose (non in Fragment). * `ComposeView` come elemento in un container di pooling come `RecyclerView`.
`DisposeOnLifecycleDestroyed`	La composizione verrà eliminata quando il `Lifecycle` fornito viene eliminato. Scenario di interoperabilità * `ComposeView` nella visualizzazione di un fragment.
`DisposeOnViewTreeLifecycleDestroyed`	La composizione verrà eliminata quando il `Lifecycle` di proprietà del `LifecycleOwner` restituito da `ViewTreeLifecycleOwner.get` della finestra successiva a cui è collegata la visualizzazione viene eliminato. Scenario di interoperabilità: * `ComposeView` nella visualizzazione di un fragment. * `ComposeView` in una visualizzazione in cui il ciclo di vita non è ancora noto.

`ComposeView` nei fragment (passaggio transitorio)

Se vuoi incorporare contenuti dell'interfaccia utente di Compose in un fragment o in un layout di visualizzazione esistente, utilizza ComposeView e chiama il relativo setContent() metodo. ComposeView è un View Android.

Puoi inserire ComposeView nel layout XML come qualsiasi altra 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>migration_strategy_existing_screens.xml

Nel codice sorgente Kotlin, espandi il layout dalla risorsa di layout definita in XML. Poi recupera ComposeView utilizzando l'ID XML, imposta una strategia di composizione che funzioni meglio per l'host View e chiama setContent() per utilizzare 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
    }
}InteroperabilityAPIsSnippets.kt

In alternativa, puoi anche utilizzare il binding delle visualizzazioni per ottenere riferimenti a ComposeView facendo riferimento alla classe di binding generata per il file di layout 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
    }
}InteroperabilityAPIsSnippets.kt

Due elementi di testo leggermente diversi, uno sopra l'altro

Figura 1. Mostra l'output del codice che aggiunge elementi Compose in una gerarchia dell'interfaccia utente di Views. Il testo "Hello Android!" viene visualizzato da un widget TextView. Il testo "Hello Compose!" viene visualizzato da un elemento di testo Compose.

Puoi anche includere un ComposeView direttamente in un fragment se la schermata intera è creata con Compose, il che ti consente di evitare completamente l'utilizzo di un file di layout 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!")
                }
            }
        }
    }
}InteroperabilityAPIsSnippets.kt

Più istanze di `ComposeView` nello stesso layout

Se nello stesso layout sono presenti più elementi ComposeView, ognuno deve avere un ID univoco per il funzionamento di savedInstanceState.

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

Gli ID ComposeView sono definiti nel file res/values/ids.xml:

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>ids.xml

Visualizzare l'anteprima dei componibili nel Layout Editor

Puoi anche visualizzare l'anteprima dei componibili nel Layout Editor per il layout XML contenente un ComposeView. In questo modo, puoi vedere l'aspetto dei tuoi componibili in un layout misto Views e Compose.

Supponiamo che tu voglia visualizzare il seguente componibile nel Layout Editor. Tieni presente che i componibili annotati con @Preview sono ottimi candidati per la visualizzazione dell'anteprima nel Layout Editor.

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

Per visualizzare questo componibile, utilizza l'attributo degli strumenti tools:composableName e imposta il relativo valore sul nome completo del componibile di cui visualizzare l'anteprima nel 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

Componente componibile visualizzato nell'editor di layout

Utilizzare la funzionalità Scrivi in Visualizzazioni Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

ViewCompositionStrategy per ComposeView

ComposeView nei fragment (passaggio transitorio)

Più istanze di ComposeView nello stesso layout

Visualizzare l'anteprima dei componibili nel Layout Editor

Utilizzare la funzionalità Scrivi in Visualizzazioni

`ViewCompositionStrategy` per `ComposeView`

`ComposeView` nei fragment (passaggio transitorio)

Più istanze di `ComposeView` nello stesso layout