Usar o Android Studio com o Jetpack Compose

O Jetpack Compose é um toolkit moderno para criação de IU nativa no Android. Ele tem como base o modelo de programação declarativa. Assim, é possível simplesmente descrever a aparência da IU, e o Compose cuidará do restante. A IU é atualizada automaticamente à medida que estado do app muda. Por ser criado em Kotlin, o Jetpack Compose é completamente interoperável com a linguagem de programação Java e tem acesso direto a todas as APIs do Android e do Jetpack. Como ele é compatível com o toolkit de IU já existente, você pode mesclar e combinar visualizações clássicas e novas. Além disso, ele foi projetado com o Material e com animações desde o início.

Para ter a melhor experiência de desenvolvimento com o Jetpack Compose, faça o download da versão Canary mais recente do Android Studio Preview. Isso porque ao usar o Android Studio para desenvolver seu app com o Jetpack Compose, você pode aproveitar os recursos do editor inteligente, como os modelos New Project e a visualização imediata da IU do Compose.

Faça o download do Android Studio Canary

Depois de instalar o Android Studio, siga as instruções abaixo para testar um app de amostra do Jetpack Compose, criar um novo projeto de app no Jetpack Compose ou adicionar compatibilidade com o Jetpack Compose a um projeto de app já existente.

Testar um app de amostra do Jetpack

Depois de executar a versão mais recente do Android Studio, a maneira mais rápida de testar os recursos do Jetpack Compose é com o App de exemplo do "Jetnews" (link em inglês), hospedado no GitHub. Para importar o projeto de app de amostra do Android Studio, faça o seguinte:

1. Se você estiver na janela Welcome to Android Studio, selecione Import an Android code sample. Caso você já tenha um projeto aberto no Android Studio, selecione File > New > Import Sample na barra de menus.
2. Na barra de pesquisa perto da parte superior do assistente Browse Samples, digite "Jetnews".
3. Selecione o app de amostra Jetnews nos resultados da pesquisa e clique em Next.
4. Mude o Application name e o Project location ou mantenha os valores padrão.
5. Clique em Finish.

O Android Studio faz o download do app de amostra para o caminho especificado e abre o projeto. Você pode inspecionar MainActivity.kt para ver exemplos de animação de fading cruzado, componentes personalizados, uso de tipografia e exibição de cores claras e escuras na visualização no ambiente de desenvolvimento integrado.

Criar um novo app com compatibilidade com o Jetpack Compose

Caso você queira, o Android Studio inclui modelos para ajudar a começar a iniciar um novo projeto que inclua compatibilidade com o JetSource por padrão. Para criar um novo projeto que inclua o Jetpack Compose, faça o seguinte:

1. Se estiver na janela Welcome to Android Studio clique em Start a new Android Studio project. Caso você já tenha um projeto aberto no Android Studio, selecione File > New > Import Sample na barra de menus.
2. Na janela Select a Project Template selecione Empty Compose Activity e clique em Next.
3. Na janela Configure your project, faça o seguinte:
   1. Defina Name, Package name e Save location como você faria normalmente.
   2. No menu suspenso Language, Kotlin é a única opção disponível porque o Jetpack Compose só funciona com classes escritas em Kotlin.
   3. No menu suspenso Minimum API level, selecione a API de nível 21 ou versão posterior.
4. Clique em Finish.
5. Verifique se o arquivo build.gradle do projeto está configurado corretamente, conforme descrito em Configurar o Gradle.

Agora você está pronto para começar a desenvolver um app usando o Jetpack Compose. Para ajudar você a começar a aprender o que é possível fazer com o kit de ferramentas, veja o tutorial do Jetpack Compose.

Adicionar o Jetpack Compose a um projeto já existente

Caso queira usar o Jetpack Compose em um projeto já existente, defina seu projeto com as configurações e dependências necessárias.

Configurar o Gradle

Você precisa definir o nível mínimo da API do seu app como 21 ou posterior e ativar o Jetpack Compose no arquivo build.gradle do app, conforme mostrado abaixo. Defina também a versão do plug-in do compilador Kotlin.

android {
        defaultConfig {
            ...
            minSdkVersion 21
        }

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

        // Set both the Java and Kotlin compilers to target Java 8.

        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }

        kotlinOptions {
            jvmTarget = "1.8"
        }

        composeOptions {
            kotlinCompilerExtensionVersion "0.1.0-dev08"
        }
    }
    

Adicionar dependências do kit de ferramentas do Jetpack Compose

Inclua dependências do toolkit do Jetpack Compose no arquivo build.gradle do app, conforme mostrado abaixo.

dependencies {
        // You also need to include the following Compose toolkit dependencies.
        implementation 'androidx.ui:ui-tooling:0.1.0-dev08'
        implementation 'androidx.ui:ui-layout:0.1.0-dev08'
        implementation 'androidx.ui:ui-material:0.1.0-dev08'
        ...
    }
    

Usar visualizações em tempo real

A visualização em tempo real é um recurso do Android Studio que permite testar e comparar funções combináveis do app em várias orientações, tamanhos de fonte e temas, sem precisar implantar seu app.

Figura 1. Uso de dimensões, temas e escalonamento de fonte diferentes para visualizar funções combináveis.

Conforme mostrado na Figura 1, é possível ter várias visualizações de uma determinada função combinável, cada uma com uma restrição diferente de largura e altura, dimensionamento de fonte ou tema. À medida que você desenvolve seu app, muda recursos ou cores, suas visualizações em tempo real são atualizadas para ajudar a analisar as alterações. Além disso, você pode clicar nos elementos na visualização para navegar rapidamente para a função combinável desse elemento no editor de código.

Criar uma visualização em tempo real básica

Veja abaixo um exemplo de uma função combinável, chamada TutorialPreviewTemplate().

@Composable
    fun TutorialPreviewTemplate(
        colors: MaterialColors = lightThemeColors,
        typography: MaterialTypography = themeTypography
    ) {
        val context = +ambient(ContextAmbient)
        val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
        val post = previewPosts[0]
        MaterialTheme(colors = colors, typography = typography) {
            Surface {
                PostCardTop(post)
            }
        }
    }
    

Para criar uma visualização em tempo real, crie uma nova função combinável que não use nenhum parâmetro e inclua uma anotação @Preview antes de @Composable, conforme mostrado abaixo.

/// This is the original composable function.
    @Composable
    fun TutorialPreviewTemplate( ... ) { ... }

    // A new composable function that applies the @Preview annotation and does not
    // take any parameters.
    @Preview
    @Composable
    fun TutorialPreview() {
        // Call the composable function that you would like to
        // create a live preview for.
        TutorialPreviewTemplate()
    }
    

Ao criar ou modificar uma visualização em tempo real, é necessário recriar seu projeto para ver as mudanças. Para recriar seu projeto, clique em Create, no banner na parte superior do editor, ou selecione Build > Make Project, na barra de menus.

Figura 2. Visualização em tempo real básica de uma função combinável no Android Studio.

É possível criar várias visualizações em tempo real, que aparecem lado a lado na janela de Visualização do IDE, conforme mostrado abaixo. Isso é útil para comparar como suas funções combináveis se comportam quando, por exemplo, recebem argumentos diferentes.

/// This is the original composable function.
    @Composable
    fun TutorialPreviewTemplate( ... ) { ... }

    @Preview
    @Composable
    fun TutorialPreview() { ... }

    // This live preview uses the app's dark theme.
    @Preview
    @Composable
    fun TutorialPreviewDark() {
        // Although you can't pass arguments to the live preview function itself,
        // you can pass arguments to the composable function that it calls.
        TutorialPreviewTemplate(colors = darkThemeColors)
    }

    

Figura 3. Duas visualizações em tempo real de uma função combinável, cada uma usando temas diferentes.

Transmitir argumentos para a anotação @Preview

A anotação @Preview fornece certos parâmetros que podem ser usados para mudar como o ambiente de desenvolvimento integrado processa uma função combinável na janela Preview. Por exemplo, conforme mostrado abaixo, é possível nomear uma visualização em tempo real transmitindo uma string, que pode ajudar a identificar melhor uma visualização em tempo real.

// Pass a name for the preview to easily identify it in the Preview window.
    @Preview("Default colors")
    @Composable
    fun TutorialPreview() {
        TutorialPreviewTemplate()
    }

    @Preview("Dark colors")
    @Composable
    fun TutorialPreviewDark() {
        TutorialPreviewTemplate(colors = darkThemeColors)
    }
    

Os parâmetros @Preview complementares para os quais é possível transmitir argumentos são os seguintes:

• widthDp: a largura máxima, medida em pixels de densidade independente (dp, na sigla em inglês), que o ambiente de desenvolvimento integrado pode usar ao renderizar a visualização em tempo real. Isso é útil quando você quer visualizar sua função combinável em tamanhos de tela limitados.
• heightDp: a altura máxima, medida em dp, que o ambiente de desenvolvimento integrado pode usar ao renderizar a visualização em tempo real. Isso é útil quando você quer visualizar sua função combinável em tamanhos de tela limitados.
• fontScale: o fator de escalonamento (link em inglês), relativo à escala de densidade de base (1f), para fontes. Isso é útil quando você quer testar a função combinável para várias preferências de tamanho de fonte do usuário.

O exemplo abaixo muda o fator de dimensionamento padrão e a altura máxima para uma visualização em tempo real.

@Preview("Font scaling 1.5, height 300", fontScale = 1.5f, heightDp = 300)
    @Composable
    fun TutorialPreviewFontscale() {
        TutorialPreviewTemplate()
    }
    

Figure 4. Uma visualização em tempo real usando um dimensionamento de fonte e altura máxima modificados.