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

10. None

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