Uma maneira melhor de criar visualizações no Android com o JetPack Compose

Um pouco de história

Os usuários interagem com aplicativos móveis por meio de várias telas, geralmente compostas por múltiplas visualizações. A maneira como os desenvolvedores lidam com essas interações do usuário mudou bastante ao longo da história da plataforma Android, com o uso de diversos padrões. No início, os desenvolvedores utilizavam o padrão Model-View-Controller e, posteriormente, o padrão Model-View-Presenter (ou Model-View-Intent). Por fim, passamos a adotar o padrão Model-View-ViewModel, recomendado pelo Google. O “gerenciador de visualizações” evoluiu (Controller/Presenter/ViewModel), mas a parte da “Visualização” em si não mudou muito. A mudança mais significativa foi o uso de Fragmentos como blocos de construção da interface do usuário, em vez de Atividades, como nos primórdios.

Durante todo esse tempo, utilizávamos principalmente o XML para definir os layouts das visualizações do aplicativo. É claro que poderíamos definir essas visualizações apenas por meio de código, mas essa abordagem tem suas desvantagens. Normalmente, as applications podem ter poucas visualizações complexas e dinâmicas definidas em código, mas a maioria dos layouts de applications ainda é definida em arquivos XML atualmente.

Enquanto isso, a linguagem Kotlin foi lançada e trazia um recurso interessante que permitia definir visualizações usando uma DSL (Linguagem de Scripts) personalizada do Kotlin. Esse recurso era um conceito interessante, mas nunca recebeu atenção suficiente da comunidade de desenvolvedores do Android. Ele tinha seus problemas, mas os principais eram a falta de suporte a casos de uso avançados e a ausência de suporte oficial do Android Studio.

Por que o JetPack Compose?

Há algum tempo, o Google decidiu unificar a forma como desenvolvemos aplicativos para Android. Como parte do suíte JetPack , o Google unificou muitos aspectos da criação de aplicativos para Android. Desde a navegação, passando pelo acesso a bancos de dados, até tarefas em segundo plano e muito mais. Além disso, o Google forneceu uma base sólida para ajudar os desenvolvedores a seguirem as melhores práticas e reduzirem o código repetitivo. Como parte dessa família, surge o JetPack Compose – uma nova maneira de lidar com a interface do usuário. O JetPack Compose utiliza Kotlin e uma linguagem DSL personalizada para configurar layouts de tela, definir temas, gerenciar o estado das visualizações e adicionar animações à interface do usuário. Tudo isso é feito por meio de uma abordagem declarativa que já é amplamente utilizada em aplicativos React Native, Flutter e iOS.

JetPack Compose na prática

Já temos um pouco de contexto, então vamos dar uma olhada rápida em como podemos usar o JetPack Compose e o que podemos fazer com esse kit de ferramentas. Antes de mais nada, precisamos usar o Android Studio Arctic Fox 2020.3.1 (ou versão mais recente). Em seguida, precisamos criar um novo projeto Android (na janela “Selecionar um modelo de projeto”, selecione “Atividade Compose vazia” e clique em “Avançar”).

As instruções detalhadas podem ser encontradas abaixo aqui.

Abra MainActivity e observe que Activity herda de ComponentActivity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // … view
    }
}

Em vez de usar arquivos XML para definir visualizações, vamos defini-las na setContent lambda (método personalizado definido em Kotlin), que é um dos principais blocos de construção da DSL do JetPack Compose:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // … view
        }
    }
}

Em vez de usar tags XML para definir visualizações, usaremos os layouts e visualizações personalizados fornecidos pelo JetPack Compose — Column, Row, Box, etc.:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                Text("Alfred Sisley")
                Text("3 minutes ago")
              }
        }
    }

    @Preview
    @Composable
    fun SampleView() {
        
    }
}

O código acima cria uma única coluna com “duas linhas” (cada linha contém uma única visualização com o texto).

Daqui a pouco vamos aprender como gerar a visualização.

Cada componente pode definir sua hierarquia de visualização para permitir a criação simples de visualizações mais complexas. Nosso código de visualização pode ser extraído para “componentes” Composable por meio da criação de um método anotado com a anotação Composable:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Esses métodos (anotados com Composable ) fornecem os blocos básicos de construção para a interface do usuário das Applications. Para poder ver a pré-visualização no Android Studio, devemos anotar um método com a anotação Preview e compilar o aplicativo:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Preview
    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Também podemos aplicar alterações às propriedades de itens individuais. Vamos alterar as cores de fundo de cada linha do texto:

@Preview
@Composable
fun SampleView() {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text("Apple Juice")
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("100 ml")
        }
    }
}

Também podemos adicionar parâmetros a essas visualizações para tornar o nome e o volume do suco dinâmicos:

@Composable
fun SampleView(name: String, volume: Int) {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text(name)
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("$volume ml")
        }
    }
}

Infelizmente, não é possível visualizar previamente as visualizações parametrizadas; por isso, precisamos criar outra visualização para habilitar a visualização prévia. Agora, SampleViewPreview está anotada com a anotação Preview e utiliza SampleView:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleViewPreview()
        }
    }

    @Preview
    @Composable
    fun SampleViewPreview() {
        SampleView("Orange Juice", 50)
    }

    @Composable
    fun SampleView(name: String, volume: Int) {
        Column {
            Box(
                Modifier.background(Color.Green)
            ) {
                Text(name)
            }
            Box(
                Modifier.background(Color.Blue)
            ) {
                Text("$volume ml")
            }
        }
    }
}

O JetPack Compose gira em torno da composição, por isso podemos usar facilmente mais de uma instância do nosso SampleView:

@Preview
@Composable
fun SampleViewPreview() {
    Column {
        SampleView("Orange Juice", 50)
        SampleView("Mango Juice", 100)
    }
}

Resumo

O JetPack Compose é fácil de usar e tem um grande potencial. Você pode usá-lo para criar interfaces de usuário modernas, interativas e dinâmicas. É possível até mesmo usá-lo para criar interfaces de usuário para desktop para os aplicativos (ainda em fase alfa). A única desvantagem é que o JetPack Compose ainda não está estável (em junho de 2021), mas isso vai mudar em breve, e ele provavelmente se tornará um novo padrão para a interface do usuário do Android. Aprender a usar o JetPack Compose exige uma pequena mudança de mentalidade, mas, com as interfaces de usuário se tornando cada vez mais dinâmicas, essa abordagem orientada a estados facilitará a vida de todos os desenvolvedores.

Links

• JetPack Compose

• Exemplos de composição

• Exemplos do JetBrains Compose