A criação de interfaces de usuários é um problema na hora de distribuir os aplicativos, afinal são diversos dispositivos, resoluções e telas diferentes. Nesta postagem veremos um exemplo de como construir uma interface simples de uma Tela inicial para aplicativo Android com Delphi XE5.
Direto ao ponto
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 -> taCenter
- Text -> 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 configurados 2 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 de nosso 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.
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:
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 tamanho das 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
Excelente .. obrigado por compartilhar
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.
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.
Caro Landerson,
Tem como mudar a cor de fundo do form para branco ou deixar a imagem transparente?
Abraços.
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.
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.
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.
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.
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:
Espero que os links e as postagens o ajudem, novamente obrigado e fique a vontade!
Abraço.
Muito obrigado Landerson.
Abraço.
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, e lá no servidor as impressoras, preciso de um botão no android que que imprima o pedido lá no servidor
Olá Adriano, seja bem vindo!
Já vi o que você deseja em uma apresentação do amigo Claudemir da Daruma… até citei isso 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í!
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
Olá felipeiw… bem vindo! O ideal seria testar o desempenho, talvez a aplicação a que se 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í!
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
Olá.
Você conseguiu fechar o form com disposeof?
Não estou conseguindo, dá erro access violation.
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!
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
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 TabItemEspero 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!
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.
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.
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.
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.
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 forma
if Frm_CuntPagar_FMX = nil then
Application.CreateForm(TFrm_CuntPagar_FMX, Frm_CuntPagar_FMX); Frm_CuntPagar_FMX.Show;
E no mobile como faria a carga deste formulário???
Outra duvida como libero o formulário da memoria??
Quando clico na imagem, abre a tela para localizar a imagem de novo dentro do programa. O que devo fazer.
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.
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 ?
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!
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 ?
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…
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!
Ola, fiz um projeto no delphi, multidevice e estou com o app no meu motog2 com android 6, gostaria de saber pq no tedit quando clico nele (estando no celular) para por algo ja aparece a opcao ‘paste’, como se no delphi eu clicasse com o botao direito do mouse… ele cola(duplica) tudo que digito. Grato pela ajuda
Anderson seu caminho aponta para estudos do clip service
Olá Landerson,
Muito bom seu blog.
Gostaria de saber se você tem algum exemplo de crop de imagem, usando ou não intents, pergunto porque já recorri a foruns e pesquisas e percebi que não é algo trivial.
Você teria algum exemplo a respeito disso ?.
Eu gostaria de recortar imagem assim como é feito quando se muda a foto de perfil do Whatsapp.
Obrigado
Robson
Olá Robson, ainda não tive contato com essa funcionalidade não.
Você já encontrou algo nesse tipo?
Seja muito bem vindo, obrigado por sua participação e até a próxima!