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.

Tutorial: ListView personalizado para aplicações mobile

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:

• Nome do Usuário:
  • Campo: ContactNames
  • Nome: fldNome
• Idade:
  • Campo: Integers (role para baixo na lista)
  • Nome: fldIdade
  • Generator: UIntegers (Números Positivos)
• Data do Cadastro:
  • Campo: Date
  • 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.

    property Text;

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

Conclusão

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

#GoToDelphi