Home > Mobile >  Make footer bar disappear on scrolling in a Delphi / Firemonkey app
Make footer bar disappear on scrolling in a Delphi / Firemonkey app

Time:01-22

I have a simple Delphi / Firemonkey app that has a lot of data within a TListView. To maximize the available space on screen, I want to make the footer bar disappear with animation if the user scrolls down. Just the same way the LinkedIn app does (at least on Android) for example. Is there an easy way to get there? Some mechanism that is integrated in then Firemonkey framework (like TMultiView)?

I'm using Delphi 11.2.

Thank you!

CodePudding user response:

In FireMonkey you can achieve this quite easily by using Animations like TFloatAnimation which you can attach to any visual FMX component.

For instance if your footer bar is a StatusBar this is how you will done it:

  1. In Form design select your status bar component
  2. Find TFloatAnimation component in your component palette and double click on it. This will add Float Animation to the status bar. If done correctly Float Animation will be shown as child component of your status bar.
  3. Change the PropertyName property of the added Float Animation to point to StatusBar.Size.Height property. This tells the Float Animation that it will be updating Status bars height property.
  4. Now write two new procedures which you can then call to fire the prepared animation when needed.

The procedures would look something like this:

procedure TForm2.HideStatusBar;
begin
  //Store initial height of the status bar as start value so we can use it later
  //for restoring status bar to initial size
  FloatAnimation2.StartValue := StatusBar1.Height;
  FloatAnimation2.StopValue := 0;
  //Set inverste property to false.
  FloatAnimation2.Inverse := False;
  //Start the animation
  FloatAnimation2.Start;
end;

procedure TForm2.ShowStatusBar;
begin
  //In order to reverse animation we need to set Inverse property to True
  //We don't store any StartValue or StopValue since we have done that already
  //when we decided to hide the status bar
  FloatAnimation2.Inverse := True;
  //Start the reverse animation
  FloatAnimation2.Start;
end;

The reason why I store initial height of the status bar within HideStatsBar procedure instead of setting it at design time is to allow scenarios where you may allow your users to change the size of the said status bar.

NOTE: If your footer bar is a panel with Bottom alignment be aware that animating panel breaks the alignment and other components don't update their size properly as they should. I haven't figured out why this is happening and how to fix it.

  • Related