O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Chips Android, Quando e Como Utilizar

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 29 Anúncio

Chips Android, Quando e Como Utilizar

Baixar para ler offline

➙ Conteúdo completo, texto e vídeo, em: https://www.thiengo.com.br/chips-android-quando-e-como-utilizar

Neste conjunto de slides vamos, passo a passo, ao estudo completo do componente chip do Material Design. Junto ao estudo vamos também trabalhar a API MaterialChipsInput.

➙ Para receber o conteúdo do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br

Abraço.


▶ Treinamento oficial:

➙ Prototipagem Profissional de Aplicativos Android: 
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR


▶ Livros oficiais: 

➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia: 
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android

➙ Receitas Para Desenvolvedores Android: 
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android 

➙ Refatorando Para Programas Limpos: 
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos 


▶ Redes: 

➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita 
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/ 
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops 
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita 


▶ Blog App: 

➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR

➙ Conteúdo completo, texto e vídeo, em: https://www.thiengo.com.br/chips-android-quando-e-como-utilizar

Neste conjunto de slides vamos, passo a passo, ao estudo completo do componente chip do Material Design. Junto ao estudo vamos também trabalhar a API MaterialChipsInput.

➙ Para receber o conteúdo do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br

Abraço.


▶ Treinamento oficial:

➙ Prototipagem Profissional de Aplicativos Android: 
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR


▶ Livros oficiais: 

➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia: 
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android

➙ Receitas Para Desenvolvedores Android: 
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android 

➙ Refatorando Para Programas Limpos: 
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos 


▶ Redes: 

➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita 
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/ 
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops 
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita 


▶ Blog App: 

➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Chips Android, Quando e Como Utilizar (20)

Anúncio

Mais de Vinícius Thiengo (12)

Mais recentes (20)

Anúncio

Chips Android, Quando e Como Utilizar

  1. 1. Chips Android, Quando e Como Utilizar Este Componente thiengo.com.br
  2. 2. O componente Chip O chip componente é uma pequena caixa que pode conter até: imagem de perfil; texto; e ícone. Na documentação do Material Design este componente é descrito como "pequena caixa complexa" podendo ser utilizado em vários contextos: tags; contatos; marcações em texto; entre outros. Para o chip componente, diferente do BottomNavigationView e de outros componentes visuais apresentados na documentação do Material Design, não temos, até o momento da publicação deste conteúdo, uma API nativa e sim várias APIs de terceiros, algumas mais completas, gerais, e outras mais especificas e menores. Neste conjunto de slides vamos demonstrar o uso do chips componente com uma library que internamente contém outras três bibliotecas sobre chips, bibliotecas que se complementam. Assim teremos somente uma API sendo referenciada diretamente, porém com uma reprodução mais próxima do demonstrado na documentação do Material Design.
  3. 3. Especificações de uso - Qualquer contexto onde seja necessário, de maneira destacada e completa, a apresentação de pequenos itens que tenham ao menos um pequeno trecho de texto: - Representação de contato, tag de conteúdo, informe publicitário, notificação interna, entre outros; - Esta parte de "ao menos um pequeno trecho de texto" é definida aqui de maneira explícita, pois na documentação do chips no Material Design isso fica implícito: não fazer sentido ter um ChipView sem um pequeno texto, mesmo que ele já tenha imagem e ícone. Note que todas as especificações para o componente chip são válidas não somente para apps Android como também para qualquer aplicativo que faz uso da linguagem de design Material Design
  4. 4. Especificações de comportamento - O acionamento de um chip pode abrir uma nova tela, mesmo que seja uma flutuante em um card, ou abrir um novo menu, também flutuante. Essa nova entidade aberta deve ter conteúdo relacionado ao chip acionado; - A opção de "deletar" pode fazer parte do chip, um ícone de remoção estará presente nele. A invocação da tecla de delete também deverá acionar a remoção do chip. Clique para visualizar a animação
  5. 5. Especificações para chip de contato Há na documentação de chip uma área somente para a formatação deste componente quanto a apresentação de informações de contato. Isso, pois chips de contato permitem um contexto mais eficiente ao usuário emissor de conteúdo (SMS, email, mensagem social, …). O user, com as informações dos chips dos usuários selecionados, saberá, sem dúvidas, quais pessoas foram escolhidas para envio. - Quando o chip de contato é acionado, deve ser aberto um menu com algumas informações extras sobre cada possível contato do chip acionado; Na documentação do Material Design, quando o chip de contato é acionado e então um menu de opções é aberto, este é considerado também um chip, porém no modo "aberto", algo não verdadeiro quando o chip não é um de contato.
  6. 6. - O chip de contato tem quatro possíveis estados: - Normal (normal); - Com focus (focused); - Pressionado (pressed); - Ativo (activated).
  7. 7. Especificações de design - Somente textos curtos, sem quebras de linha: - A exceção é para chips de contato quando no estado "aberto", onde pode haver ainda mais linhas nos itens de menu. - Os textos devem ter um tamanho de 13sp. Como cor, o preto (ou a cor de contraste com o background do chip) com o canal alpha ligado, opacidade de 87%: - Para o tamanho da fonte há uma exceção quando o chip for de contato. Quando fechado ele deve ter 14sp ao invés dos 13sp. Aberto deve ter 16sp. - A seguir as regras de dp para um single chip (chip sem ser de contato):
  8. 8. - A seguir as regras de dp para um chip de contato:
  9. 9. Codificação
  10. 10. API externa Aqui vamos utilizar a API MaterialChipsInput que a princípio é a mais completa API, presente na comunidade Android, e atende a partir do Android 15, Ice Cream Sandwich, mais de 99% dos devices Android em mercado. Dentro desta library há também códigos de outras APIs sobre o chip componente, APIs que podem ser melhores opções a ti caso o seu domínio do problema seja mais específico e não necessite de todos os possíveis chips descritos na documentação do Material Design. Seguem bibliotecas internas ao MaterialChipsInput: - Android Material Chips; - Material Chip View; - ChipsLayoutManager.
  11. 11. Instalação Coloque a seguinte referência no Gradle Project Level, build.gradle (Project: …): Coloque a seguinte referência no Gradle App Level, build.gradle (Module: app): Para ambos os arquivos Gradle: sempre utilize a versão mais atual e estável da API.Sincronize o projeto.
  12. 12. Definição em XML do ChipsInput ChipsInput é a opção do MaterialChipsInput para trabalho com chips de contato. Todos os atributos de app: são opcionais e toda a configuração em XML pode ser também criada via código de programação em alguma das linguagens oficiais do Android.
  13. 13. Definição em Programação do ChipsInput Como o ChipsInput faz uso de vários componentes visuais do Android: RecyclerView, LayoutManager e EditText. Temos também que trabalhar a inicialização via código dinâmico. Os itens de lista vinculados via setFilterableList() não são equivalentes aos itens selecionados pelo usuário. Os itens selecionados são os que foram apresentados ao usuário e ele os escolheu depois dessa apresentação, colocando-os dentro do ChipsInput. O vinculo de "itens selecionados" para com o ChipsInput é um vinculo de parent, já o vinculo da "lista de contatos para sugestão" com esse mesmo componente é um vinculo de siblings.
  14. 14. Adição de chip de contato Há mais de uma interface pública para a tarefa de adição de chip selecionado. A adição de chip via addChip() coloca este novo item na lista de chips selecionados, selectedChipList. Para a adição de chip a lista de sugestões, o processo é como adicionar um objeto a uma coleção, neste caso o acesso a coleção de sugestões é via chipsInput.filterableList.
  15. 15. Remoção de chip de contato Como para a adição, há também mais de uma interface pública para a tarefa de remoção de chip selecionado.
  16. 16. Configuração com ChipsInterface Para criar as suas próprias configurações de objeto chip, crie uma classe que implemente a Interface ChipInterface:
  17. 17. ChipsListener para eventos Se em seu domínio do problema é necessário ouvir: a entrada de texto do usuário; a criação de novos chips; ou a remoção destes. Utilize o ChipsListener: Este listener será muito útil caso em seu ChipsInput seja possível a entrada de contatos não presentes na lista de sugestão. Ao menos com o onTextChanged() é possível criar um novo chip e adiciona-lo ao ChipsInput se algumas regras forem encontradas no texto digitado, por exemplo: quando o usuário entra com um novo endereço de email.
  18. 18. Carregamento remoto de dados do ChipsInput Para dados assíncronos, que chegam ao aplicativo depois do ChipsInput já ter sido iniciado e apresentado em tela, é preciso a modificação da lista de contatos vinculada ao ChipsInput. Note que um novo objeto adicionado via chipsInput.add() não é adicionado a lista de sugestões, somente a lista de contatos selecionados. Uma outra opção a substituição completa de lista é a adição da nova coleção à já existente: chipsInput.filterableList.ad dAll( contatos ).
  19. 19. Definição em XML do ChipView O ChipView responde a todos os outros possíveis usos do componente chip, via MaterialChipsInput. Todos os atributos app: são opcionais, mas como informado anteriormente nas especificações de chip componente: não faz sentido utilizar um chip sem um rótulo em texto. Por isso, não deixe de especificar ao menos o app:label.
  20. 20. Definição em Programação do ChipView É possível criar o ChipView e toda a configuração dele também em código de programação. Porém não há obrigatoriedade do acesso via algoritmo como com o ChipsInput, podemos ter somente o XML definido e resultados visuais similares. Somente trabalhe com o ChipView via algoritmo se a sua lógica de negócio exigir. Isso é importante para manter a separação conceitos a mais precisa possível. ChipView em tela, representação de qualquer tipo de chip
  21. 21. Listeners de click e de remoção de ChipView Para trabalhar eventos nos ChipViews, tem as opções de listener de clique e listener de remoção de chip.
  22. 22. Fluxo para o carregamento de imagens remotas em chips de contato Para o trabalho com APIs de carregamento de imagens remotas, imagens de avatar, uma possibilidade é construir um algoritmo que siga o fluxo abaixo. Depois de vários testes é possível notar como é o comportamento interno do MaterialChipsInput API. Propriedades com o valor null não são utilizadas, mesmo que o null seja atribuído quando o objeto ChipInterface já tenha sido inicializado.
  23. 23. Pontos finais
  24. 24. Limitações da API - Quando a área de listagem de contatos selecionados no ChipsInput é pequena em tela, a abertura de algum dos chips, o menu flutuante, somente pode ser posteriormente fechada se deletarmos o item aberto, algo que ocasiona na remoção também do chip da listagem de contatos selecionados. Isso é um bug, pois ocorre somente nesta condição "área pequena"; - Quando há a remoção de um chip de contato por meio da listagem de chips selecionados e este chip também estava no estado "aberto", uma exceção é gerada e o app é fechado. A API deveria gerenciar este caso e remover também o chip aberto; - Não há uma maneira trivial de obter imagens remotas, algo que possivelmente será necessário quando trabalhando com chips de contato; - A documentação falha em informar sobre possibilidades de carregamentos remotos, de contatos e de imagens, e não comenta sobre o comportamento interno da API de acordo com as propriedades preenchidas. Nós developers temos de descobrir por "tentativa e erro"; - Quando, no campo de ChipsInput, é fornecido o contato de algum usuário presente na lista de sugestões, ele não é adicionado automaticamente se o user do app não seleciona-lo manualmente pela lista, fica como se fosse um novo contato. Temos de construir na mão o algoritmo dessa simples funcionalidade; - Se o addChip() for utilizado sequencialmente, uma exceção é gerada.
  25. 25. Outras APIs Caso queira estudar ainda mais APIs de componentes chip, não deixe de acessar o link a seguir no Android-Arsenal: - https://android-arsenal.com/search?q=chip
  26. 26. Conclusão Com o componente chip é possível melhorar consideravelmente a experiência do usuário e passar ainda mais profissionalismo seu ao aplicativo construído. Podemos seguramente aguardar o lançamento de uma API nativa para este componente, tanto para contatos como também para outros contextos. Mas até que essa API nativa seja desenvolvida, podemos manter o uso, por exemplo, da MaterialChipsInput que dá suporte a partir da API 15 do Android, cobrindo mais de 99% do mercado. As limitações da API estudada em slides não removem o bom custo benefício dela, mesmo assim, caso você não necessite de chips em todos os contextos possíveis, tente utilizar alguma API mais específica, que permita o trabalho somente com chips de contato, por exemplo, ou chips para tag.
  27. 27. Fontes Conteúdo completo, em texto e em vídeo, no link a seguir: - https://www.thiengo.com.br/chips-android-quando-e-como-utilizar Fontes: - https://material.io/guidelines/components/chips.html - https://github.com/pchmn/MaterialChipsInput - https://www.thiengo.com.br/como-utilizar-spannable-no-android-para- customizar-strings - https://stackoverflow.com/questions/2801116/converting-a-view-to-bitmap- without-displaying-it-in-android/3036736#3036736
  28. 28. Para estudo - Treinamento oficial: - Prototipagem Profissional de Aplicativos Android. - Livros oficiais: - Receitas Para Desenvolvedores Android; - Refatorando Para Programas Limpos. - Redes: - Udemy; - YouTube; - Facebook; - LinkedIn; - GitHub; - Twitter; - Google Plus. - Blog App.
  29. 29. Chips Android, Quando e Como Utilizar Este Componente thiengo.com.br Vinícius Thiengo thiengocalopsita@gmail.com

×