Jetpack Compose Um novo jeito de construir Views no Android

Transcript

1. Jetpack Compose Um novo jeito de construir Views no Android
2. Marina S. Coelho • Desenvolvedora Android desde 2015 • Formada em Sistemas de Informação • Escritora no Medium • São José/SC • marinacoelho.com Quem? Houssan A. Hijazi • Desenvolvedor Android desde 2013 • Formado em Análise de Sistemas • Organizador do GDG Foz do Iguaçu • Foz do Iguaçu/PR • hussan.com.br
3. O Jetpack Compose é um kit de ferramentas moderno do Android para criar Interface de Usuário nativas que se tornou estável em 28 de julho de 2021. Ele simplifica e acelera o desenvolvimento da IU no Android para dar vida aos seus apps com menos código, ferramentas poderosas e APIs Kotlin intuitivas. Ele combina um modelo de programação reativa. A ideia é criar IU através de composição de funções Kotlin, ao invés de arquivos XML. Jetpack Compose
4. Todas as ações, quando falamos sobre programação reativa, são transmitidas e detectadas por um fluxo de dados: • Eventos • Mensagens • Fluxo de dados Aplicações reativas são constituídas por reações a alterações nestes fluxos de dados. Programação reativa
5. Motivos para migrar/iniciar seu app com Jetpack Compose
6. Layout XML Layout Compose
7. • Menos código • Mais intuitivo • Curva de aprendizado e desenvolvimento rápido • Eficiente Vantagens em comparação ao Layout XML
8. Ótimo suporte, documentação e tutoriais
9. Codelab
11. Iniciando com Jetpack Compose
12. Ambiente de desenvolvimento • Android Studio Arctic Fox • Criar novo projeto • API de nível 21+ • Criar Atividade Compose Vazia
13. Tudo inicia com setContent
14. Tipos de Layout • Column para colocar itens na tela verticalmente • Row para colocar itens na tela horizontalmente • Box para colocar um elemento sobre outro
15. Posicionamento no Layout
16. • Mudar aparência, tamanho e comportamento dos elementos • Adicionar o clique, rolagem ou redimensionamento • A ordem dos modificadores é importante • padding, clickable, fillMaxWidth, size etc… Modificadores
17. Modificadores
18. Ordem dos modificadores
19. Resources • stringResource, colorResource, dimensionResource...
20. Temas
21. Tipografia É possível aplicar uma tipografia em um texto específico, ou adicioná-la diretamente ao tema, afetando assim todos os textos da atividade.
22. LazyColumn (a antiga RecyclerView) É possível criar um método genérico para configurar todos os items, ou criar cada item separadamente. É possível também combinar os dois.
23. Preview
24. Gerenciamento de estado O estado em um app é qualquer valor que pode mudar ao longo do tempo. Essa é uma definição muito ampla e abrange tudo, de um banco de dados até a variável em uma classe. Em um Layout Compose, sempre que um estado é atualizado, ocorre uma recomposição dos elementos que estão ouvindo este estado. • MutableState (recomendado para Jetpack Compose) • LiveData • RxJava2 • Flow
25. As funções do Compose podem armazenar um objeto na memória usando o elemento remember. Um valor calculado por remember é armazenado durante a composição inicial, e o valor armazenado é retornado durante a recomposição. O remember armazena objetos na composição e esquece o objeto quando o elemento que ouve este remember é removido da tela. Gerenciamento de estado
26. Combinando com Layout XML 1 - Adicione uma ComposeView no XML referente à sua Atividade. 2 - Use o id deste elemento para usá-lo via código, utilizando o mesmo método setContent que vimos anteriormente.
27. Testes O teste de IUs ou de telas é usado para verificar o comportamento correto do código do Compose. Através destes testes podemos ter certeza que os elementos da nossa Atividade estão reagindo da forma esperada aos eventos que acontecem em nosso código. Sejam estes eventos disparados pelo View Model, ou pela interação do usuário com a tela (como, por exemplo, clicando em elementos da IU).
28. Testes • Finders: permitem selecionar um ou vários elementos. (onNode, onAllNodes...) • Declarações: usadas para verificar se os elementos existem ou têm determinados atributos. (assertExists, assertIsDisplayed, assertTextEquals…) • Ações: injetam eventos de usuário simulados nos elementos. (performClick, performKeyPress, performGesture...)
29. Perguntas? Obrigado!
30. • https://developer.android.com/jetpack/compose • https://developer.android.com/codelabs/jetpack-compose-migration#0 • https://www.jetpackcompose.app/What-is-the-equivalent-of-flow.colle ct-in-Jetpack-Compose • https://www.treinaweb.com.br/blog/o-que-e-programacao-reativa • https://android-developers.googleblog.com/2021/07/jetpack-compose- announcement.html • https://developer.android.com/codelabs/jetpack-compose-testing • https://developer.android.com/jetpack/compose/testing-cheatsheet Referências