Em aplicações desktop é comum usarmos menus pop-up que são acessados através do clique de direita no mouse. Esses menus geralmente são criados para conter recursos pouco utilizados pelo sistema e que não precisam ser visualizados o tempo todo ou ainda quando desejamos criar atalhos para determinadas funções.

Olhando para aplicativos móveis em smartphones e tablets, esses menus também podem existir, mas nesses casos não usaremos a mesma lógica 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 câmera. Um exemplo de utilização 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
• Tutorial: Criando meu app step-by-step – Parte IV

Criando menu pop-up no Android e iOS

Vamos iniciar criando uma nova aplicação móvel usando o menu File >> New > Multi-Device Application – Delphi no RAD Studio XE7 ou Delphi XE7. Também é possível desenvolver esse tutorial utilizando as versões XE5 e XE6 bem como usando C++ Builder nas versões compatíveis com ambas plataformas móveis. Escolha o template Header/Footer na janela que se abre (Figura 1). Em seguida

Figura 1. Criando um novo app

Atualize a propriedade Name do form digitando frmMain como nome principal e salve esse mesmo formulário como UntMain.pas. Se estiver usando o XE7, crie uma nova view para 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 e faça com que seu alinhamento (Align) fique a direita (Right). Por fim modifique a margem direita do botão (Margins > Right) para 8px.

Utilizaremos também um componente TRectangle para criarmos um efeito translúcido quando o pop-up estiver aberto. Insira um componente dessa classe e modifique seu Name para recBackground. Acesse a propriedade Fill >> Color e modifique para Black. Em seguida modifique a propriedade Opacity para 0,5. Não se preocupe com tamanho ou localização do retângulo em tela, essas características nós mudaremos em runtime via programação.

Para acionarmos a câmera do smartphone/tablet ou ainda a biblioteca de fotos (Rolo da Câmera no iOS e Galeria no Android) usaremos actions standard do componente ActionList que já possuem os métodos e eventos apropriados para essas tarefas. Sendo assim, insira um componente TActionList no formulário e clique duas vezes nele. Clique na seta à direita do primeiro e único botão disponível na parte superior da caixa de diálogo que se abriu. Escolha New Standard Action… Note que há diversas ações já pré-definidas pelo Delphi, tais como: rotinas de controle de TabControl e navegação de DataSets usando Binding. Em nosso caso, vamos criar duas ações:

• TTakePhotoFromLibraryAction: Selecionar foto via biblioteca;
• TTakePhotoFromCameraAction: Acionar a câmera para tirar nova foto.

Acione a primeira ação e logo em seguida clique nela. Você obterá no Object Inspector um conjunto de propriedades, entre elas Name. Modifique para actSelFotoDaBiblioteca. Perceba também que cada ação criada possui seus próprios eventos. Nós programaremos o evento OnDidFinishTaking, então lembre-se do caminho para retornar a esse evento mais tarde. Adicione uma segunda ação, mas dessa vez selecione a opção TTakePhotoFromCamera e dê o nome de actSelFotoDaCamera. (Figura 2)

Figura 2. Configuração de ações

Inclua também um componente de imagem para que possamos receber e mostrar ao usuário a foto selecionado por ele via biblioteca ou câmera. Insira um TImage chame-o 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 nós 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.

Figura 3. Configuração do ListBox

Cada item adicionado possui suas respectivas propriedades, por isso configure-as conforme necessário. Abaixo seguem as configurações básicas de cada item.

1. Item de ListBox 1:
   1. Name: lstitemCamera
   2. Text: Câmera
   3. Height: 45
2. Item de ListBox 2:
   1. Name: lstitemBiblioteca
   2. Text: Biblioteca
   3. Height: 45
3. Item de ListBox 3
   1. Name: Não modificar
   2. Text: Apague o texto
   3. Height: 25
4. Item de ListBox 4
   1. Name: lstitemCancelar
   2. Text: Cancelar
   3. Height: 45

Modifique também a largura final do ListBox para 370. A largura na verdade será modificada em runtime, juntamente com sua visibilidade e posição X e Y no form. É possível também modificar background, inserir ícones e etc, ficaremos no básico por enquanto. Você verá um exemplo na Figura 4.

Figura 4. Exemplo de menu pop-up

Com isso encerramos as configurações visuais necessárias para nosso exemplo. Note que o terceiro item de ListBox está sendo usado aqui apenas para manter um espaçamento entre o item Biblioteca e Cancelar.

Codificando

Nossa primeira providência será codificar os eventos relacionados as configurações iniciais do app. Vamos começar criando dois procedimentos que serão responsáveis por mostrar e ocultar o retângulo escuro, dando um acabamento especial. Criei dois novos procedimentos na área Private do formulário como a seguir e logo em seguida pressione Ctrl + Shift + C para criar o escopo das procedures:

    procedure HideBackground;
    procedure ShowBackground(AParent: TFmxObject; AOnClick: TNotifyEvent);

A codificação dos dois procedimentos é relativamente simples. Em HideBackground apenas modificamos a propriedade Visible do retângulo e sua opacidade (transparência) para zero, assim não veremos o retângulo o tempo todo. Em seguida nós criamos e codificamos a mudança de estado do retângulo. A primeira providência é atualizar o evento OnClick do retângulo atribuindo a ele o evento recebido no segundo parâmetro. Isso é necessário para que possamos desaparecer com o menu pop-up caso o usuário 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 visível e no final criamos uma animação com o método AnimateFloat passando 0,5 para sua opacidade, assim dará o efeito de aparecimento do retângulo. Tudo isso você verá na Listagem 1.

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

procedure TfrmMain.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. Métodos de configuração do background

Na Listagem 2 configuramos todos os padrões de abertura do nosso app. Primeiro modificamos as propriedades Visible e Align do retângulo, para que tenhamos ele em tamanho suficiente para cobrir todo o formulário quando acionado. Chamamos então HideBackgound. As próximas linhas referem-se ao ListBox de menu pop-up, lstPopup. Modificamos largura, posição X e Y e sua visibilidade, respectivamente. Toda a codificação do é feita no evento OnCreate e pode ser vista na Listagem 3.

procedure TfrmMain.FormCreate(Sender: TObject);
begin
  {Layout Escuro Global}
  recBackground.Visible := False;
  recBackground.Align   := TAlignLayout.Contents;

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

Listagem 2. Evento OnCreate

A hora agora é de codificar os métodos HidePopup e ShowPopup. Crie os métodos como na Listagem 4, verifique que não fazemos nada demais nos métodos. Apenas modificamos propriedades de visibilidade e criamos animações. Isso dará o evento de um menu caindo de cima para baixo no ShowPopup e de desaparecimento no HidePopup.

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

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

Listagem 3. Métodos de visibibilidade do menu

Finalizando a codificação

Entramos na etapa final do exemplo. O que faremos agora é só chamar os respectivos métodos em cada botão e ação. Iniciemos pelo botão superior direito. Clique duas vezes nele para que possamos codificar seu evento OnClick. Você codificará apenas chamando o método para mostrar o background (O retângulo) e então mostrar o menu pop-up. Algo como:

  ShowBackground(frmMain, lstitemCancelarClick);
  ShowPopup;

Apenas preste atenção no segundo parâmetro. Estamos passando o evento OnClick do item de menu referente ao Cancelar. Isso fará com que o menu desapareça quando tocarmos no menu Cancelar ou no retângulo.

Agora clique duas vezes no item de menu referente a Câmera e digite o código das linhas a seguir. Nós apenas estamos ocultando o menu pop-up usando o método HidePopup e forçando a execução no método ExecuteTarget da ação actSelFotoDaBiblioteca.

  HidePopup;
  actSelFotoDaCamera.ExecuteTarget(Sender);

Não repetiremos o código do item de menu referente a foto da biblioteca. Ele é semelhante as linhas acima, mudando apenas o nome da ação 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 codificação será efetuada no evento OnDidFinishTaking de cada action no TActionList. Localize esses eventos e apenas digite o código abaixo. Esse algorítimo apenas mostra a imagem recebida no parâmetro do evento, repare que possuímos um único parâmetro no evento chamado Image do tipo TBitmap. Esse parâmetro é atualizando quando uma foto é selecionada da biblioteca ou da câmera. Veja o código:

  imgFoto.Bitmap.Assign(Image);

Assim finalizamos nosso tutorial. Se testarmos nesse momento nosso app no iOS ou Android, veremos que é totalmente possível escolher uma foto já presente no smartphone ou ainda tirar uma nova foto e escolher. Do modo como codificamos, não será possível testar diretamente no Windows, portanto faça o deploy direto do aparelho.

Conclusões

Nesse tutorial aprendemos a usar um TListBox como menu pop-up em aplicativos móveis pra iOS e Android. Como pudemos ver, não há nenhuma grande complicação em tudo que fizemos. Em outros tutoriais, veremos dicas rápidas como essa. Até a próxima.

#GoToDelphi