Upload
elias-jr-cescon
View
236
Download
0
Embed Size (px)
Citation preview
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
1/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 1/13
22
Compartilhe
A criação de interfaces de usuários é um problema na hora dedistribuir os aplicativos, afinal são diversos dispositivos,resoluções e telas diferentes. Nesta postagem veremos umexemplo de como construir uma interface simples de uma Telainicial para aplicativo Android com Delphi XE5.
Direto ao ponto
DELPHI
CONSTRUINDO UMA TELA INICIAL PARA
APLICATIVOS ANDROID COM DELPHI XE5AGOSTO 4, 2014 | LANDERSON GOMES | 31 COMENTÁRIOS
Landerson Gomes
http://vivaitaocara.com.br/landersongomes/http://-/?-http://vivaitaocara.com.br/landersongomes/author/landersonhttp://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5http://vivaitaocara.com.br/landersongomes/category/embarcadero/delphi
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
2/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 2/13
Inicie um nova aplicação Delphi Mobile em branco, como já fizemos isso algumas vezes vamos
avançar até a parte da nossa aplicação especificamente. No formulário principal adicione 1 Label
e 1 GridPanelLayout. E para suas propriedades configure como descrito abaixo:
Label1
Align -> alTop
TextAlign -> taCenterText -> Menu Principal
GridPanelLayout1
Align -> alClient
Um pouco sobre o GridPanelLayout
Este componente será responsável por fornecer um layout estilo tabela a nossa tela. Ele trabalha
com coleções de Linhas, Colunas e Controles, e por padrão ele traz já previamente configurados2 pares de linhas e colunas. Veja na imagem abaixo:
Vamos trabalhar para fins didáticos com 2 colunas e 3 linhas, a cada coordenada Linha, Coluna denosso GridPanelLayout estaremos disponibilizando uma função em nossa aplicação.
Definindo a aparência
Selecione os dois TColumnItem e certifique-se que suas propriedade SizeStyle esteja setada como
ssPercent. E à sua propriedade Value vamos atribuir 50, isso fará com que cada uma de nossas
colunas ocupem 50% do GridPanelLayout , que por sua vez ao ser definido como alClient ocupa
toda a largura de tela do dispositivo.
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
3/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 3/13
Agora vamos inserir mais uma linha em nosso GridPanelLayout , para isso clique com o botão
direito sobre RowColection e selecione a opção Add Item.
Vamos efetuar o mesmo procedimento que fizemos com os TColumnItems , ou seja vamos
selecionar todos os TRowItems e alterar suas propriedade SyzeStyle e Value, sendo que a esta
última atribuiremos o valor 33, ou seja, 33% da altura de nosso GridPanelLayout para cada uma
das linhas.
Em seguida adicione 6 TImageControl e adicione uma figura de sua escolha para cada um deles
alterando sua propriedade Bitmap clicando em Bitmap -> Edit , depois Load para carregar o
arquivo de imagem selecionado. Ao final do processo você terá algo muito próximo da imagem
abaixo:
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
4/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 4/13
Explore a criatividade
Para cada ImageControl você deve atribuir uma função no seu evento onClick para que quando o
usuário clique na imagem a função seja chamada. Note ainda que as propriedades de tamanhodas imagens existem e devem ser exploradas por você a medida que sua resolução/tamanho de
tela for aumentado.
A ideia está lançada, agora é só usar de acordo com sua necessidade.
Fonte: Sarina DuPont ‐ Gerente de Produto Embarcadero
31 OPINIÕES SOBRE “CONSTRUINDO UMA TELA INICIAL PARA APLICATIVOS ANDROID
COM DELPHI XE5”
Relacionado:
ANDROID DELPHI DELPHI XE5 DESENVOLVIMENTO TUTORIAL
http://vivaitaocara.com.br/landersongomes/tag/tutorialhttp://vivaitaocara.com.br/landersongomes/tag/desenvolvimentohttp://vivaitaocara.com.br/landersongomes/tag/delphi-xe5http://vivaitaocara.com.br/landersongomes/tag/delphi-2http://vivaitaocara.com.br/landersongomes/tag/androidhttp://blogs.embarcadero.com/sarinadupont/2014/06/16/mobile-user-interface-design-home-screen-navigation/
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
5/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 5/13
AGOSTO 4, 2014 ÀS 19:50
Excelente .. obrigado por compartilhar
AGOSTO 12, 2014 ÀS 20:35
Boa noite Landerson, mais uma vez venho aqui lhe pedir ajuda ! hehehe Cara como faço ou
como devo pesquisar para resolver o seguinte: Diferentes tamanho de telas de dispositivo.
Tablet e celular ? Obrigado pela ajuda.
AGOSTO 13, 2014 ÀS 14:03
Tiago… vou te colocar com a Gerência Nacional de Perguntas Difíceis rsrs.
Brincadeira a parte meu amigo, eu tenho usado postagens da Sarina como referência
principalmente em questões de layout de aplicativos.
Dê uma pesquisada: Sarina DuPont. Tente aí … ela tem muita postagem sobre o assunto.
Abração.
AGOSTO 22, 2014 ÀS 12:00
Caro Landerson,
Tem como mudar a cor de fundo do form para branco ou deixar a imagem transparente?
Abraços.
AGOSTO 22, 2014 ÀS 13:04
Olá… com relação à cor do Formulário vou dar uma olhada, mas acredito sim que é
possível, tendo o resultado dos testes publico algo.
E as imagens, note que você pode carregar PNG, que permite transparência, logo tente o
teste com uma… assim sendo acredito também que funcione.
Abraço.
AGOSTO 26, 2014 ÀS 09:36
João
TIago
Landerson Gomes
Datasoft
Landerson Gomes
Datasoft
https://www.facebook.com/joaocarloscordeirohttp://-/?-http://-/?-http://-/?-http://blogs.embarcadero.com/sarinaduponthttp://-/?-http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
6/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 6/13
Só consegui transparência na imagem com o TImage e o fundo do forma sempre fica na cor
cinza. Se descobrir como mudar a cor do form me avisa.
Abraços.
AGOSTO 26, 2014 ÀS 11:34
Consegui usando o componente StyleBook onde eu posso mudar o background e opções de
transparência para cada objeto visual.
Espero que ajude outras pessoas.
SETEMBRO 5, 2014 ÀS 10:21
Landerson, parabéns pelas postagens !
Sou iniciante em Delphi XE5.
Gostaria de saber se você tem alguma dica onde encontro icones gratuitos p/ utilização no
Android p/ baixar.
SETEMBRO 6, 2014 ÀS 22:46
Olá Carlos… seja muito bem vindo ao blog!
Particularmente eu não uso um site específico não, sempre busco imagens para cada
situação e às vezes com uma que se aproxime do que desejo acabo chamando a ajuda de
um especialista para modificá-la pra mim.
Entretanto, ao você me perguntar resolvi fazer uma busca e achei 2 casos aqui que
parecem ser bem legais e gratuitos, veja:
http://www.icons4android.com/
http://www.iconspedia.com/search/android/
Espero que os links e as postagens o ajudem, novamente obrigado e fique a vontade!
Abraço.
SETEMBRO 10, 2014 ÀS 14:59
Muito obrigado Landerson.
Datasoft
Carlos Souza
Landerson Gomes
Carlos Souza
http://-/?-http://www.iconspedia.com/search/android/http://www.icons4android.com/http://-/?-http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
7/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 7/13
Abraço.
SETEMBRO 17, 2014 ÀS 14:12
Olá, gostaria de saber como posso imprimir de uma aplicação android feita no Xe5 / Xe6 sem
instalar aquelas impressoras “na nuvem” oou seja, eu tenho um tablet lançando um pedido, elá no servidor as impressoras, preciso de um botão no android que que imprima o pedido lá
no servidor
SETEMBRO 19, 2014 ÀS 07:32
Olá Adriano, seja bem vindo!
Já vi o que você deseja em uma apresentação do amigo Claudemir da Daruma… até citeiisso num post em um dos grupos do Facebook que participo.
Implementar eu nunca implementei, mas caso queira dar uma olhada, de uma conferida no
vídeo https://www.youtube.com/watch?v=VyUzFFfK–k, então vai ver que é possível sim!
Espero que o vídeo te ajude e te dê um norte aí no seu desafio, apenas lembrando que
quando assisti a apresentação do Claudemir no o mesmo disse que a Daruma
disponibilizava o Daruma Mobile Framework Android(Utilize a camada DMF para
comunicação com Impressoras Fiscais e Não Fiscais na plataforma Android)
gratuitamente, então vale a pena procurar por ele.
Um abraço e boa sorte aí!
SETEMBRO 22, 2014 ÀS 22:16
Voce recomenda criar forms para a aplicacao ?
por exemplo cria-se o menu, e a partir dele abrir uma tela de consulta de clientes, em um
form novo ?
Obrigado
SETEMBRO 23, 2014 ÀS 09:48
Olá felipeiw… bem vindo! O ideal seria testar o desempenho, talvez a aplicação a que se
adriano
Landerson Gomes
felipeiw
Landerson Gomes
http://adrianosites.com.br/http://-/?-http://-/?-http://www.desenvolvedoresdaruma.com.br/home/index.phphttps://www.youtube.com/watch?v=VyUzFFfK--khttp://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
8/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 8/13
refere possa ser concebida utilizando apenas um Tabcontrol.
Mas optando pela criação de vários forms, crie apenas quando for utilizá-los e sempre
destrua após sua utilização, liberando sempre a memória.
(Lembre-se que cada form já é adicionado com auto create as opções de projeto, portanto, retire-
os de lá deixando apenas o form inicial e na aplicação crie e exiba a medida que for utilizando… é
isso!)
Espero tê-lo ajudado! E se puder me mande um feedback de como ficou sua aplicação,
quem sabe um foto ou um vídeo dela em funcionamento!
Abraço e sucesso aí!
SETEMBRO 23, 2014 ÀS 21:52
obrigado pela resposta landerson
estou sim criando somente no momento do uso, e estou fazendo da seguinte maneira
var
F1Pedidos: TF1Pedidos;
begin
F1Pedidos := TF1Pedidos.Create(self);
F1Pedidos.ShowModal(procedure(ModalResult: TModalResult)
begin
if (ModalResult = mrOk) then
begin
F1Pedidos.DisposeOf;
end;
end);
porem estou precisando voltar variavel do formulario aberto para o formulario principal,
criei uma variavel global, mas nao estou conseguindo, voce tem algum sujestao para isso.
Abs
ABRIL 6, 2015 ÀS 15:11
Olá.
felipeiw
Manoel Zancheta
http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
9/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 9/13
Você conseguiu fechar o form com disposeof?
Não estou conseguindo, dá erro access violation.
ABRIL 6, 2015 ÀS 20:23
Manoel bem vindo!Como eu uso Android na maioria dos caso, não costumo usar DisposeOf.
Dou preferência ao tratamento pelo: SharedActivity.Finish;
Você pode fazer uma checagem pelas diretivas de compilação de qual plataforma
está utilizando e fechar pelo método de cada uma delas.
Espero tê-lo ajudado!
Obrigado por sua participação!
NOVEMBRO 4, 2014 ÀS 11:14
Olá Landerson!
Estou fazendo um programa para faculdade usando o TabControl e gostaria de saber como
que eu programo para que ao clicar na foto possa mudar de tela (tab item).
Obrigada desde já, o post foi muito útil!
Julianne
NOVEMBRO 4, 2014 ÀS 14:25
Olá Juliane tubo bem?! Primeiramente seja muito bem vinda ao blog!
Com relação ao seu questionamento temos o seguinte: O componente TabControl possui
a propriedade ActiveTab, nela você informa o TabItem que está ativo naquele momento.
Outra forma para controlar qual TabItem estará ativo num TabControl é através da sua
propriedade TabIndex, que na verdade representa a mesma coisa entretanto neste caso
você deve passar um valor (integer) correspondente ao índice do TabItem que deseja que o
ativo no momento.
Depois dessa parte teórica, seu código no evento OnClick da Imagem seria:
TabControl1.TabIndex := 0; // Aqui no caso, 0 é o índice do primeiro TabItem
Landerson Gomes
Julianne
Landerson Gomes
http://-/?-http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
10/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 10/13
Espero ter explicado mais do que complicado (rs).
Obrigado por sua participação e mande um feedback de como ficou o trabalho depois!
Até a próxima!
JANEIRO 6, 2015 ÀS 14:59
Olá Anderson, tudo bem?
Vi uma de suas respostas sobre usar vários forms, mas gostaria de saber se além de criar
vários forms posso criar vários datamodulos.
Minha app teria vários módulos com um form principal e um dtm principal e somente quando
o usuário utilizar um determinado modulo eu daria um create no form e no dtm.
Seria mais ou menos assim, posso usar desta maneira?
Obrigado.
JANEIRO 6, 2015 ÀS 21:50
Olá Edson, obrigado por sua participação! Seja bem vindo!
Com relação aos DataModules não cheguei a projetar nada nesse sentido ainda, mas
acredito que seja no mesmo formato, ou seja, você cria e instancia a medida que for
necessitando utilizá-los lembrando sempre de liberá-los ao final da utilização.
Acredito que seja assim.
Até a próxima!
Landerson.
MARÇO 7, 2015 ÀS 09:40
Procurei na internet sobre trocar o ícone padrão do app android construído em delphi, e
nenhuma ajuda sobre. Em tempo de construção no delphi.
Edson Dias
Landerson Gomes
Nilton
Landerson Gomes
http://-/?-http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
11/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 11/13
MARÇO 7, 2015 ÀS 10:50
Olá Nilton bem vindo e obrigado por sua participação!
A opção que você procura está no Menu: Project –> Options –> Application, ao acessá-lo
a tela abaixo será exibida.
Aí você pode trocar os ícones, Splash, definir orientação.
Espero que ajude!
Até a próxima.
ABRIL 7, 2015 ÀS 15:31
Boa tarde amigos
Estou precisando de uma ajuda, sou iniciante na programação Mobile com delphi, gostaria de
saber qual é a forma correto para carregar um formulário.
No Windows podemos fazer desta formaif Frm_CuntPagar_FMX = nil then
Application.CreateForm(TFrm_CuntPagar_FMX, Frm_CuntPagar_FMX);
Frm_CuntPagar_FMX.Show;
Paulinho Feix
http://infosoft.com.py/http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
12/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
http://vivaitaocara.com.br/landersongomes/embarcadero/delphi/construindo-uma-tela-inicial-para-aplicativos-android-com-delphi-xe5 12/13
E no mobile como faria a carga deste formulário???
Outra duvida como libero o formulário da memoria??
MAIO 27, 2015 ÀS 17:21
Quando clico na imagem, abre a tela para localizar a imagem de novo dentro do programa. Oque devo fazer.
JUNHO 17, 2015 ÀS 08:01
Sds, Landerson, Estou precisando de sua ajuda… Eu criei esta aplicação mas fiz algumas
modificações: Criei o TTabControl com 9 TTabItem, inseri o TGridPanelLayout dentro do
TTabItem1, inseri o TImageControl dentro do TGridPanelLayout. A principio, rodou legal,mas, inexplicavelmente, o programa começou a travar durante os testes tanto no Android
quanto no iOS Simulator… Refiz a aplicação diversas vezes, a cada componente que eu
inseria na sequencia acima eu testava a aplicação e tudo ocorria bem, mas, toda vez que
estava inserindo o componente TImageControl na minha aplicação e realizava os testes
tanto no Android quanto no iOS Simulator, a aplicação trava… O que deverá estar
acontecendo? Obrigado pela ajuda.
OUTUBRO 2, 2015 ÀS 11:34
Bom dia.
Landerson, estou desenvolvendo um aplicativo utilizando o Delphi XE8 … e to com
problemas de performance.
Ex: minha aplicação usa o navigation drawer, e ao clicar no icone para o menu lateral
aparecer, fica agarrado, nao fica com movimentos fluidos e naturais … fiz o mesmo exemplo
no Android studio , e a diferença de performance é gritante … voce sabe me informar se isso
é Problemas do Delphi ainda, para aplicações Android ?
OUTUBRO 11, 2015 ÀS 13:00
Olá Leonardo, não tenho essa informação… Seus exemplos são realmente idênticos?
Teoricamente o Java Android irá executar sobre a máquina virtual e o firemonkey será
nativo. Mas não tenho referência nenhuma sobre o assunto e comparação, você pode
tentar documentar isso para um análise mais aprofundada.
Não deixe de dar um feedback sobre suas conclusões!
Luciano
Vinicius Magalhães de Pinho
Leonardo
Landerson Gomes
http://-/?-http://-/?-http://-/?-http://-/?-
8/18/2019 Construindo Tela Inicial Para Apk Android Com Delphi XE5 _ Landerson Gomes
13/13
27/11/2015 Construindo Tela Inicial para Apk Android com Delphi XE5 | Landerson Gomes
OUTUBRO 11, 2015 ÀS 22:19
Excelente postagem! parabéns pelas dicas e se puder me acrescentar mais uma, sou bem
iniciante mesmo! então depois que fazer essa Tela Inicial que você comentou nesse post.
como faço para chamar um novo form de cada ítem da grade ?
NOVEMBRO 10, 2015 ÀS 16:50
Desculpe mas segui os procedimentos até o momento do TimageControl .. Dai por diante a
minha dúvida foi pq não consegui colocar cada imagem dentro de cada respectivo campo na
tabela.. Poderia me ajudar.. Desculpe a ignorância…
NOVEMBRO 14, 2015 ÀS 21:11
Olá Luis, bem vindo e obrigado por sua participação!
Sugiro uma revisão nos passos executados, pode ter passado por algum ponto sem que
tenha notado, não chega a ser “ignorância” alguma meu nobre!
Reforço o agradecimento pela participação, não deixe de postar um feedback e até a
próxima!
Claudio Matos
Luis
Landerson Gomes
https://www.facebook.com/app_scoped_user_id/10156243481300425/http://-/?-http://-/?-http://-/?-