Introdução ao Jetpack Compose

O Jetpack Compose é um moderno kit de ferramentas de interface do usuário lançado recentemente pelo Google, usado para criar interfaces de usuário nativas do Android. Ele simplifica e acelera o desenvolvimento da interface do usuário com menos código, APIs Kotlin e ferramentas poderosas.

O Jetpack compose nos dá a oportunidade de criar diferentes interfaces de usuário chamadas de Declarative Framework e fazer essa transação em modo nativo.

Você pode ter visto que os códigos que foram escritos com Flutter e React Native, tornaram a interface do usuário, e agora você pode fazer tudo isso com o Jetpack Compose.

Observação : o Jetpack Compose foi lançado em março de 2021. Você precisa do Android Studio Artic Fox para usar o Compose que funciona no mínimo SDK 21 .

Por que devemos usar o Jetpack Compose?

• Declarativo: é totalmente declarativo para que você possa descrever seus componentes de interface do usuário chamando algumas funções predefinidas.
• Compatível: É facilmente compatível com as visualizações existentes presentes no Android.
• Aumente a velocidade de desenvolvimento: anteriormente, os desenvolvedores precisavam trabalhar no arquivo XML e no arquivo Kotlin. Mas com a ajuda do jetpack compose, isso se torna fácil e os desenvolvedores só precisam trabalhar nos arquivos Kotlin, por isso ajudará os desenvolvedores a aumentar a velocidade de desenvolvimento.
• Kotlin conciso e idiomático: o Jetpack Compose criou a IU com o benefício que o Kotlin traz.
• Fácil de manter: Como a base de código de qualquer aplicativo está presente em um único arquivo. Torna-se fácil gerenciar e manipular a base de código do aplicativo.
• Escrito em Kotlin: O aplicativo escrito usando jetpack compose usa 100% da linguagem de programação Kotlin.

Com o novo recurso que acompanha o Compose, você pode ver a saída sem emulador.

Crie um projeto escolhendo uma nova atividade de composição vazia e examine a estrutura principal do Jetpack Compose.

Quando escolhemos Empty Compose Activity, a classe MainActivity virá como abaixo.

A primeira coisa que você percebe é que Main Activity foi herdada de ComponentActivity , não AppCompatActivity.

Revise para gradle, com o Jetpack Compose, você verá que o campo foi adicionado conforme abaixo.

Se abrir o projeto como EmptyActivity, você precisa adicionar dependências conforme abaixo.

Dissemos que você pode ver o design sem construir em tempo de execução.

Quando escolhemos a visualização dividida , podemos ver a visualização dos códigos Kotlin que escrevemos.

Anotação @Preview: você pode adicionar parâmetros manualmente em seu código para personalizar a maneira como o Android Studio renderiza a anotação de visualização.

Ao mesmo tempo em que queremos ver toda a tela ou item, podemos adicionar itens sob a anotação.

As funções que podem ser compostas são os blocos de construção fundamentais de um aplicativo criado com o Compose.
Composable pode ser aplicado a uma função ou lambda para indicar que a função/lambda pode ser usada como parte de uma composição para descrever uma transformação de dados de aplicativo em uma árvore ou hierarquia.

O código abaixo torna o objeto TextView que está em xml, como Composable.

A classe de texto é uma classe que pode ser composta e recebe muitos parâmetros.

Se iniciarmos uma atividade normal, damos um layout para dentro de setContentView , mas agora para compor usamos setContent .

Na classe setContent, você pode ver que ela deseja parâmetros combináveis ​​escritos por nós conforme abaixo.

Cumprimentar é uma composição. Podemos dar essa composição para dentro de setContent quando o aplicativo é aberto.

Quais funções simples aprendemos neste artigo por enquanto?

• Função que pode ser composta: a função que pode ser composta é representada no código usando a anotação @Composable no nome da função. Essa função permitirá que você defina a interface do usuário do seu aplicativo programaticamente, descrevendo sua forma e dependências de dados, em vez de focar no processo de construção da interface do usuário.
• Função de visualização: o próprio nome da função nos diz que a função é usada para gerar a visualização da função que pode ser composta. Ele é usado para exibir uma prévia de nossas funções combináveis ​​em nosso IDE, em vez de instalar nosso APK em um emulador ou dispositivo virtual.

Se você estiver interessado em SwitfUI no iOS, recomendo que você verifique o artigo de Pınar Koçak .

Recursos