Tecnologia na ponta da lngua

HOME (HTTP://WWW.TDEVROCKS.COM.BR)
CONTATO (HTTP://WWW.TDEVROCKS.COM.BR/CONTATO-2/)
LOJA (HTTP://LOJA.TDEVROCKS.COM.BR)
NEWSLETTER (HTTP://WWW.TDEVROCKS.COM.BR/CADASTRE-SE-EM-NOSSA-NEWSLETTER/)
PERFIL (HTTP://WWW.TDEVROCKS.COM.BR/PERFIL/)
SEJA UM AUTOR (HTTP://WWW.TDEVROCKS.COM.BR/DICAS-ENVIADAS/)
MAPA DO SITE (HTTP://WWW.TDEVROCKS.COM.BR/MAPA-DO-SITE/)
TUTORIAIS (HTTP://WWW.TDEVROCKS.COM.BR/TUTORIAIS/)
IMPRENSA (HTTP://WWW.TDEVROCKS.COM.BR/SALA-DE-IMPRENSA/)

(http://www.tdevrocks.com.br)

TUTORIAL: CRIANDO MENU POP-UP NO ANDROID E IOS 1/1

dez 23 / 2014

SEARCH

0 (http://www.tdevrocks.com.br/2014/12/23/tutorial-criando-menu-pop-up-no-android-e-ios-11/#respond)

XE5 (HTTP://WWW.TDEVROCKS.COM.BR/CATEGORY/XE5/), XE6

(HTTP://WWW.TDEVROCKS.COM.BR/CATEGORY/XE6/), XE7 (HTTP://WWW.TDEVROCKS.COM.BR/CATEGORY/XE7/),
[TUTORIAL] (HTTP://WWW.TDEVROCKS.COM.BR/CATEGORY/TUTORIAL-2/)

Tutorial: Criando menu pop-up no Android e iOS

1/1
(http://www.tdevrocks.com.br/2014/12/23/tutorialcriando-menu-pop-up-no-android-e-ios-11/)

(http://rating-widget.com/my-rating-report/star/flat-yellow/rating-143782375-5/)
Avalie
19

Curtir

Dificuldade

Share

Tweetar

Em aplicaes desktop comum usarmos menus pop-up que so acessados atravs do clique de direita no mouse. Esses menus geralmente so criados para conter
recursos pouco utilizados pelo sistema e que no precisam ser visualizados o tempo todo ou ainda quando desejamos criar atalhos para determinadas funes.
Olhando para aplicativos mveis em smartphones e tablets, esses menus tambm podem existir, mas nesses casos no usaremos a mesma lgica que em apps desktop.
No tutorial de hoje veremos como criar um menu pop-up para escolher uma foto da biblioteca de fotos do iOS ou Android, ou ainda criar uma nova foto da cmera. Um
exemplo de utilizao do tutorial de hoje pode ser visto na parte IV de nosso Tutorial: Criando meu app step-by-step.
Links Recomendados:
Tutorial: Criando meu app step-by-step (http://www.tdevrocks.com.br/criando-meu-app-step-step/)
Tutorial: Criando meu app step-by-step ParteIV (http://www.tdevrocks.com.br/2014/10/09/tutorial-criando-meu-app-step-by-step/)

Criando menu pop-up no Android e iOS

Vamos iniciar criando uma nova aplicao mvel usando o menu File >> New > Multi-Device Application Delphi no RAD Studio XE7 ou Delphi XE7. Tambm possvel
desenvolver esse tutorial utilizando as verses XE5eXE6 bem como usando C++ Builder nas verses compatveis com ambas plataformas mveis.Escolha o template

Header/Footer na janela que se abre (Figura 1). Em seguida

(http://www.tdevrocks.com.br/wp-

content/uploads/2014/12/Figura12.png)
Figura 1. Criando um novo app
Atualize a propriedade Name do form digitando frmMain como nome principal e salve esse mesmo formulrio como UntMain.pas. Se estiver usando o XE7, crie uma nova
viewpara cada dispositivo alvo, exemplo: iPhone 4 e Android 4 Phone no ComboBox de views na parte superior direita do editor do Delphi.
Insira um novo SpeedButton dentro da barra de ferramentas superior. Esse SpeedButton dever ser chamado de spbFoto efaa com que seu alinhamento (Align) fique a
direita (Right). Por fim modifique a margem direita do boto (Margins > Right) para 8px.
Utilizaremos tambm um componente TRectanglepara criarmos um efeito translcido quando o pop-up estiver aberto. Insira um componente dessa classe e modifique
seuNamepara recBackground.Acesse a propriedade Fill >> Color e modifique para Black. Em seguida modifique a propriedade Opacity para 0,5. No se preocupe com
tamanho ou localizao do retngulo em tela, essas caractersticas ns mudaremos em runtime via programao.
Para acionarmos a cmera do smartphone/tablet ou ainda a biblioteca de fotos (Rolo da Cmera no iOS e Galeria no Android) usaremos actions standard do componente
ActionList que j possuem os mtodos e eventos apropriados para essas tarefas. Sendo assim, insira um componente TActionList no formulrio e clique duas vezes nele.
Clique na seta direita do primeiro e nico boto disponvel na parte superior da caixa de dilogo que se abriu. Escolha New Standard ActionNote que h diversas
aes j pr-definidas pelo Delphi, tais como: rotinas de controle de TabControl e navegao de DataSets usando Binding.Em nosso caso, vamos criar duas aes:
TTakePhotoFromLibraryAction: Selecionar foto via biblioteca;
TTakePhotoFromCameraAction: Acionar a cmera para tirar nova foto.
Acione a primeira ao e logo em seguida clique nela. Voc obter no Object Inspector um conjunto de propriedades, entre elas Name. Modifique para

actSelFotoDaBiblioteca. Perceba tambm que cada ao criada possui seus prprios eventos. Ns programaremos o evento OnDidFinishTaking, ento lembre-se do
caminho para retornar a esse evento mais tarde. Adicione uma segunda ao, mas dessa vez selecione a opo TTakePhotoFromCamera e d o nome
deactSelFotoDaCamera. (Figura 2)

(http://www.tdevrocks.com.br/wp-

content/uploads/2014/12/Figura22.png)
Figura 2. Configurao de aes
Inclua tambm um componente de imagem para que possamos receber e mostrar ao usurio a foto selecionado por ele via biblioteca ou cmera. Insira um TImage chameo de imgFoto e modifique seu alinhamento para Top. Coloque uma margem de 10px em todos os lados na propriedade Margins. Aumente a altura da imagem de acordo
com seu gosto.

O menu pop-up
O menu pop-up ns criaremos usando um TListBox. Por isso, insira um componente dessa classe no form. D o nome de lstPopup a ele e em seguida clique duas vezes no
componente. Adicione 4 (quatro) itens no controle conforme a Figura 3.

(http://www.tdevrocks.com.br/wp-content/uploads/2014/12/Figura31.png)

Figura 3. Configurao do ListBox

Cada item adicionado possui suas respectivas propriedades, por isso configure-as conforme necessrio. Abaixo seguem as configuraes bsicas de cada item.
1. Item de ListBox 1:
1. Name: lstitemCamera
2. Text: Cmera
3. Height: 45
2. Item de ListBox 2:
1. Name: lstitemBiblioteca
2. Text: Biblioteca
3. Height: 45
3. Item de ListBox 3
1. Name: No modificar
2. Text: Apague o texto
3. Height: 25
4. Item de ListBox 4
1. Name: lstitemCancelar
2. Text: Cancelar
3. Height: 45

Modifique tambm a largura final do ListBox para 370. A largura na verdade ser modificada em runtime, juntamente com sua visibilidade e posio X e Y no form.
possvel tambm modificar background, inserir cones e etc, ficaremos no bsico por enquanto. Voc ver um exemplo naFigura 4.

(http://www.tdevrocks.com.br/wp-content/uploads/2014/12/Figura4.png)

Figura 4. Exemplo de menu pop-up

Com isso encerramos as configuraes visuais necessrias para nosso exemplo. Note que o terceiro item de ListBox est sendo usado aqui apenas para manter um
espaamento entre o item Biblioteca e Cancelar.

Codificando
Nossa primeira providncia ser codificar os eventos relacionados as configuraes iniciais do app. Vamos comear criando dois procedimentos que sero responsveis
por mostrar e ocultar o retngulo escuro, dando um acabamento especial. Criei dois novos procedimentos na rea Private do formulrio como a seguir e logo em seguida
pressione Ctrl + Shift + C para criar o escopo das procedures:
1
2

procedureHideBackground;
procedureShowBackground(AParent:TFmxObject;AOnClick:TNotifyEvent);

A codificao dos dois procedimentos relativamente simples. Em HideBackground apenas modificamos a propriedade Visible do retngulo e sua opacidade
(transparncia) para zero, assim no veremos o retngulo o tempo todo. Em seguida ns criamos e codificamos a mudana de estado do retngulo. A primeira
providncia atualizar o evento OnClick do retngulo atribuindo a ele o evento recebido no segundo parmetro. Isso necessrio para que possamos desaparecer com o
menu pop-up caso o usurio toque fora do menu. Modificamos em seguida o Parent do objeto para que ele fique por cima de outros objetos em tela e ainda trazemos ele
para frente. Por fim mudamos sua opacidade para zero, deixamo ele visvel e no final criamos uma animao com o mtodo AnimateFloat passando 0,5 para sua
opacidade, assim dar o efeito de aparecimento do retngulo. Tudo isso voc ver naListagem 1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

procedureTfrmMain.HideBackground;
begin
recBackground.AnimateFloat('opacity',0,0.1);
recBackground.Visible:=False;
end;

procedureTfrmMain.ShowBackground(AParent:TFmxObject;AOnClick:TNotifyEvent);
begin
recBackground.OnClick:=AOnClick;
recBackground.Parent:=AParent;
recBackground.BringToFront;
recBackground.Opacity:=0;
recBackground.Visible:=True;
recBackground.AnimateFloat('opacity',0.5,0.1);
end;

Listagem 1. Mtodos de configurao do background

Na Listagem 2 configuramos todos os padres de abertura do nosso app. Primeiro modificamos as propriedades Visible e Align do retngulo, para que tenhamos ele em
tamanho suficiente para cobrir todo o formulrio quando acionado.Chamamos ento HideBackgound. As prximas linhas referem-se ao ListBox de menu pop-up,

lstPopup.Modificamos largura, posio X e Y e sua visibilidade, respectivamente. Toda a codificao do feita no evento OnCreate e pode ser vista naListagem 3.

1
2
3
4
5
6
7
8
9
10
11
12

procedureTfrmMain.FormCreate(Sender:TObject);
begin
{LayoutEscuroGlobal}
recBackground.Visible:=False;
recBackground.Align:=TAlignLayout.Contents;

HideBackground;
lstPopUp.Width:=ClientWidth20;
lstPopUp.Position.X:=(ClientWidthlstPopUp.Width)/2;
lstPopUp.Position.Y:=lstPopUp.Height*1;
lstPopUp.Visible:=False;
end;

Listagem 2. Evento OnCreate

A hora agora de codificar os mtodos HidePopup e ShowPopup. Crie os mtodos como na Listagem 4, verifique que no fazemos nada demais nos mtodos. Apenas
modificamos propriedades de visibilidade e criamos animaes. Isso dar o evento de um menucaindode cima para baixo no ShowPopup e dedesaparecimentono
HidePopup.
1
2
3
4
5
6
7
8
9
10
11
12
13

procedureTfrmMain.HidePopup;
begin
HideBackground;
lstPopUp.AnimateFloat('position.y',lstPopUp.Height*1);
lstPopUp.Visible:=False;
end;

procedureTfrmMain.ShowPopup;
begin
lstPopUp.Visible:=True;
lstPopUp.AnimateFloat('position.y',0);
lstPopUp.BringToFront;
end;

Listagem 3. Mtodos de visibibilidade do menu

Finalizando a codificao

Finalizando a codificao
Entramos na etapa final do exemplo. O que faremos agora s chamar os respectivos mtodos em cada boto e ao. Iniciemos pelo boto superior direito. Clique duas
vezes nele para que possamos codificar seu evento OnClick. Voc codificar apenas chamando o mtodo para mostrar o background (O retngulo) e ento mostrar o
menu pop-up. Algo como:
1
2

ShowBackground(frmMain,lstitemCancelarClick);
ShowPopup;

Apenas preste ateno no segundo parmetro. Estamos passando o evento OnClick do item de menu referente ao Cancelar. Isso far com que o menu desaparea quando
tocarmos no menu Cancelar ou no retngulo.
Agora clique duas vezes no item de menu referente a Cmera e digite o cdigo das linhas a seguir. Ns apenas estamos ocultando o menu pop-up usando o mtodo
HidePopup e forando a execuo no mtodo ExecuteTarget da ao actSelFotoDaBiblioteca.
1
2

HidePopup;
actSelFotoDaCamera.ExecuteTarget(Sender);

No repetiremos o cdigo do item de menu referente a foto da biblioteca. Ele semelhante as linhas acima, mudando apenas o nome da ao para
actSelFotoDaBiblioteca.
O evento OnClick do item de menu Cancelar ser codificado apenas chamando HidePopup e HideBackground. Em outras palavras, apenas ocultamos o background e o
menu.
A ltima codificao ser efetuada no evento OnDidFinishTaking de cada action no TActionList. Localize esses eventos e apenas digite o cdigo abaixo. Esse algortimo
apenas mostra a imagem recebida no parmetro do evento, repare que possumos um nico parmetro no evento chamado Image do tipo TBitmap. Esse parmetro
atualizando quando uma foto selecionada da biblioteca ou da cmera. Veja o cdigo:
1

imgFoto.Bitmap.Assign(Image);

Assim finalizamos nosso tutorial. Se testarmos nesse momento nosso app no iOS ou Android, veremos que totalmente possvel escolher uma foto j presente no
smartphone ou ainda tirar uma nova foto e escolher. Do modo como codificamos, no ser possvel testar diretamente no Windows, portanto faa o deploy direto do
aparelho.

Concluses
Nesse tutorial aprendemos a usar um TListBox como menu pop-up em aplicativos mveis pra iOS e Android. Como pudemos ver, no h nenhuma grande complicao em
tudo que fizemos. Em outros tutoriais, veremos dicas rpidas como essa. At a prxima.

#GoToDelphi

Compartilhe em suas redes sociais e ajude o blog a crescer.

19
Curtir

5
Share

Tweetar

AdrianoSantos

especialistaem
linguagensde
desenvolvimento,
EmbarcaderoMVP,possui+100artigose
vdeoaulaspublicadasemrevistase
websitesespecializados,exeditorchefedas
revistasClubeDelphieWebMobile.
AtualmenteDiretordeOperaesna
startupGETIT!Technology.

(http://www.twitter.com/asrsantos)
(https://www.facebook.com/asrsantos)
(http://br.linkedin.com/pub/adriano
santos/9/342/54a)
(https://plus.google.com/105531520799313928633)
(mailto:asrsantos@gmail.com)

2comentrios

Classificarpor Principais

Adicionarumcomentrio...

PauloMarneBastosProgramadoratAZSolues
OlAdriano,eutenhoumapergunta...Odelphinoteriacomousaralgoparecido
oumaissimilarcomooUIAlertViewdoobjectiveCouoAlertDialogdoandroid?
EutenhoaplicativosqueemambasasplataformasqueestorodandoemiOS8e
noandroidconsumindoomeuwebserviceemDelphisupertranquilo...mas
comeceiaestudarapossibilidadedecomearatrabalhanoDelphietalvezpara
deusaroEclipseLunaeoXcode6.1.
CurtirResponder6defevereirode201516:48

AdrianoSantosConsultorSnioratEmbarcaderoTechnologies
Novopostnosite.
CurtirResponder

123dedezembrode201416:41

FacebookCommentsPlugin

Comments are closed.

NEWSLETTER
Email*

Nome*

Cidade*

TPICOS RECENTES
Bate-papo sobre desenvolvimento de software (http://www.tdevrocks.com.br/2015/11/14/bate-papo-sobre-desenvolvimento-de-software/)
Lojinha TDevRocks Agora sua chance de ajudar o blog (http://www.tdevrocks.com.br/2015/11/05/lojinha-tdevrocks-agora-e-sua-chance-de-ajudar-o-blog/)
Tutorial: Salvar foto no banco SQLite com Android e iOS 1/2 (http://www.tdevrocks.com.br/2015/10/05/tutorial-salvar-foto-no-banco-sqlite-com-android-e-ios-12/)
Delphi: Conhea a histria da ferramenta mais atual que existe, h 20 anos! (http://www.tdevrocks.com.br/2015/10/02/delphi-conheca-a-historia-da-ferramenta-mais-atualque-existe-ha-20-anos/)
Tutorial: Mostrando o progresso de uma tarefa usando os componentes FGX (http://www.tdevrocks.com.br/2015/10/01/progresso-com-fgx/)

DELPHI PARA ANDROID E IOS: DESENVOLVENDO APLICATIVOS MVEIS

(http://www.brasport.com.br/informatica-e-tecnologia/mobile/delphi-para-android-e-ios-desenvolvendo-aplicativos-moveis/)

ARQUIVO
dezembro 2014
D

14

8
(http://www.tdevrocks.com.br/2014/12/08/)

(http://www.tdevrocks.com.br/2014/12/03/)

10

15

16

(http://www.tdevrocks.com.br/2014/12/15/)

(http://www.tdevrocks.com.br/2014/12/16/)

21

22

28

29

17

23

24

(http://www.tdevrocks.com.br/2014/12/23/)
30

31

NOV (HTTP://WWW.TDEVROCKS.COM.BR/2014/11/)

VDEO-AULAS
9/31

[Fale Conosco]

TDevRo...

Contato (/contato-2/)

Related posts:

Tutorial: Criando
Tutorial: Criando
Tutorial: Criando
Tutorial: Criando
meu app step-bymeu app step-bymeu app step-bymeu app step-bystep Parte I
step Parte IV
step Botes de
step DataSnap
(http://www.tdevrocks.com.br/2014/09/14/tutorial(http://www.tdevrocks.com.br/2014/10/09/tutorial(http://www.tdevrocks.com.br/2014/12/15/tutorial(http://www.tdevrocks.com.br/2014/10/31/tutorialcriando-meu-app-

criando-meu-app-

criando-meu-app-

criando-meu-app-

2005-2015 TDevRocks. Todos

os direitos reservados.
TDevRocks marca registrada
no Brasil e/ou outros pases.
step-by-step-partestep-by-step/)
step-step-botoes-destep-by-stepCreated
by Site5 WordPress Themes (http://www.s5themes.com/).
Experts in WordPress
Hosting (http://gk.site5.com/t/611)
i/)
hardware-p-1x/)
datasnap-rest-parte-

vi/)

(http://www.tdevrocks.com.br/2014/12/0

11

(http://www.tdevrocks.com.br/2014/12/11
18

(http://www.tdevrocks.com.br/2014/12/18

25