TheCodeNaked

TCircularMenu4D (Copy)

Chega de menus lineares. O TCircularMenu4D coloca ações ao redor do elemento selecionado, criando um fluxo mais rápido e natural para aplicativos FMX. Contexto, fluidez e design moderno.

Uma nova forma de interação para FMX que vai além dos menus lineares. Imagine uma janela. Não dessas de vidro e alumínio, mas daquelas que nos perseguem todo dia: a do sistema, a do app, a do fluxo, a do usuário que tenta fazer algo simples… e encontra três abas, dois botões perdidos e um menu escondido no canto.

Menus são quase sempre assim: linhas.
Para cima, para baixo, para os lados… não importa: é tudo plano.

E quando você precisa de mais contexto?
E quando a interação é por toque e não por mouse?
E quando sua tela é pequena, ou seu fluxo exige ações contextuais sobre um elemento visual?

Ninguém merece viajar por cinco telas só para trocar o status de um item.

De vez em quando, precisamos que a UI acompanhe a mente humana, e não o contrário. E a mente humana pensa em círculos, em zonas, em ações ao redor de um foco.

Por isso nasceu o TCircularMenu4D.


A motivação

No dia a dia de aplicações móveis e touch, o padrão tradicional de menus começa a cansar:

  • Botões fixos ocupando espaço precioso
  • Popups que cobrem toda a interface
  • Aqueles menus flutuantes que lembram uma festa de ícones brigando entre si
  • Troca de tela onde não precisava ter troca de tela nenhuma

Se toda ação começa com um alvo, por que não cercar esse alvo com ações?
Se o usuário toca num item de lista, num marcador de mapa, num equipamento… faz sentido que as opções tenham origem nesse toque, e não num canto distante da tela.

A ideia é simples:
contexto primeiro, navegação depois.

O CircularMenu4D nasceu dessa dor real, usada em projetos reais, com usuários que precisam ser rápidos e não querem caçar botões. Foi criado para:

  • Reduzir navegação entre telas
  • Dar velocidade a ações recorrentes
  • Permitir múltiplos menus em uma mesma tela
  • Ser criado em tempo de execução, de forma fluente
  • Manter a simplicidade idiomática do Delphi

Em outras palavras:
trazer o poder do “right click” para o universo touch, e além.


A solução

O que é o TCircularMenu4D

Uma classe FMX que cria menus circulares animados, com:

  • Centro interativo para abrir/fechar
  • Opções em formato circular ao redor
  • Suporte a TPathImageList ou TBitmap
  • Criação 100% runtime via API fluente
  • Suporte a callbacks síncronos e assíncronos
  • Reabertura sem recriação
  • Recalculo automático ao redimensionar o layout
  • Opção para auto-fechar ou fechar manualmente após operação

E, sim, funciona tanto em desktop como em mobile (com as limitações naturais de bitmap no mobile, que decidimos tratar com clareza).


Parte técnica

Como usar

No formulário:

uses CircularMenu4D;

E então, coloque um TLayout no formulário. Esse layout será a “arena” do menu.

Exemplo com TPath (ícones vetoriais)

FCircularMenu :=
  TCircularMenu4D.Create(Self, LayoutMenuPath, 6)
    .AutoDisposeOnClose(False)
    .AutoCloseOnOptionClick(False)
    .HideOnClose(True)

    .SetIconForCenter(IconCentral)
    .SetCenterColor(TAlphaColors.Lightyellow)
    .SetCenterIconMargin(20)
    .SetCenterStroke(1, TAlphaColors.Lightgray)
    .SetCenterScale(0.30)

    .SetIconMargin(15)
    .SetOptionsStroke(1, TAlphaColors.Lightgray)
    .SetAngularGap(18)
    .SetGapSpacing(6)
    .SetExtraGap(2)

    .SetIconForOption(0, IconOption0)
    .SetIconForOption(1, IconOption1)
    ...
    .SetOptionColor(0, TAlphaColorRec.Lightgoldenrodyellow)
    ...
    .OnCircleClick(0,
      procedure
      begin
        ShowMessage('Option 1');
      end)

    .ManageZOrder(True)
    .UseDoubleTapToToggle(False);

Chamar o menu:

FCircularMenu.OpenInteractiveMenu;

Fechar após operação assíncrona:

TTask.Run(
  procedure
  begin
    TThread.Sleep(2000);
    TThread.Synchronize(nil,
      procedure
      begin
        FCircularMenu.CloseAfterAsyncWorkDone;
      end);
  end);

Exemplos também com ImageList e Bitmap

Sim, temos:

  • Menu com TImageList (multi-plataforma)
  • Menu com TBitmap (apenas desktop)

E há exemplos prontos com paletas degradê, margens ajustadas e callbacks.


Dicas de uso

  • Para múltiplos menus na mesma tela, use layouts diferentes
  • Para menus contextuais, instancie no toque do usuário
  • Para menus estáticos, crie uma vez e reabra
  • Para tarefas longas, use CloseAfterAsyncWorkDone

Simples assim.
O poder está no mínimo atrito.


Onde isso brilha

  • Apps de manutenção e inspeção
  • Aplicativos industriais e de campo
  • Dashboards touch
  • Mapas e plantas interativas
  • Aplicações móveis ricas em contexto
  • Protótipos de interação em UI/UX

Se seu usuário toca em algo e espera interagir com isso na hora, esse componente é para você.


Ideias futuras

Já na fila da v2:

  • Suporte nativo a submenus (drill-down radial)
  • Botão de voltar automático
  • Estilo “overlay” com blur
  • Tooltips / labels flutuantes
  • API declarativa com “menus temáticos”
  • Paletas built-in (material, neon, industrial, minimalista)
  • Haptic feedback e sons (mobile)

Sim, isso vai virar um universo. Mas hoje celebramos o início.


Conclusão

O TCircularMenu4D não é “uma firula UI”.
É uma ferramenta para encurtar jornadas, respeitar a lógica do contexto e dar ao usuário uma sensação de poder sob o próprio toque.

Não nascemos para navegar telas sem fim.
Nascemos para agir onde estamos.

Se sua interface merece esse passo…
o código está pronto para te acompanhar.

A UI do futuro não se arrasta por menus.
Ela orbita ao seu redor.

Bem-vindo ao TCircularMenu4D.
Delphi FMX ainda tem muita vida para mostrar — e agora, com mais círculos.

Sobre o autor

TheCodeNaked

No TheCodeNaked, programar é consequência, não ponto de partida. Antes do código, vem a dúvida, a análise, o contexto. Não seguimos fórmulas — questionamos. Criar software é pensar com clareza. O resto é só digitação.

TheCodeNaked

Criar com clareza. Codificar com intenção.

TheCodeNaked

Ótimo! Você se inscreveu com sucesso.

Bem-vindo de volta! Você acessou com sucesso.

Você se inscreveu com sucesso o TheCodeNaked.

Sucesso! Verifique seu e-mail para acessar com o link mágico.

As suas informações de faturamento foram atualizadas.

Seu pagamento não foi atualizado