sexta-feira, 25 de outubro de 2013

Delphi XE5 Android - ListView com Imagens



Esta vídeo aula tem como objetivo ensinar como criar um projeto FireMonkey Android utilizando SQLite para guardar as imagens da biblioteca e da câmera. 

Espero que gostem, qualquer dúvida, sugestão ou comentário basta comentar aqui ou no meu blog. Abraços e bons estudos.

Para download deste fonte, clique aqui.

Para acessar todo o repositório, clique aqui.

33 comentários:

  1. Muito bom parabéns, bom trabalho, só tenho uma duvida, ao instalar no tablet ele não criou o banco de dados, tem alguma dica, e se puder, ensina a gente salvar o caminho da imagem igual você disse no vídeo... vlw

    ResponderExcluir
    Respostas
    1. Muito obrigado, possivelmente você não colocou o arquivo do deploy ou colocou no lugar errado... Abraços.

      Excluir
  2. Olá Anderson,

    Vi teus vídeos e achei-os muito bons. Parabéns!
    Eu estou com umas dúvidas, não estou conseguindo resolver.
    É possível ter um DBGrid numa aplicação Android no XE5? É possível colorir as células de um StringGrid numa aplicação Android?
    Desde já agradeço
    Rodrigo

    ResponderExcluir
    Respostas
    1. Muito obrigado Rodrigo.

      Então, não existe DBGrid em projetos FireMonkey, apenas StringGrid, existe componentes como por exemplo o da TMS que tem os DBGrids.

      Você pode usar o StringGrid para quase tudo, colorir células, linhas e etc.
      Porém, a própria Embarcadero não recomenda DBGrid, StringGrid ou qualquer outra coisa que se pareça com uma Grid em projetos Mobile.

      E na minha opinião não fica muito legal, a tela do smartphone é pequena, não tem espaço pra isso, a não ser que tua aplicação seja para iPad ou Tablet.

      Meu conselho é substituir para ListView ou ListBox, foi feito especialmente para substituir esses grids e ficar mais nítido.

      Você já viu um grid em alguma aplicação iOS ou Android? Eu nunca...rsrs

      Abraços.

      Excluir
    2. Olá Anderson,
      É que estou precisando para uma aplicação bem específica. É para um monitoramento de ordens de produção numa fábrica que terá uma TV bem grande de LED com um google TV acoplado (tipo o rikomagic). Desta forma, com este Google TV, o SO será o Android. A aplicação apenas terá uma grade com informações das ordens de produção e as cores servirão para informar quais são as ordens com maior ou menor prioridade de atendimento.
      Os componentes TMS rodam em Android?
      Muito obrigado
      Att
      Rodrigo

      Excluir
    3. Oi Anderson,
      Aproveitando ainda...conseguiria me dar um exemplo de código para a opção de colorir células num StringGrid?
      Desde já agradeço
      Rodrigo

      Excluir
    4. Não sei se o Delphi compila para rodar no Google TV, teóricamente sim pois é Android mas na prática não sei.

      Sim, os componentes do TMS rodam no Android mas só a última versão.

      No momento não tenho o código aqui, da uma vasculhada no Google que você acha, muita gente faz isso.

      Abraços.

      Excluir
    5. Oi Anderson,
      Muito obrigado pela resposta. Desculpa insistir no assunto, mas os códigos de exemplo de colorir células no StringGrid são do evento OnDraw. Este evento não está disponível no StringGrid duma aplicação Mobile Android. Existem os eventos OnPaint e OnPainting, mas não tive sucesso com eles :(
      Se tiveres algum exemplo meio em mão para Mobile Android, agradeço.
      Mais uma vez, obrigado
      Rodrigo

      Excluir
  3. oi anderson
    meu nome é Anang da Indonésia, eu gosto do seu artigo sobre delphi specialy sobre android em xe5
    eu quero perguntar
    para incluir imagens no projeto basta clicar projeto -> implantação em seguida, escolha imagem
    o meu problema é
    para incluir imagem 10 é simples apenas 10 clique
    mas como se eu quiser incluir lotes de imagens no projeto 50/100/300 imagem (ex: imagem empregado) se existe uma maneira simples de fazer isso
    minha solução para este tempo imagem basta colocar no banco de dados SQLite, mas que fazem carga android app demorar um pouco
    por isso, se você poderia me dar um código de exemplo para projeto como esse eu aprecio

    obrigado

    ps.
    eu uso Traduz Google para escrever este

    ResponderExcluir
    Respostas
    1. Olá Anang, muito obrigado pelo comentário, realmente eu não consigo pensar em uma solução fácil pra você, se essas imagens são fixas, ou seja, você vai importar juntamente ao seu projeto, o jeito mais simples é usar o SQLite para guardar as imagens, você pode incluir o banco de dados já carregado, bastando exibir as imagens.

      Infelizmente não consigo pensar em outra forma...

      Abraços e boa sorte.

      Excluir
    2. Graças anderson para responder

      sim imagem colocar no banco de dados é a melhor solução para agora
      eu espero que ele será um novo recurso no delphi próxima versão para pasta colocar em implantação de projeto

      outra pergunta
      você já construir aplicação de chat como o WhatsApp
      eu tenho uma chamada de exemplo android-im, servidor web usando php e cliente usando java
      e para este tempo eu ainda recodificar java para delphi

      se você tem / já construir aplicação de chat
      ele vai ser um prazer se você pudesse compartilhar para nós
      ou talvez apenas compartilhar um método para construir aplicação de chat

      Tenho construir aplicativo para exibir contato em grade de imagem como de contatos do BlackBerry
      esta aplicação utilizando a técnica de criar uma imagem e colocar etiqueta de imagem inferior top em seguida, carregar imgae e dados formar banco de dados SQLite em tempo de execução
      Eu uso essa técnica porque para este tempo xe5 não tem um componente assim.
      se interessar eu possa lhe enviar via e-mail.


      Muito obrigado

      Excluir
    3. You can send me questions in English, I speak English.

      I did a chat but in Win32, I think it doesn't work in Mobile. But, if you want I can send you by email.

      You can use the your web service in php and the client in Delphi, I believe it work.

      The Delphi XE5 has a component to work with image (TImage).

      Good luck and good studies.

      Excluir
  4. Anderson criei um Cliente/Servidor com DataSnap, que aliás eu implementei assistindo uma das suas videoaulas, e eu precisava fazer a transferência de imagens do servidor pro meu Android... teria alguma dica ou algo parecido?
    Parabéns pelas videoaulas... tem ajudado muita gente rs... Agradecido, Pedro Carvilhe

    ResponderExcluir
    Respostas
    1. Olá...

      Isso pode-se chamar de "Download", existe como fazer e é bem simples.
      Procura na internet algo como "Download DataSnap Delphi", quando precisei fazer isso, esse link resolveu meus problemas: http://stackoverflow.com/questions/8892334/delphi-xe2-datasnap-download-file-via-tstream-with-progress-bar

      Abraços e boa sorte.

      Excluir
  5. Bom dia Anderson... Primeiramente Obrigado por compartilhar seu conhecimento através dos vídeos... Aprendi muita coisa por aqui... Estou tentando colorir um TListBox mas não consigo e não encontrei nada referente aos eventos OnPaint e OnPainting... Vc ja utilizou esses eventos, sabe se é possível trocar o background de um TlistBox em uma app Mobile?
    Att
    Nelson

    ResponderExcluir
    Respostas
    1. Bom dia Nelson, infelizmente nunca precisei fazer isso, portanto não sei como fazer e se é possível fazer.

      Assim que possível verifico pra você...

      Abraços.

      Excluir
    2. Bom dia Anderson, estou testando um código que encontrei onde consigo pintar o Objeto, assim que concluído posto o código...

      Abraço

      Excluir
    3. unit Unit1;

      interface

      uses
      System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
      FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Layouts,
      FMX.ListBox, FMX.StdCtrls, FMX.Objects, System.UIConsts;

      type
      TListBoxItemPaintBox = Class(TListBoxItem)
      public
      pbMain: TPaintBox;
      List: TStringList;
      constructor Create(AOwner: TComponent); override;
      procedure pbMainOnPaint(Sender: TObject; Canvas: TCanvas);
      end;

      type
      TForm1 = class(TForm)
      Panel2: TPanel;
      lbMain: TListBox;
      Button2: TButton;
      procedure Button2Click(Sender: TObject);
      end;

      var
      Form1: TForm1;

      implementation

      {$R *.fmx}

      constructor TListBoxItemPaintBox.Create(AOwner: TComponent);
      begin
      inherited Create(AOwner);

      self.Height := 200;
      self.Text := '';

      pbMain := TPaintBox.Create( self );
      pbMain.Parent := self;
      pbMain.Align := TAlignLayout.alClient;
      pbMain.OnPaint := pbMainOnPaint;
      end;

      procedure TListBoxItemPaintBox.pbMainOnPaint(Sender: TObject; Canvas: TCanvas);
      // pbMain.OnPaint := pbMainOnPaint;
      var
      i, vertPos: Integer;
      s: String;
      rect: TRectF;
      begin
      vertPos := 0;

      Canvas.BeginScene;
      Canvas.Clear(claRed);

      Canvas.Fill.Color := claBlack;
      Canvas.Font.Style := [];
      Canvas.Font.Size := 20;

      for i := 0 to List.Count-1 do
      begin
      s := List[i];
      rect.Create(0,
      vertPos,
      // Canvas.TextWidth(s), Width do ListBox
      250,
      vertPos+Canvas.TextHeight(s));
      // vertPos+250);
      Canvas.FillText(rect, s, false, 255, [],
      TTextAlign.taCenter ,TTextAlign.taCenter);
      // vertPos := vertPos + 15;
      vertPos := vertPos + 15;
      end;

      self.Height := vertPos;
      pbMain.Canvas.EndScene;
      end;

      //%%%%%%%%%%%%%%%%%%%%%
      {TForm1}
      //%%%%%%%%%%%%%%%%%%%%%

      procedure TForm1.Button2Click(Sender: TObject);
      var
      ListTemp: TStringList;
      aListBoxItem: TListBoxItemPaintBox;
      i: Integer;
      begin
      ListTemp := TStringList.Create;
      for i := 0 to 80 do
      ListTemp.Add(IntToStr(i));

      aListBoxItem := TListBoxItemPaintBox.Create( lbMain );
      aListBoxItem.List := ListTemp;
      lbMain.AddObject(aListBoxItem);
      end;

      end.

      Excluir
    4. Como chegou nesse código? rsrsrs...

      Interessante, depois vou testar com certeza...

      Vlw por compartilhar...

      abraços.

      Excluir
  6. Boa Tarde Anderson,

    Parabens pelo trabalho, gostaria de saber quanto a demorar para carregar um listbox, tenho uma app com 5.000 itens e para carregar demora um pouco, teria algum forma de otimizar isto ?

    Obrigado

    ResponderExcluir
    Respostas
    1. Pq cargas d'agua vc quer carregar 5.000 registros de uma vez? O seu cliente tem olho bionico ou algo assim? Como ele vai ler 5.000 registros de uma vez? Você está usando um smartphone gigante? Você já viu alguma aplicação no mundo que carregue tudo isso de registros de uma vez?

      Faça que nem o whatsapp ou qualquer outro, coloque um botão para puxar mais dados, carregue apenes 20 itens ou alguma coisa assim, se ele quiser mais registros ele clica nessa botão e mostra seguindo do mais novo para o mais velho...

      Abraços.

      Excluir
    2. Não, somente gostaria de carregar meus clientes em um listbox, meu projeto e um forca de venda , entao tenho que carregar os Clientes.

      Excluir
    3. Use listview ele é mais rápido para carregar os dados.

      Se não atingir o resultado que você quer, daí já não tem mais o que fazer, basta colocar um "aguarde..." na tela e esperar aparecer o resultado.

      Excluir
  7. Bom dia Anderson,
    Estou querendo fazer um ListView ou ListBox mais tem que ser:
    - transparente (conseguir ver o background lá trás)
    - e com imagens
    o problema é:
    eu consigo fazer o ListBox Transparente mais sem imagens
    e consigo fazer o ListView com imagens mais não transparente
    oque você poderia me indicar? Agradecido, Pedro Carvilhe

    ResponderExcluir
  8. você saberia me dizer como eu altero o tamanho de uma imagem exibida em um listbox ou listView ?

    Exemplo: ListViewItem.ItemData.Bitmap.Largura = 200;

    ResponderExcluir
  9. Oi Anderson, boa noite.
    Estou com uma dificuldade, você sabe como deixar o ListView Transparente para aparecer apenas o texto?
    No Eclipse era simples mas aqui não estou encontrando.

    ResponderExcluir
    Respostas
    1. Caros Anderson e Elisangela,
      Estou tendo a mesma dificuldade...vocês conseguiram deixar os items do ListView transparentes? Caso tenha conseguido, como se faz?

      Excluir
  10. gostaria de saber como formatar uma data , valor no listview

    ResponderExcluir
  11. Anderson, muito boa sua iniciativa. Meus parabéns. Gostaria de saber se dá pra fazer este mesmo exemplo, utilizando o FireDAC, pois tentei usar com ele e no ListView não aparece o item.image.
    Abraço!

    ResponderExcluir
  12. Ola muito bom amigo meus parabens, me deu outra visão, mas vamos a minha duvida, tenho um datasnap rodando e estou fazendo um app teste parecido com o que foi feito no seu exemplo ... a duvida é, eu gravo no banco apenas o caminho da imagem ...
    Como vou fazer isso no App, qdo eu conecto o link ele da erro.

    ResponderExcluir