Estratégia de migração

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Se você tem um app que usa uma IU com base em visualização, talvez não queira reprogramar toda a IU de uma vez só. Esta página ajudará a adicionar novos elementos do Compose à IU que você já tem.

O Jetpack Compose foi desenvolvido com interoperabilidade de visualização desde o início. Com essa funcionalidade, você pode migrar seu app baseado em visualização para o Compose e ainda criar novos recursos. Para migrar para o Compose, recomendamos uma migração incremental em que esse sistema e as visualizações são usados juntos na base de código até que o app passe a usar o Compose totalmente.

Fases da migração de um app baseado em visualização para o Compose
Figura 1. Fases da migração de um app baseado em visualização para o Compose.

Para migrar seu app para o Compose, siga estas etapas:

  1. Crie novos recursos com o Compose.
  2. Ao criar recursos, identifique elementos reutilizáveis e comece a criar uma biblioteca de componentes de IU comuns.
  3. Substitua os recursos atuais uma tela por vez.

Criar novos recursos com o Compose

Usar o Compose para criar novos recursos é a melhor maneira de impulsionar a adoção desse sistema. Com essa estratégia, você pode adicionar recursos e aproveitar os benefícios do Compose enquanto ainda satisfaz as necessidades de negócios da sua empresa.

Novas telas

Uma nova tela criada no Compose
Figura 2. Uma nova tela criada no Compose.

Ao usar o Compose para criar novos recursos no app atual, você ainda está trabalhando com as restrições da arquitetura do app. Se você estiver usando fragmentos e o componente Navigation, e o recurso que está sendo criado ocupar uma tela inteira, será necessário criar um novo fragmento, mas o conteúdo dele vai estar no Compose.

Para usar o Compose em um fragmento, retorne uma ComposeView no método de ciclo de vida onCreateView() dele. ComposeView tem um método setContent() em que é possível fornecer uma função de composição.

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.ComposeView
import androidx.fragment.app.Fragment

class NewFeatureFragment : Fragment() {
   override fun onCreateView(
       inflater: LayoutInflater,
       container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View {
       return ComposeView(requireContext()).apply {
           setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
           setContent {
               NewFeatureScreen()
           }
       }
   }
}

Consulte ComposeView em fragmentos para saber mais.

Telas existentes

Uma tela existente usando visualizações e o Compose em conjunto
Figura 3. Uma tela existente usando visualizações e o Compose em conjunto.

Se o novo recurso fizer parte de uma tela que já existe, você vai poder adicionar ComposeView à hierarquia da IU, assim como qualquer outra visualização.

Por exemplo, digamos que você queira adicionar uma visualização filha a um LinearLayout. Você pode fazer isso em XML desta forma:

<LinearLayout ...>

  <Button ... />

  <TextView ... />

  <androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view" ... />

</LinearLayout>

Depois que a visualização for inflada, você poderá fazer referência à ComposeView na hierarquia e chamar setContent().

Para saber mais sobre ComposeView, confira as APIs de interoperabilidade.

Criar uma biblioteca de componentes de IU comuns

Ao criar recursos com o Compose, você logo vai acabar criando uma biblioteca de componentes. A criação de uma biblioteca de componentes comuns de IU permite que você tenha uma única fonte de verdade para esses componentes no app e promova a reutilização. Os recursos que você cria podem depender dessa biblioteca. Essa técnica é especialmente útil se você estiver criando um sistema de design personalizado no Compose.

Dependendo do tamanho do app, essa biblioteca pode ser um pacote, módulo ou módulo de biblioteca separado. Para mais informações sobre como organizar módulos no app, confira o Guia para modularização de apps Android.

Substituir recursos existentes pelo Compose

Além de usar o Compose para criar novos recursos, é recomendável migrar gradualmente os recursos existentes no app para aproveitar o Compose.

Criar um app usando apenas o Compose pode acelerar o desenvolvimento e reduzir o tamanho do APK e os tempos de compilação do aplicativo. Consulte Ergonomia para desenvolvedores no Compose para saber mais.

Telas simples

Os primeiros lugares a serem analisados ao migrar recursos existentes para o Compose são telas simples. Elas podem ser telas de boas-vindas, de confirmação ou de configuração, em que os dados mostrados na IU são relativamente estáticos.

Veja o exemplo deste arquivo XML:

<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/title_text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/title"
     android:textAppearance="?attr/textAppearanceHeadline2" />

 <TextView
     android:id="@+id/subtitle_text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/subtitle"
     android:textAppearance="?attr/textAppearanceHeadline6" />

 <TextView
     android:id="@+id/body_text"
     android:layout_width="wrap_content"
     android:layout_height="0dp"
     android:layout_weight="1"
     android:text="@string/body"
     android:textAppearance="?attr/textAppearanceBody1" />

 <Button
     android:id="@+id/confirm_button"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:text="@string/confirm"/>

</LinearLayout>

O arquivo XML pode ser recriado no Compose em algumas linhas:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.h2
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.h6
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.body1
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}

Telas que usam visualizações e o Compose em conjunto

Uma tela que já usa um pouco de código do Compose é outro bom candidato para migração total para o Compose. Dependendo da complexidade da tela, é possível migrá-la totalmente para o Compose ou por etapas. Se a tela começar a usar o Compose em uma subárvore da hierarquia da IU, você vai continuar migrando elementos da IU até que a tela inteira esteja no Compose. Essa abordagem também é chamada de abordagem de baixo para cima.

Abordagem de baixo para cima da migração de telas que usam visualizações e a IU do Compose para usar apenas o Compose
Figura 4. Abordagem de baixo para cima da migração de telas que usam visualizações e a IU do Compose para usar apenas o Compose.

Como remover fragmentos e o componente de navegação

Quando toda a IU no app está no Compose, há pouco benefício no uso de fragmentos. Ao chegar a esse ponto, você pode remover totalmente os fragmentos e os substituir por elementos combináveis na tela gerados pelo Navigation Compose.

Consulte Como navegar com o Compose para saber mais.

Próximas etapas

Para saber mais sobre como adicionar o Compose ao app, consulte Como adicionar o Jetpack Compose ao app. Confira também estes recursos: