Jetpack Compose para Kotlin: guia completo com exemplos

O que é Jetpack Compose e para que serve?

Jetpack Compose é um conjunto moderno de ferramentas para criar interfaces de usuário (UI) para Android, desenvolvido pelo Google. Diferente da abordagem tradicional baseada em XML e no sistema View, o Compose utiliza uma abordagem declarativa. Isso significa que você descreve como a UI deve ser em cada estado dos dados, em vez de descrever uma sequência de passos para alterá-la.

Principais vantagens do Jetpack Compose:

\n
• Declaratividade: Você descreve a UI como uma função do estado. Quando o estado muda, o Compose redesenha automaticamente apenas as partes da UI que foram alteradas.
\n
• Menos código: Comparado ao XML + View, o código em Compose geralmente é mais curto e legível.
\n
• Intuitividade: Utiliza a linguagem Kotlin, tornando o código mais natural para desenvolvedores Android.
\n
• Desempenho: O Compose é otimizado para funcionar com as novas arquiteturas Android e minimiza as re-renderizações.
\n
• Compatibilidade: O Compose pode ser gradualmente implementado em projetos existentes, sendo usado junto com o View tradicional.
\n

Jetpack Compose não é apenas uma biblioteca, mas todo um ecossistema que inclui ferramentas para trabalhar com animação, navegação, testes e muito mais. É o futuro do desenvolvimento Android, e o Google recomenda ativamente a migração para ele.

Instalação do Jetpack Compose

Como o Jetpack Compose é uma biblioteca para Android, ela não é instalada via pip (Python) ou npm (JavaScript). Em vez disso, ela é adicionada a um projeto Android através do sistema de build Gradle. Aqui está um guia passo a passo:

1. Configuração do projeto no Android Studio

Crie um novo projeto Android, selecionando o modelo "Empty Compose Activity". O Android Studio configurará automaticamente todas as dependências necessárias.

2. Configuração manual (se o projeto já existir)

Abra o arquivo build.gradle.kts (no nível do projeto) e certifique-se de que no bloco plugins esteja:

plugins {\n    id("com.android.application") version "8.2.0" apply false\n    id("org.jetbrains.kotlin.android") version "1.9.20" apply false\n}

Em seguida, abra o arquivo build.gradle.kts (no nível do módulo, geralmente app) e adicione:

plugins {\n    id("com.android.application")\n    id("org.jetbrains.kotlin.android")\n}\n\nandroid {\n    namespace = "com.example.myapp"\n    compileSdk = 34\n\n    defaultConfig {\n        applicationId = "com.example.myapp"\n        minSdk = 24\n        targetSdk = 34\n        versionCode = 1\n        versionName = "1.0"\n    }\n\n    buildFeatures {\n        compose = true\n    }\n\n    composeOptions {\n        kotlinCompilerExtensionVersion = "1.5.5"\n    }\n\n    kotlinOptions {\n        jvmTarget = "17"\n    }\n}\n\ndependencies {\n    implementation(platform("androidx.compose:compose-bom:2024.01.00"))\n    implementation("androidx.compose.ui:ui")\n    implementation("androidx.compose.ui:ui-graphics")\n    implementation("androidx.compose.ui:ui-tooling-preview")\n    implementation("androidx.compose.material3:material3")\n    implementation("androidx.activity:activity-compose:1.8.2")\n    debugImplementation("androidx.compose.ui:ui-tooling")\n    debugImplementation("androidx.compose.ui:ui-test-manifest")\n}

Após sincronizar o Gradle, você pode começar a usar o Jetpack Compose.

Início rápido com exemplo de código

A maneira mais simples de começar é criar uma tela com o texto "Hello, World!". Para isso, na sua Activity (ou em qualquer outro lugar onde você use Compose), chame a função setContent:

import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.