No último post falei-vos do calendário horizontal e os problemas que eu tive de tratar no calendário horizontal nomeadamente a questão do overflow dos elementos da lista de dias e das regras de negócio da aplicação como por exemplo o histórico de participações.
Hoje quero vos falar de uma funcionalidade de design que eu implementei na aplicação relativamente a itens expansíveis e colapsáveis.
Vou vos fazer um pequeno desenho:
Imaginem que eu estou a fazer uma tela de detalhes do perfil de um utilizador.
Eu tenho um objeto que contem a foto de perfil, o nome do utilizador e o seu email, no entanto eu programei para que esses itens sejam mostrados apenas quando é clicado na setinha preta. Isto são os chamados itens colapsáveis e expansíveis. Vou fazer uma analogia com frontend Web. Imaginem que eu estou a fazer uma aplicação Web usando Bootstrap:
Nesta imagem é possível ver uma lista de itens colapsáveis. Se carregarmos nos links ele vai expandir o item referente ao link. Isto são itens colapsáveis.
No Android existe muitas aplicações que utilizam itens colapsáveis. Pode-se ver por exemplo no YouTube esse sistema. Achei interessante colocar este sistema nas participações. Inicialmente, não é necessário ver em que atividades o idoso participou e a pessoa pode carregar e ver as imagens correspondentes às atividades e a respetiva informação.
Aqui poderão ver uma setinha para baixo que vai expandir a participation e mostrar os itens relativos às informações da participação, se participou em ginástica, relaxamento ou informática e outras informações:
A setinha fica para cima para colapsar os itens assim que carregar na mesma voltando ao estado original da primeira imagem.
Vejamos algum código de como fazer isto:
Em primeiro lugar, tendo já criado a RecyclerView, modifiquei o ficheiro Participation.kt e adicionei uma propriedade "expanded" do tipo Boolean:
E então é criado o efeito de colapsar e expandir. Muito simples de se fazer. Claro que há outras maneiras de fazer, mas esta é a que considero mais simples de se fazer.