Adicionar o Compose a um app baseado em visualização

1. Antes de começar

Desde o início, o Jetpack Compose foi criado com interoperabilidade de visualização, o que significa que ele e o sistema de visualização podem compartilhar recursos e trabalhar lado a lado para mostrar a interface. Essa funcionalidade permite adicionar o Compose ao seu app já existente baseado em visualização. Isso significa que o Compose e as visualizações podem coexistir na base de código até que todo o app esteja totalmente no Compose.

Neste codelab, você vai mudar o item de lista baseado em visualização no app Juice Tracker para usar o Compose. Você pode converter o restante das visualizações do Juice Tracker por conta própria, se quiser.

Se você tem um app que usa uma interface baseada em visualização, talvez não queira reprogramar toda a interface de uma vez. Este codelab ajuda a converter uma única visualização de uma interface baseada em visualização em um elemento do Compose.

Pré-requisitos

• Conhecer a interface baseada em visualização.
• Saber criar um app usando uma interface baseada em visualização.
• Ter experiência com a sintaxe do Kotlin, incluindo lambdas.
• Saber criar um app no Jetpack Compose.

O que você vai aprender

• Como adicionar o Compose a uma tela criada com visualizações do Android.
• Como visualizar um elemento combinável adicionado ao app baseado em visualização.

O que você vai criar

• Você vai converter um item de lista baseado em visualização para o Compose no app Juice Tracker.

2. Visão geral do app inicial

Este codelab usa o código de solução do app Juice Tracker mostrado em Criar um app Android com visualizações como o código inicial. O app inicial já salva dados usando a biblioteca de persistência Room. O usuário pode adicionar informações sobre sucos ao banco de dados do app, como nome, descrição, cor e nota.

Neste codelab, você vai converter o item de lista baseado em visualização para o Compose.

Fazer o download do código inicial para este codelab

Para começar, faça o download do código inicial:

file_downloadBaixe o ZIP

Outra opção é clonar o repositório do GitHub:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-juice-tracker.git
$ cd basic-android-kotlin-compose-training-juice-tracker
$ git checkout views

Procure o código no repositório do GitHub do JuiceTracker (link em inglês).

3. Adicionar a biblioteca do Jetpack Compose

Não se esqueça, Compose e Views podem existir juntos em uma determinada tela. Você pode ter alguns elementos da interface no Compose e outros no sistema de visualização. Por exemplo, você pode ter apenas a lista no Compose e o restante da tela no sistema de visualização.

Conclua as etapas a seguir para adicionar a biblioteca do Compose ao app Juice Tracker.

1. Abra o Juice Tracker no Android Studio.
2. Abra o build.gradle.kts do app.
3. No bloco buildFeatures, adicione uma flag compose = true.

buildFeatures {
    //...
    // Enable Jetpack Compose for this module
    compose = true
}

Essa flag permite que o Android Studio funcione com o Compose. Você não realizou essa etapa nos codelabs anteriores, porque o Android Studio gera esse código automaticamente quando você cria um novo projeto de modelo do Compose no Android Studio.

4. Abaixo de buildFeatures, adicione o bloco composeOptions.
5. No bloco, defina kotlinCompilerExtensionVersion como "1.5.1" para definir a versão do compilador Kotlin.

composeOptions {
    kotlinCompilerExtensionVersion = "1.5.1"
}

6. Na seção dependencies, adicione dependências do Compose. Você precisa das dependências a seguir para adicionar o Compose a um app baseado em visualização. Essas dependências ajudam a integrar o Compose à atividade, adicionar a biblioteca de componentes de design do Compose, oferecer suporte aos temas do Jetpack e fornecer ferramentas para melhorar o suporte ao ambiente de desenvolvimento integrado.

dependencies {
    implementation(platform("androidx.compose:compose-bom:2023.06.01"))
    // other dependencies 
    // Compose
    implementation("androidx.activity:activity-compose:1.7.2")
    implementation("androidx.compose.material3:material3")
    implementation("com.google.accompanist:accompanist-themeadapter-material3:0.28.0")

    debugImplementation("androidx.compose.ui:ui-tooling")
}

Adicionar ComposeView

Uma ComposeView é uma visualização do Android que pode hospedar conteúdo da interface do Jetpack Compose. Use setContent para fornecer a função combinável do conteúdo para a visualização.

1. Abra o layout/list_item.xml e confira a prévia na guia Split.

Ao final deste codelab, você vai substituir essa visualização por um elemento combinável.

2. No JuiceListAdapter.kt, remova ListItemBinding de todos os lugares. Na classe JuiceListViewHolder, substitua binding.root por composeView.

import androidx.compose.ui.platform.ComposeView

class JuiceListViewHolder(
    private val onEdit: (Juice) -> Unit,
    private val onDelete: (Juice) -> Unit
): RecyclerView.ViewHolder(composeView) 

3. Na pasta onCreateViewHolder(), atualize a função return() para que ela fique como este código:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): JuiceListViewHolder {
   return JuiceListViewHolder(
       ComposeView(parent.context),
       onEdit,
       onDelete
   )
}

4. Na classe JuiceListViewHolder, exclua todas as variáveis private e remova todo o código da função bind(). A classe JuiceListViewHolder agora terá esta aparência:

class JuiceListViewHolder(
    private val onEdit: (Juice) -> Unit,
    private val onDelete: (Juice) -> Unit
) : RecyclerView.ViewHolder(composeView) {

   fun bind(juice: Juice) {

   }
}

5. Agora, é possível excluir as importações com.example.juicetracker.databinding.ListItemBinding e android.view.LayoutInflater.

// Delete
import com.example.juicetracker.databinding.ListItemBinding
import android.view.LayoutInflater

6. Exclua o arquivo layout/list_item.xml.
7. Selecione OK na caixa de diálogo Delete.

4. Adicionar uma função combinável

Agora, crie um elemento combinável que emita o item de lista. A função combinável usa Juice e duas funções de callback para editar e excluir o item de lista.

1. No JuiceListAdapter.kt, após a definição da classe JuiceListAdapter, crie uma função combinável chamada ListItem().
2. Faça com que a função ListItem() aceite o objeto Juice e um callback lambda para exclusão.

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ListItem(
    input: Juice,
    onDelete: (Juice) -> Unit,
    modifier: Modifier = Modifier
) {
}

Observe a prévia do item de lista que você quer criar. Ela mostra um ícone e detalhes do suco, além de um botão de exclusão. Você vai implementar esses componentes em breve.

Criar o elemento combinável do ícone de suco

1. No JuiceListAdapter.kt, depois do elemento combinável ListItem(), crie outra função combinável chamada JuiceIcon() que usa uma color e um Modifier.

@Composable
fun JuiceIcon(color: String, modifier: Modifier = Modifier) {

}

2. Na função JuiceIcon(), adicione variáveis para a color e a descrição do conteúdo, conforme mostrado no seguinte código:

@Composable
fun JuiceIcon(color: String, modifier: Modifier = Modifier) {
   val colorLabelMap = JuiceColor.values().associateBy { stringResource(it.label) }
   val selectedColor = colorLabelMap[color]?.let { Color(it.color) }
   val juiceIconContentDescription = stringResource(R.string.juice_color, color)

}

Usando as variáveis colorLabelMap e selectedColor, você vai recuperar o recurso de cores associado à seleção do usuário.

3. Adicione um layout Box para mostrar dois ícones ic_juice_color e ic_juice_clear, um sobre o outro. O ícone ic_juice_color tem uma tonalidade e está alinhado ao centro.

import androidx.compose.foundation.layout.Box

Box(
   modifier.semantics {
       contentDescription = juiceIconContentDescription
   }
) {
   Icon(
       painter = painterResource(R.drawable.ic_juice_color),
       contentDescription = null,
       tint = selectedColor ?: Color.Red,
       modifier = Modifier.align(Alignment.Center)
   )
   Icon(painter = painterResource(R.drawable.ic_juice_clear), contentDescription = null)
}

Como você já conhece a implementação de um elemento combinável, os detalhes sobre essa etapa não são fornecidos.

4. Adicione uma função para visualizar JuiceIcon(). Transmita a cor como Yellow.

import androidx.compose.ui.tooling.preview.Preview

@Preview
@Composable
fun PreviewJuiceIcon() {
    JuiceIcon("Yellow")
}

Criar elementos combináveis de detalhes do suco

No JuiceListAdapter.kt, é necessário adicionar outra função combinável para mostrar os detalhes do suco. Você também precisa de um layout de coluna para mostrar dois elementos combináveis Text para o nome e a descrição, além de um indicador de nota. Para isso, siga estas etapas:

1. Adicione uma função combinável com o nome JuiceDetails(), que usa um objeto Juice e um Modifier, além de um elemento combinável de texto para o nome e outro para a descrição do suco, conforme mostrado no código abaixo:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.ui.text.font.FontWeight

@Composable
fun JuiceDetails(juice: Juice, modifier: Modifier = Modifier) {
   Column(modifier, verticalArrangement = Arrangement.Top) {
       Text(
           text = juice.name,
           style = MaterialTheme.typography.h5.copy(fontWeight = FontWeight.Bold),
       )
       Text(juice.description)
       RatingDisplay(rating = juice.rating, modifier = Modifier.padding(top = 8.dp))
   }
}

2. Para resolver o erro de referência, crie uma função combinável chamada RatingDisplay().

No sistema de visualização, você tem uma RatingBar para mostrar a barra de nota a seguir. Como o Compose não tem um elemento combinável da barra de nota, é necessário implementar esse elemento do zero.

3. Defina a função RatingDisplay() para mostrar as estrelas de acordo com a nota. Essa função combinável mostra o número de estrelas com base na classificação.

import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.pluralStringResource

@Composable
fun RatingDisplay(rating: Int, modifier: Modifier = Modifier) {
   val displayDescription = pluralStringResource(R.plurals.number_of_stars, count = rating)
   Row(
       // Content description is added here to support accessibility
       modifier.semantics {
           contentDescription = displayDescription
       }
   ) {
       repeat(rating) {
           // Star [contentDescription] is null as the image is for illustrative purpose
           Image(
               modifier = Modifier.size(32.dp),
               painter = painterResource(R.drawable.star),
               contentDescription = null
           )
       }
   }
}

Para criar o drawable de estrela no Compose, é necessário criar o recurso de vetor de estrelas.

4. No painel Project, clique com o botão direito do mouse em drawable > New > Vector Asset.

5. Na caixa de diálogo do Asset Studio, procure um ícone de estrela. Selecione o ícone de estrela preenchida.

6. Mude o valor de cor da estrela para 625B71.

7. Clique em Next > Finish.
8. Um drawable aparece na pasta res/drawable.

9. Adicione um elemento combinável de prévia para JuiceDetails.

@Preview
@Composable
fun PreviewJuiceDetails() {
    JuiceDetails(Juice(1, "Sweet Beet", "Apple, carrot, beet, and lemon", "Red", 4))
}

Criar um elemento combinável do botão de exclusão

1. No JuiceListAdapter.kt, adicione outra função combinável chamada DeleteButton(), que usa uma função de callback de lambda e um modificador.
2. Defina a lambda como o argumento onClick e transmita o Icon() conforme mostrado no seguinte código:

import androidx.compose.ui.res.painterResource
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

@Composable
fun DeleteButton(onDelete: () -> Unit, modifier: Modifier = Modifier) {
    IconButton(
        onClick = { onDelete() },
        modifier = modifier
    ) {
        Icon(
            painter = painterResource(R.drawable.ic_delete),
            contentDescription = stringResource(R.string.delete)
        )
    }
}

3. Adicione uma função de prévia para o botão de exclusão.

@Preview
@Composable
fun PreviewDeleteIcon() {
    DeleteButton({})
}

5. Implementar a função ListItem

Agora que você tem todos os elementos combináveis necessários para mostrar o item de lista, eles podem ser organizados em um layout. Observe a função ListItem() definida na etapa anterior.

@Composable
fun ListItem(
   input: Juice,
   onEdit: (Juice) -> Unit,
   onDelete: (Juice) -> Unit,
   modifier: Modifier = Modifier
) {
}

No JuiceListAdapter.kt, conclua as etapas a seguir para implementar a função ListItem().

1. Adicione um layout Row dentro do lambda Mdc3Theme {}.

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import com.google.accompanist.themeadapter.material3.Mdc3Theme

Mdc3Theme {
   Row(
       modifier = modifier,
       horizontalArrangement = Arrangement.SpaceBetween
   ) {

   }
}

2. No lambda Row, chame os três elementos combináveis (JuiceIcon, JuiceDetails e DeleteButton) que você criou como elementos filhos.

JuiceIcon(input.color)
JuiceDetails(input, Modifier.weight(1f))
DeleteButton({})

A transmissão do Modifier.weight(1f) para o elemento combinável JuiceDetails() garante que os detalhes do suco ocupem o espaço horizontal restante depois de medir os elementos filhos sem peso.

3. Transmita a lambda onDelete(input) e o modificador com alinhamento superior como parâmetros para o elemento combinável DeleteButton.

DeleteButton(
   onDelete = {
       onDelete(input)
   },
   modifier = Modifier.align(Alignment.Top)
)

4. Crie uma função de prévia para o elemento combinável ListItem.

@Preview
@Composable
fun PreviewListItem() {
   ListItem(Juice(1, "Sweet Beet", "Apple, carrot, beet, and lemon", "Red", 4), {})
}

5. Vincule o elemento combinável ListItem ao armazenador de visualização. Chame onEdit(input) na função lambda clickable() para abrir a caixa de diálogo de edição quando houver um clique no item da lista.

Na classe JuiceListViewHolder, dentro da função bind(), você precisa hospedar o elemento combinável. Use a ComposeView, que é uma visualização do Android que pode hospedar conteúdo da interface do Compose utilizando o método setContent.

fun bind(input: Juice) {
    composeView.setContent {
        ListItem(
            input,
            onDelete,
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    onEdit(input)
                }
                .padding(vertical = 8.dp, horizontal = 16.dp),
       )
   }
}

6. Execute o app e adicione seu suco favorito. Observe o item de lista do Compose.

.

Parabéns! Você acabou de criar seu primeiro app de interoperabilidade do Compose que usa elementos do Compose em um app baseado em visualização.

6. Acessar o código da solução

Para baixar o código do codelab concluído, use estes comandos git:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-juice-tracker.git
$ cd basic-android-kotlin-compose-training-juice-tracker
$ git checkout views-with-compose

Se preferir, você pode baixar o repositório como um arquivo ZIP, descompactar e abrir no Android Studio.

file_downloadFazer o download do ZIP

Se você quiser conferir o código da solução, acesse o GitHub (link em inglês).

7. Saiba mais

Documentação do desenvolvedor Android

• Ferramentas para Compose | Jetpack Compose | Desenvolvedores Android
• APIs de interoperabilidade | Jetpack Compose | Desenvolvedores Android
• Estratégia de migração | Jetpack Compose | Desenvolvedores Android

Codelab [intermediário]

• Como migrar para o Jetpack Compose