Firemonkey how to implement app drawer-style tab control

Question

I'm going around in circles trying to solve this. Basically I have a tab control on my Firemonkey android app and can swipe left or right to change tabs and it works fine.

I would like to enhance the swiping so it behaves more like the android app drawer. What I mean by that is if you longtap and slowly slide your finger left or right the screen contents moves left/right with your finger as opposed to what I have now where it only moves a whole screen at a time and not slowly underneath your finger.

A THorzScrollBox is close to the effect I want but it doesn't "snap" onto a single screen but instead can leave your screen half and half on two pages.

Am I making sense here?

I'm using XE8 but I couldn't get it working on earlier versions either!

Many thanks,

Ian.

Answer 1

If someone is interested i just created a new TTabcontrol who enhance the swiping

you can see the code source here (svn) https://svn.code.sf.net/p/alcinoe/code/

and the demo is here : (svn) https://svn.code.sf.net/p/alcinoe/code/demos/ALFmxControls

any remark will be welcome :)

i continue also my logic: create a suite of firemonkey control who are very fast to draw, independant of OpenGL and that don't work with the style (i find the style in firemonkey very inefficient and horribly complicated to maintain), so i create this tabcontrol as a descendant of Tcontrol and not as a descendant of TStyleControl.

i think it much (much) more simple to create the title (ie: button) of the tab myself with basic component like trectangle + ttext than updating the so complicated Stylebook for each plateform (ioe, android, windows, macos, etc)

if you compare the unit of my Tabcontrol (ALFmxTabControl.pas) with the unit of the delphi TabControl (Fmx.TabControl.pas) then you will see that i use 3.5x less line of code (1018 vs 3550), and less line of code = always better

please vote for this feature request here : https://quality.embarcadero.com/browse/RSP-15576

Answer 2

Trying the THorzScrollBox.AniCalculations.SetTargets(...).

eg.

1.Open FMX.HorizontalScroll Sample : CPP\Mobile Snippets\HorizontalScroll

2.Add Form Event : OnResize

3.Write the code :

#include <FMX.InertialMovement.hpp>
void __fastcall THorizontalScrollForm::FormResize(TObject *Sender)
{
    TAniCalculations::TTarget target[4];

    // Set ths size and position of your slides.
    Image1->SetBounds(0, 0, HorzScrollBox1->Width, HorzScrollBox1->Height);
    Image2->SetBounds(HorzScrollBox1->Width, 0, HorzScrollBox1->Width, HorzScrollBox1->Height);
    Image3->SetBounds(HorzScrollBox1->Width*2, 0, HorzScrollBox1->Width, HorzScrollBox1->Height);
    Image4->SetBounds(HorzScrollBox1->Width*3, 0, HorzScrollBox1->Width, HorzScrollBox1->Height);

    // Assign the check point(your slides' top-left conner).
    target[0].TargetType = TAniCalculations::TTargetType::Other;
    target[0].Point = TPointD(1, 0);
    target[1].TargetType = TAniCalculations::TTargetType::Other;
    target[1].Point = TPointD(HorzScrollBox1->Width, 0);
    target[2].TargetType = TAniCalculations::TTargetType::Other;
    target[2].Point = TPointD(HorzScrollBox1->Width*2, 0);
    target[3].TargetType = TAniCalculations::TTargetType::Other;
    target[3].Point = TPointD(HorzScrollBox1->Width*3, 0);
    HorzScrollBox1->AniCalculations->SetTargets(target, 3);
}