Tutorial: ListView personalizado para aplicações mobile
Portal TDevRocks > RAD Studio > Tutorial: ListView personalizado para aplicações mobile
Category:	RAD Studio Tutoriais XE8 [Tutorial]
Acreditamos que uma das principais dúvidas de grande parte dos desenvolvedores Delphi em relação a criação de aplicativos para as plataformas iOS e Android é: Como desenvolver um design atraente para minhas aplicações? Resolvemos criar alguns tutoriais para falar um pouco sobre o tema e dar dicas de criação de layouts. Nesse primeiro tutorial, veremos como criar um ListView com múltiplos detalhes e ainda por cima personalizar as informações mostradas.
Dividimos esse tutorial em duas partes. Na primeira delas vamos ver como instalar a sub-propriedade MultiDetailItem (Figura 1) no ListView e em seguida veremos como fazer a customização dos itens.
Figura 1. Sub-propriedade MultiDetailItem
Se você estiver com seu RAD Studio ou Delphi aberto, insira um ListView em um formulário e em seguida localize a propriedade ItemAppearance e novamente em ItemAppearance. Veja que você possui somente até a opção ListItemRightDetail, isso porque a pré-instalação do ListView não possui essa opção. Para fazer aparecer, precisamos reinstalar o componente que fica no campo Samples do Delphi. Confira abaixo:
RAD Studio, Delphi e C++ Builder 10 Seattle
C:\Users\Public\Documents\Embarcadero\Studio\17.0\Samples\Object Pascal\Multi-Device Samples\User Interface\ListView\ListViewMultiDetailAppearance
RAD Studio, Delphi e C++ Builder XE8
C:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\Object Pascal\Mobile Samples\User Interface\ListView\ListViewMultiDetailAppearance
Nessas pastas informadas acima, você encontrará o arquivo SampleListViewMultiDetailAppearancePackage.dpk referente ao pacote que devemos instalar. Abra esse arquivo no Delphi, clique com o botão direito do mouse sobre o nome do projeto na janela Project Manager e em seguida escolha Install. Após fazer isso, crie um novo projeto mobile, faremos um pequeno projeto para demonstrar o uso do ListView com múltiplos detalhes.
Modifique a largura do formulário para 320px usando a propriedade Width. Em seguida insira um ListView e configure-o para ocupar toda a área do form usando a propriedade Align. Por fim insira um componente PrototypeBindSource. Esse componente é usado para criar protótipos de aplicativos. Com ele conseguimos simular algumas funcinalizades relacionadas a bancos de dados locais. Vamos aprender a usa-lo.
Depois de inserido em tela, clique duas vezes no componente. Uma pequena janela (Figura 2) se abrirá e nós incluiremos itens, simulando campos de uma tabela.
Figura 2. Adição de campos
Clique no único botão ativo dessa janela no momento, o botão Add New. Na janela seguinte você encontra alguns templates de campos, cada um com seu respectivo tipo de dado, tais como: Integer, String, Boolean, e assim por diante. Clique uma vez sobre o item ContactBitmaps para que possamos adicionar um campo tipo FOTO. Em seguida, se preferir, dê um nome a esse campo digitando em Field Name. Uma sugestão seria fldFoto (Figura 3).
Figura 3. Exemplo de inserção de campo
Perceba que cada campo inserido possui propriedades que podem ser modificadas. Clicando no campo fldFoto por exemplo, podemos modificar o tipo do campo em FieldType e o gerador automático de imagens em Generator. Repita esses passos para inserir os seguintes campos:
Campo: ContactNames
Nome: fldNome
Campo: Integers (role para baixo na lista)
Nome: fldIdade
Generator: UIntegers (Números Positivos)
Nome: fldDTCadastro
Com esse procedimento efetuado, nós criamos uma "tabela" virtual que poderá ser usada para simular uma listagem de dados. Feche essa janela de criação de campos e observe as propriedades do componente PrototypeBindSource1. Perceba que temos algumas propriedades semelhantes as que etamos acostumados em componentes de dados, tais como DataSources e ClientDataSets. Veja que temos a opção AutoEdit que nos permite colocar o nosso "DataSet" virtual em modo de edição ao iniciar a digitação dentro de um campo. Também possuímos RecordCount. Perceba que o default é "-1", isso fará com que o próprio Delphi crie uma lista de regsitros. Caso você queira aumentar ou diminuir essa lista, basta alterar a informação. Por exemplo: se inserirmos o valor 300, então 300 linhas serão inseridas em nosso protótipo.
Agora faremos a configuração no ListView. Selecione o componente e em seguida vá até a propriedade ItemAppearance > ItemAppearance. Selecione a opção MultiDetailItem. Agora vamos ligar as propriedades do ListView aos campos da nossa tabela virtual. Clique com o direito no form e selecione Bind Visually. Note que temos em tela dois itens, um para cada componente, ListView1 e PrototypeBindSource. Faça a ligação do asterísco do PrototypeBindSource no campo Synch do ListView. Isso fará com que a tabela seja "ponteirada" sempre que o usuário tocar em um item do ListView. Se tiver dúvidas quanto a esse procedimento, assista ao nosso vídeo no YouTube sobre o assunto. Faça a ligação agora dos demais campos as respectivas propriedades, como abaixo:
fldFoto => Item.Bitmap
fldNome => Item.Text
fldIdade => Item.Detail1
fldDTCadastro => Item.Detail2
A Figura 4 podemos ver como nossa janela ficará após todas as ligações terem sido efetuadas. Notaremos também que as figuras, fotos, dos contatos não aparecem, provavelmente porque a propriedade referente a imagem está marcada como False, nesse caso Visible = False. Selecione o ListView e abra a propriedade ItemAppearanceObjects >> ItemObjects. Essa propriedade possui as demais propriedades referentes a cada item do ListView. Verifique em ItemObjects as opções Accessory, Image, MultiDetail1, MultiDetail2 e MultiDetail3. Abra a opção Image e marque True na propriedade Visible. Veja o resultado na Figura 5.
Figura 4. Ligações de propriedades
Figura 5. Imagem sendo mostrada
Esse é o padrão do componente ListView, é claro que podemos usar um dos estilos que já acompanham a instalação do Delphi para iOS ou Android e obter um visual mais elaborado. Entretanto a ideia aqui é explorar algumas das principais características que podem nos ajudar a melhorar o design. Uma delas é a propriedade Font presente em cada uma das sub-propriedades MultiDetail. Faça um teste: selecione a sub-propriedade MultiDeatil1 e modifique a TextColor para Vermelho. Você também pode clicar duas vezes na propriedade Font e alterar o tamanho dela. Isso pode ser feito para todos os detalhes, como pode ser visto na Figura 6.
Figura 6. Alterando fonte
Perceba apenas que não conseguimos alterar a fonte do header, ou seja, do título de cada item, em nosso caso o Nome. Isso porque a propriedade Text não está pública no Object Inspector. Teremos que trabalhar um pouco mais para que isso seja possível.
Alterando o componente ListView
Teremos que efetuar uma pequena alteração no componente que acompanha o Delphi, mas calma, o processo é simples e não requer conhecimentos avançados para executar a operação. Feche o projeto atual usando File >> Close all e em seguida abra novamente o pacote do componente que instalamos nas seções anteriores, ou seja, o arquivo SampleListViewMultiDetailAppearancePackage.dpk naquele diretório enorme. Olhe no Project Manager à direita e veja que temos apenas uma Unit nesse pacote, o arquivo MultiDetailAppearanceU.pas. Clique duas vezes nele e em seguida localize a seção de propriedades, mais ou menos na linha 60. Após a propridade Image, inclua uma nova, a propriedade Text. A propriedade Text existe, mas encontra-se invisível ao Object Inspector. Então o que estamos fazendo é redeclarando-a.
Feito isso, compile novamente o pacote e clique em Install, como fizemos anteriormente. Abra agora o nosso projeto exemplo e vá novamente a sub-propriedade ItemObjects em ItemAppearanceObjects e note que junto das demais, aparece também o Text. Altere as propreidades que desejar, veja na Figura 7.
Figura 7. Propriedade Text alterada
Observe nas Figuras 8 e 9 a inserção na propriedade no componente.
Figura 8. Propriedade Text
Figura 9. Struture do Delphi atualizado
Como pudemos ver nesse tutorial, melhorar o design de nossa aplicação para iOS e Android não é nenhum "bicho de 7 cabeças" nem tão pouco exige conhecimentos avançados. Em próximos tutoriais veremos como incluir fontes personalizadas no aplicativo, tanto para as duas plataformas.
Baixe o código-fonte aqui
D10 RAD10
Tutorial: Usando fonte customizada no Android TDevRocks
17 de setembro de 2015 at 1:17
[…] ListView Personalizado […]
Tutorial: Criando um menu personalizado para iOS e Android TDevRocks
26 de setembro de 2015 at 1:58
[…] ListView personalizado para aplicações móveis […]
Tutorial: Salvar foto no banco SQLite com Android e iOS TDevRocks
5 de outubro de 2015 at 6:34
[…] Ainda dentro da primeira TabItem adicione um componente TListView com o nome igual a lsviewListagem e coloque-o como alinhamento Client. Modifique a sub-propriedade ItemAppearance dentro da propriedade ItemAppearance (existe duas propriedades mesmo, uma dentro da outra) escolhendo o valor MultiDetailItem (Figura 1). Esse valor somente existe se você já instalou o componente ListView que acompanha o Delphi, caso não o tenha feito, siga esse tutorial. […]