Jetpack Compose: um novo jeito de construir Views no Android

Palestra na Latinoware 2021 com Marina S. Coelho sobre Jetpack Compose: programação reativa, layouts por composição de funções Kotlin, estado, temas e testes.

🧩 O que é Jetpack Compose

O Jetpack Compose é o kit de ferramentas moderno do Android pra criar interfaces de usuário nativas, que se tornou estável em 28 de julho de 2021. Ele simplifica e acelera o desenvolvimento de UI com menos código, ferramentas poderosas e APIs Kotlin intuitivas.

A ideia central: criar UI através de composição de funções Kotlin, em vez de arquivos XML, um modelo de programação reativa, onde toda ação (eventos, mensagens, fluxo de dados) é transmitida e detectada por um fluxo, e a interface reage às mudanças nesse fluxo.

Vantagens em comparação ao layout XML: menos código, mais intuitivo, curva de aprendizado e desenvolvimento mais rápidos, mais eficiente.

🚀 Começando com Compose

Tudo começa com setContent dentro do onCreate de uma ComponentActivity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

Os três tipos de layout básicos: Column (itens na vertical), Row (itens na horizontal) e Box (um elemento sobre o outro).

Modificadores (Modifier) mudam aparência, tamanho e comportamento dos elementos: padding, clickable, fillMaxWidth, size, etc. A ordem em que são encadeados importa: Modifier.clickable(...).padding(...).fillMaxWidth() não é igual a inverter a ordem dessas chamadas.

🎨 Temas, tipografia e recursos

Temas em Compose são definidos programaticamente com darkColors()/lightColors() passados pra um MaterialTheme, com suporte nativo a dark mode via isSystemInDarkTheme(). Tipografia segue o mesmo caminho: um Typography customizado pode ser aplicado a um texto específico ou embutido no tema inteiro. Recursos como strings, cores e dimensões continuam acessíveis via stringResource, colorResource, dimensionResource.

🔄 Estado e listas

Estado, em um app, é qualquer valor que muda ao longo do tempo, de uma variável numa classe a um registro em banco de dados. Em Compose, quando um estado observado por um elemento muda, ocorre recomposição desse elemento. As opções mais comuns pra gerenciar isso: MutableState (o jeito recomendado nativamente), LiveData, RxJava2 e Flow.

O remember guarda um valor calculado na composição inicial e o devolve nas recomposições seguintes, esquecendo o objeto quando o elemento que o usa sai de tela.

LazyColumn é o substituto do antigo RecyclerView: aceita um item { } isolado, um items(lista) { } iterando sobre uma coleção, ou os dois combinados na mesma lista.

🔗 Compose com XML e testes

Dá pra misturar: uma ComposeView inserida direto num layout XML existente permite usar setContent só naquele trecho, migrando a UI aos poucos em vez de reescrever a Activity inteira de uma vez.

Testes de UI usam as dependências ui-test-junit4 e ui-test-manifest, com três blocos: Finders (onNode, onAllNodes...) pra selecionar elementos, Declarações (assertExists, assertIsDisplayed, assertTextEquals...) pra verificar estado, e Ações (performClick, performKeyPress, performGesture...) pra simular interação do usuário.

Apresentado com Marina S. Coelho na Latinoware 2021.

Slides completos: Jetpack Compose: um novo jeito de construir Views no Android.