Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose Um novo jeito de construir Views no Android

Jetpack Compose Um novo jeito de construir Views no Android

B59b1bd643ff429bb27032b05d4f2e23?s=128

Houssan A. Hijazi

November 22, 2021
Tweet

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