Lograr efecto del ToolBar de whatsApp con Firemonkey

[Neftali [Germán.Estévez]]

Dependerá de cómo tengas montada la aplicación que estás desarrollando.
Se me ocurren 2 formas de hacerlo, pero como digo dependerá de los componentes que tengas; Podrías hacer una prueba a ver qué tal.

1) Por un lado se me ocurre que si tienes un ScrollBox (en este caso vertical), que sería el equivalente a lo que tiene WhatsApp, podrías utilizar el desplazamiento del ScrollBox.
Puedes saber si el scrollBox se mueve hacia arriba o hacia abajo. Puedes utilizar esa información para ocultar/visualizar el panel/toolbar superior.
si a eso le añades una "FloatAnimation" para que se oculte/visualize de forma suave, puedes conseguir lo que necesitas.


NOTA: En este ejemplo he utilizado 2 botones para que se pueda probar manualmente, pero no los necesitas. Puedes activar las animaciones (una para ocultar y otra para visualizar) directamente desde los eventos del ScollBox.






El evento de cambio sería:

Código Delphi [-]
procedure TForm3.VertScrollBox1ViewportPositionChange(Sender: TObject;
  const OldViewportPosition, NewViewportPosition: TPointF;
  const ContentSizeChanged: Boolean);
begin
  Label2.Text := Format('oldPosición=%f - Newposition=%f ', [OldViewportPosition.Y, NewViewportPosition.Y]);
  if NewViewportPosition.Y > OldViewportPosition.Y then begin
    // bajar
    Button2Click(nil);
  end
  else if NewViewportPosition.Y < OldViewportPosition.Y then begin
    Button1Click(nil);
  end;
end;

Y uno de los botones (el otro sería equivalente) sería:

Código Delphi [-]
procedure TForm3.Button1Click(Sender: TObject);
begin
  if Animando or Oculto then
    Exit;
  Animando := True;
  Oculto := True;
  FloatAnimationOcultar.Start;
end;

2) Otra opción es probar con el componente de GestureManager, para detectar estas en concreto y hacer lo mismo que desde los eventos del scrollbox.
Este no lo he usado, así que no te lo puedo asegurar al 100%.

Te adjunto el ejemplo anterior.