Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Jetpack Compose Um novo jeito de construir View...

Jetpack Compose Um novo jeito de construir Views no Android

Houssan A. Hijazi

November 22, 2021
Tweet

More Decks by Houssan A. Hijazi

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. • Menos código • Mais intuitivo • Curva de aprendizado

    e desenvolvimento rápido • Eficiente Vantagens em comparação ao Layout XML
  5. Ambiente de desenvolvimento • Android Studio Arctic Fox • Criar

    novo projeto • API de nível 21+ • Criar Atividade Compose Vazia
  6. Tipos de Layout • Column para colocar itens na tela

    verticalmente • Row para colocar itens na tela horizontalmente • Box para colocar um elemento sobre outro
  7. • 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
  8. Tipografia É possível aplicar uma tipografia em um texto específico,

    ou adicioná-la diretamente ao tema, afetando assim todos os textos da atividade.
  9. 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.
  10. 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
  11. 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
  12. 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.
  13. 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).
  14. 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...)
  15. • 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