Nas últimas semanas estamos focando em tutoriais voltados a melhorias de interface e design em nossas aplicações móveis iOS e Android. Nós já vimos como personalizar nossas listagens de itens utilizando ListView personalizado, assim como usar e distribuir fontes True Type em aplicativos. Nessa parte de nossa série, veremos como criar um menu mais atraente e profissional, evidentemente existem milhares de formas possíveis de se criar menus, essa é apenas uma delas.

Tutorial: Criando um menu personalizado iOS e Android

Como mencionado, veremos como montar um menu para nosso app que seja mais atraente aos olhos do usuário final. Abaixo segue os tutoriais anteriores que já estudamos até aqui.
Tutoriais anteriores

• ListView personalizado para aplicações móveis
• Usando fonte customizada no Android
• Usando fonte customizada no iOS

A primeira providência a se tomar, evidentemente, é criar um novo projeto para esse tutorial ou fique a vontade para aplicar a técnica em um aplicativo já criado. Acesse então o RAD Studio ou Delphi 10 Seattle e selecione File >> New >> Multi-Device Application Delphi, escolha um template em branco e confirme. Dê o nome ao formulário de frmPrincipal e salve sua unit como UntPrincipal.pas. Modifique a largura do formulário para 320px, para que fique mais fácil para nós montarmos nosso menu.

Insira no formulário um componente TabCtrl e alinhe-o Client. Nomeie-o como tbctrlPrincipal e adicione duas TabItem nele, uma com o nome tbitemMenu e outra como tbitemAuxiliar. Se preferir, coloque as Tabs alinhadas abaixo através da propriedade TabPosition para faciliar o desenvolvimento. Em runtime faremos com que as tabs sumam.

Dentro da tbitemMenu, adicione um TImage dê o nome de imgTopo, configure a altura (height) para 100px e alinhe-o ao topo. Encontre uma imagem .png que possa funcionar como um cabeçalho de sua aplicação, em nosso caso estamos usando uma imagem encontrada na internet. Acesse a propriedade MultiResBitmap e clique duas vezes nela. Na janela que se abre, clique no botão referente a localização da imagem e por fim selecione o PNG (Figura 1).

Figura 1. Seleção de imagem

Insira no formulário agora um Layout com o nome de lytInferior e configure sua altura para 30px e alinhe-o como Bottom na propriedade Align. Dentro do layout insira um TRectangle alinhado como Client e nome recInferior. Acesse a propriedade Fill dele e modifique a cor como desejar. Em nosso caso, usaremos Black, pois pegamos empresatado um arquivo .png com o logotipo da Embarcadero transparente. Insira agora um novo TImage com o nome imgInferior, configure para Client o alinhamento e insira uma imagem nele assim como fizemos na imagem superior. Veja como ficou nossa tela na Figura 2.

Figura 2. Menu com imagem inferior

Agora faremos a parte do menu proprieamente dita. Nós usaremos o componente TGridLayout que nos ajudará a ter maior controle sobre os componentes dentro dele. Insira um componente desses na tela dentro do tabitemMenu. Marque como alinhamento Client e seu nome para grdMenu. Ele possui duas propriedades importantes que são ItemHeight (Altura do Item) e ItemWidth (Largura do Item). Modifique a princípio somente a largura para 300px. Isso fará com que todos os compoentes colocados dentro dele assumam essa largura. Altere as margens do GridLayout para 10px em Left e Right para não deixar o menu colado demais nas laterais do aparelho.

Agora vamos inserir os “botões” do nosso menu. Insira um componente Layout dentro do GridLayout e dê o nome a ele de lytBotao1. Coloque 2px nas margens Top e Bottom desse layout, assim um “botão” não ficará grudado no outro. Você terá um layout semelhante ao da Figura 3.

Figura 3. Botão um adicionado

Dentro do layout lytBotao1 adicione um componente TRoundRect com o nome rdnBotao1. Mexa também na propriedade align configurando-o como Contents. Esse componente tem uma propriedade Fill que possui várias outras propriedades a serem configuradas, tais como:

• Bitmap: Você pode incluir uma imagem para o objeto;
• Color: cor do objeto;
• Gradient: Se você deseja colocar um degradê;
• Kind: Tipo de imagem que será usada nesse controle. Mantenha como Solid.

Em nosso exemplo modificamos a Color para Crimson, uma tonalidade de vermelho. Para ficar mais profissional e não tão sólido o nosso botão, modifique a Opacity para 0,5, então teremos um botão levemente transparente. Por fim, acesse a propriedade Stroke e dentro dela marque a sub-propriedade Kind para None, isso vai tirar a linha de contorno do objeto.

Ainda dentro do layout adicione um TImage com o nome imgBotao1 e alinhamento Left. Nas margens coloque como 4px em todos os lados. Clique duas vezes na propriedade MultiResBitmap e adicione uma imagem para servir como ícone do item de menu. Nós recomendamos o site www.iconfinder.com que possui uma vasta quantidade de ícones em vários tamanhos. Nós estamos usando aqui, arquivos png com o tamanho 64x64px. Novamente pedimos emprestado o logotipo do RAD Studio 10 Seattle, RX. Veja como nosso layout está ficando na Figura 4.

Figura 4. Layout até o momento.

Inclua agora um novo componente TLayout dentro do layout do nosso botão. Dê o nome a ele de lytLblBotao1 e alinhamento Client. Nós usaremos esse layout para adicionar os próximos componentes, que serão dois labels configurados como abaixo:

1. Label1:
   1. Name: lblCapBotao1;
   2. Align: Top;
   3. TextSettings.FontColor: White;
   4. TextSettings.Size: 22;
   5. TextSettings.Style : fsBold;
   6. Text: Clientes.
2. Label2:
   1. Name: lblBotao1;
   2. Align: Top;
   3. TextSettings.FontColor: White;
   4. TextSettings.Size: 16
   5. Text: Cadastro de Clientes

Para finalizar esse botão, localize na paleta de componentes à direita o componente ShadowEffect e arraste-o para o formulário. Ele aparecerá na janela Structure do Delphi, então localize ele na janela e arraste-o para o lytBotao1 para que o efeito seja aplicado ao nosso botão. Visualize na Figura 5 o resultado final de nosso botão e a ordem hierarquica dos componentes na janela Structure.

Figura 5. Resultado final do botão

Agora fica muito mais fácil montarmos os próximos botões. Aconselhamos fazer um copy & paste desse botão criado. Clique com o botão direito do mouse sobre o lytBotao1 na janela Structure. Em seguida cole o componente clicando com o botão direito em cima do grdMenu, como nas Figuras 6 e 7.

Figura 6. Cópia do botão

Figura 7. Cola do botão

Modifique apenas os nomes e textos de cada componente. Em nosso exemplo modificamos para o texto Fornecedores, Login e Relatórios. A imagem do ícone lateral também pode ser modificada usando a propriedade MultiResBitmap, o que já dará uma excelente “cara” para nosso aplicativo. Nossa tela deve se parecer com a Figura 8.

Figura 8. Layout pronto

Uma última providência que também dará um “Q” a mais em nosso aplicativo é colocar um fundo geral no sistema. Para isso selecione o Form na janela Structure e localize nas propriedades um componente TImage com alinhamento Client, assim ficará totalmente ao fundo do nosso aplicativo. Insira uma imagem nesse componente seguindo os passos de outras imagens que adicionamos. Veja o resultado na Figura 9.

Figura 9. Resultado Final

Codificação

Para que possamos abrir outros formulários, ou seja, efetuar a navegação entre as várias telas de nosso aplicativo, faremos uso da mesma técnica empregada tempos atrás em outra publicação aqui mesmo no blog, Tutorial: Navegação entre formulários – Nova técnica. Criaremos alguns métodos para fazer isso. Por esse motivo, acesse a área de declarações de métodos, private e public do form, e adicione os seguintes métodos:

...  
  private
    FActiveForm: TForm;
    procedure MostrarForm(AFormClass: TComponentClass);
    procedure AjustarLayout;
  public
    { Public declarations }
    procedure MudarAba(ATabItem: TTabItem; Sender: TObject);
  end;
...

Pressione Ctrl + Shift + C para que o Delphi crie o escopo dos métodos. Você deve se lembrar que inserimos um TabCtrl em nosso formulário principal, criamos duas tabs sendo uma a principal e a outra chamada tbitemAuxiliar, pois bem, navegue até essa tab auxiliar e insira nela um componente TLayout alinhado como Client e nome lytPrincipal. Nós carregaremos os formulários dentro desse layout. Volte ao código e localize o escopo do método MostrarForm e digite o código como na Listagem 1.

procedure TForm1.MostrarForm(AFormClass: TComponentClass);
var
  LayoutBase : TComponent;
  BotaoMenu  : TComponent;
begin
  if Assigned(FActiveForm) then
  begin
    if FActiveForm.ClassType = AFormClass then
      exit
    else
    begin
      FActiveForm.DisposeOf;
      FActiveForm := nil;
    end;
  end;

  Application.CreateForm(aFormClass, FActiveForm);

  LayoutBase := FActiveForm.FindComponent('lytBase');
  if Assigned(LayoutBase) then
    lytPrincipal.AddObject(TLayout(LayoutBase));
end;

Listagem 1. Código de MostrarForm

Não vamos explicar o que está sendo efetuado, pois já explicamos em outra publicação citada anteriormente. Agora, codifique o método AjustarLayout como abaixo. O que estamos fazendo aqui é adequando o tamanho dos “botões” do nosso menu à largura da nossa janela. Lembra que a largura de cada item do GridLayout seria de 300px? Pois bem, se o celular que estivermos abrindo tiver uma largura diferente (maior) teremos problemas, então nós adequamos isso. Veja:

procedure TForm1.AjustarLayout;
var
  iWidth : Integer;
begin
  iWidth            := Self.ClientWidth - 20;
  grdMenu.ItemWidth := iWidth;
end;

Subtraímos 20px por conta dos 10px de margem do GridLayout de cada lado. Seguindo nossa estratégia, toda vez que um novo formulário for aberto, nos teremos que redirecionar para a aba 2 (dois) onde o form será aberto. Por isso, navegue até a tbitemAuxiliar e dentro dela adicione um novo componente TLayout, dê o nome a ele de lytPrincipal e marque-a com alinhamento Client para ocupar todo o espaço da TabItem. Isso por si só já será suficiente para termos uma navegação. Crie um novo formulário que servirá como nosso form de Cadastro de Clientes. No form adicione um TLayout e chame-o de lytBase. Adicione também uma ToolBar e nela um SpeedButtom para que possamos voltar ao Menu. Faça um Use Unit nesse novo formulário adicionado o form principal a ele, assim você poderá codificar o botão para voltar ao menu. A codificação é simples, veja:

  frmPrincipal.MudarAba(frmPrincipal.tbitemMenu, Sender);

Se tiver dúvidas, consulte o tutorial sobre navegação que indicamos anteriormente. Para finalizar teremos que fazer somente mais duas codificações. No evento OnCreate do Form principal, adicione a codificação como abaixo:

procedure TfrmPrincipal.FormCreate(Sender: TObject);
begin
  tbctrlPrincipal.TabPosition := TTabPosition.None;
  tbctrlPrincipal.ActiveTab   := tbitemMenu;

  AjustarLayout;
end;

Aqui estamos basicamente ocultando as abas da TabCtrl e deixando como default a Aba Menu para que ao abrir o sistema a primeira vez, caia direto no menu. E chamamos por último o método AjustarLayout para que os botões se adequem ao formato da tela.

Para chamar cada formulário, basta codificar como abaixo:

  MostrarForm(TfrmCadCli);
  MudarAba(tbitemAuxiliar, Sender);

Também será necessário codificarmos o método MudarAba. Codifique-o como abaixo. O que estamos fazendo aqui é ativar a tabitemAuxiliar através de uma ação, por isso teremos que adicionar um ActionList e dentro deles adicionar uma ação personalizada ChangeTabItem e chama-la de actMudarAba. Isso você também encontra no tutorial sobre navegação.

  actMudarAba.Tab := ATabItem;
  actMudarAba.ExecuteTarget(Sender);

Não esqueça de adicionar o formulário 2 (dois) (nesse caso chamamos de frmCadCLi) ao Uses do form principal, do contrário não conseguiremos compilar. E também codifique isso no evento OnClick da imagem que usamos como ícone do menu, ou seja, imgBotao1, imgBotao2, e assim por diante. É claro que se deixarmos a codificação apenas no OnClick da imagem, o botão que construímos não ficará completo, por isso selecione, com Shift pressionado, os dois Labels que colocamos como título do botão 1, e também o retângulo de fundo, como mostrado na Figura 10. Em seguida selecione a aba Events na janela de propriedades e no evento OnClick desses componentes, associe o evento que criamos para o imgBotao1. Se preferir, selecione individualmente cada componente e associe o evento.  

Figura 10. Todos os controles selecionados

Agora sim, para cada novo formulário no aplicativo, repita esses passos e seja feliz.

Conclusão

Como pudemos ver nesse tutorial, não utilizamos nada de tão especial para criar nosso menu personalizado. Apenas alguns componentes normais e nativos do Delphi para darmos um ar mais profissional ao aplicativo. Há, evidentemente, inúmeras formas diferentes de se criar menus, por isso cabe a todo programador estudar e pensar de forma criativa o que é melhor para seu usuário. Esperamos que esse tutorial possa inspirar a todos.

Baixe o código-fonte

#GoToDelphi