Watch, Follow, &
Connect with Us

For forums, blogs and more please visit our
Developer Tools Community.


Welcome, Guest
Guest Settings
Help

Thread: How to get mobile form to slide up from bottom of screen


This question is answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 6 - Last Post: Aug 27, 2014 5:43 AM Last Post By: Ken McClain
Ken McClain

Posts: 5
Registered: 4/14/12
How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 26, 2014 1:11 PM
Delphi XE6 Professional + Mobile add-on

I'm new at mobile app development with Delphi so be patient. I have been using Delphi since 1.0 however.

I'm trying to write an IOS app as a learning exercise.
My goal is to create an app like the Contacts app found on iPhone 5s IOS 7.1

The one thing I'm having trouble figuring out is how to slide the form or tabitem up from the bottom of the screen like you see when you click the '+' button on the app.

I'm looking for useful suggestion and/or examples on how I might do this.

Thanks
Linden ROTH

Posts: 467
Registered: 11/3/11
Re: How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 26, 2014 1:46 PM   in response to: Ken McClain in response to: Ken McClain
Ken McClain wrote:
Delphi XE6 Professional + Mobile add-on

I'm new at mobile app development with Delphi so be patient. I have been using Delphi since 1.0 however.

I'm trying to write an IOS app as a learning exercise.
My goal is to create an app like the Contacts app found on iPhone 5s IOS 7.1

The one thing I'm having trouble figuring out is how to slide the form or tabitem up from the bottom of the screen like you see when you click the '+' button on the app.

I'm looking for useful suggestion and/or examples on how I might do this.

Thanks

Might I suggest that this might be ambitious ... like a newbie to Delphi developing components but if you want have a look at how tab transitions are done in FMX.TabControl
procedure TTabControl.SetActiveTabWithTransition(const ATab: TTabItem; ATransition: TTabTransition; const ADirection: TTabTransitionDirection = TTabTransitionDirection.Normal);

Actual now that I've looked it not that hard - have fun and let us know

--
Linden
"Mango" was Cool but "Wasabi" was Hotter but remember it's all in the "source"

Ken McClain

Posts: 5
Registered: 4/14/12
Re: How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 26, 2014 2:55 PM   in response to: Linden ROTH in response to: Linden ROTH
Linden ROTH wrote:
Ken McClain wrote:
Delphi XE6 Professional + Mobile add-on

I'm new at mobile app development with Delphi so be patient. I have been using Delphi since 1.0 however.

I'm trying to write an IOS app as a learning exercise.
My goal is to create an app like the Contacts app found on iPhone 5s IOS 7.1

The one thing I'm having trouble figuring out is how to slide the form or tabitem up from the bottom of the screen like you see when you click the '+' button on the app.

I'm looking for useful suggestion and/or examples on how I might do this.

Thanks

Might I suggest that this might be ambitious ... like a newbie to Delphi developing components but if you want have a look at how tab transitions are done in FMX.TabControl
procedure TTabControl.SetActiveTabWithTransition(const ATab: TTabItem; ATransition: TTabTransition; const ADirection: TTabTransitionDirection = TTabTransitionDirection.Normal);

Actual now that I've looked it not that hard - have fun and let us know

Looks like you cut and pasted you answer from the documentation.
Yes I had already researched that.

I may be a newbie to mobile app development, I'm certainly not a newbie to software development or Delphi component design. This is not the first mobile app I've developed. I'm experimenting with some functionality and visual effects.
You've probably done the same.

Now since the following is true according to the documentation:
TTabTransition = (None, Slide);
TTabTransitionDirection = (Normal, Reversed);

How do you slide from the bottom up rather that left and right (side to side)?
This was my question.

It may very well be that using TTabControl is not the way to do it. I've spent a lot of time trying to figure this out so I thought asking on the forum was the right place.
Maybe someone else can understand my question.

Linden ROTH

Posts: 467
Registered: 11/3/11
Re: How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 26, 2014 8:53 PM   in response to: Ken McClain in response to: Ken McClain
Ken McClain wrote:
Linden ROTH wrote:
Ken McClain wrote:
Delphi XE6 Professional + Mobile add-on

I'm new at mobile app development with Delphi so be patient. I have been using Delphi since 1.0 however.

I'm trying to write an IOS app as a learning exercise.
My goal is to create an app like the Contacts app found on iPhone 5s IOS 7.1

The one thing I'm having trouble figuring out is how to slide the form or tabitem up from the bottom of the screen like you see when you click the '+' button on the app.

I'm looking for useful suggestion and/or examples on how I might do this.

Thanks

Might I suggest that this might be ambitious ... like a newbie to Delphi developing components but if you want have a look at how tab transitions are done in FMX.TabControl
procedure TTabControl.SetActiveTabWithTransition(const ATab: TTabItem; ATransition: TTabTransition; const ADirection: TTabTransitionDirection = TTabTransitionDirection.Normal);

Actual now that I've looked it not that hard - have fun and let us know

Looks like you cut and pasted you answer from the documentation.
Yes I had already researched that.

I may be a newbie to mobile app development, I'm certainly not a newbie to software development or Delphi component design. This is not the first mobile app I've developed. I'm experimenting with some functionality and visual effects.
You've probably done the same.

Now since the following is true according to the documentation:
TTabTransition = (None, Slide);
TTabTransitionDirection = (Normal, Reversed);

How do you slide from the bottom up rather that left and right (side to side)?
This was my question.

It may very well be that using TTabControl is not the way to do it. I've spent a lot of time trying to figure this out so I thought asking on the forum was the right place.
Maybe someone else can understand my question.


Again I'm not being clear to day (stuffed up in another thread) I was suggesting you write your on transition top / bottom using the code contained within FMX.TabControl as a TEMPLATE you could actually implement it in a FMX.UPDOWNTabControl enhancement of TabControl or as a separate rawer container.

The cut of code was the place where transitions is implemented and it seems very contained and could be done in a cut and paste of that code with some small edits

eg
            
LocalAnimateInt(Layout1, 'Position.X', Round(P.X - LayoutRect.Width), Duration, TAnimationType.In, TInterpolationType.Linear);

becomes
            
LocalAnimateInt(Layout1, 'Position.Y', Round(P.Y - LayoutRect.Height), Duration, TAnimationType.In, TInterpolationType.Linear);


Just guessing

--
Linden
"Mango" was Cool but "Wasabi" was Hotter but remember it's all in the "source"
Linden ROTH

Posts: 467
Registered: 11/3/11
Re: How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 26, 2014 10:00 PM   in response to: Linden ROTH in response to: Linden ROTH
This works ... bit naf because of some of the stuff I didn't handle (I've not included all code due to (c))

I wouldn't ship this but it a start

            
 
type
  TTIContent = class( TContent );
 
  TTabControlUpDown = class(TTabControl)
  private
    { Private declarations }
    procedure WebBrowserReallign(Sender: TObject); //ripped from source
    procedure AnimationFinished(Sender: TObject);     //ripped from source
    function getContent( _ti : TTabItem ) : TTIContent;
  protected
    { Protected declarations }
  public
    { Public declarations }
    procedure SetActiveTabWithTransitionUpDown(const ATab: TTabItem; Up : boolean );
  published
    { Published declarations }
  end;
....
uses
  System.Types,
  FMX.Forms, FMX.Platform, FMX.Ani, FMX.WebBrowser, FMX.Graphics;
 
type
  TOpenStyledControl = class(TStyledControl);
.....
 
function TTabControlUpDown.getContent(_ti: TTabItem): TTIContent;
var
  i: integer;
begin
  result := nil;
  with _ti  do
    for i := 0 to ChildrenCount -1 do
      if Children[ i ] is TContent then
        if TContent( Children[ i ]).classname = 'TTabItemContent' then
          result := TTIContent( Children[ i ]);
end;
 
....
 
//  TransitionRunning := True;
  ClipChildren := True;
  try
    LayoutPos := getContent( ActiveTab ).LocalToAbsolute(PointF(0, 0));
    LayoutRect := getContent( ActiveTab ).BoundsRect;
 
    Tab1 := ActiveTab;
    Layout1 := getContent( ActiveTab );
    ActiveTab := ATab;
    Tab2 := ActiveTab;
    Layout2 := getContent( ActiveTab );
 
//    SetLength(FTransitionTabs, 2);
//    FTransitionTabs[0] := Tab1;
//    FTransitionTabs[1] := Tab2;
...
    if Up then
    begin
      P := Tab1.AbsoluteToLocal(LayoutPos);
      Layout1.SetBounds(P.X, P.Y, LayoutRect.Width, LayoutRect.Height);
      LocalAnimateInt(Layout1, 'Position.Y', Round(P.Y - LayoutRect.Height), Duration, TAnimationType.In, TInterpolationType.Linear);
      P := Tab2.AbsoluteToLocal(LayoutPos);
      Layout2.SetBounds(P.X, P.Y + LayoutRect.Height, LayoutRect.Width, LayoutRect.Height);
      LocalAnimateIntWait(Layout2, 'Position.Y', Round(P.Y), Duration, TAnimationType.In, TInterpolationType.Linear);
    end
....
 
  finally
//    SetLength(FTransitionTabs, 0);
    ClipChildren := False;
//    TransitionRunning := False;
    Realign;
  end;
 
 

--
Linden
"Mango" was Cool but "Wasabi" was Hotter but remember it's all in the "source"
John Frazier


Posts: 726
Registered: 2/17/00
Re: How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 26, 2014 11:10 PM   in response to: Ken McClain in response to: Ken McClain
Ken McClain wrote:
Delphi XE6 Professional + Mobile add-on

I'm new at mobile app development with Delphi so be patient. I have been using Delphi since 1.0 however.

I'm trying to write an IOS app as a learning exercise.
My goal is to create an app like the Contacts app found on iPhone 5s IOS 7.1

The one thing I'm having trouble figuring out is how to slide the form or tabitem up from the bottom of the screen like you see when you click the '+' button on the app.

I'm looking for useful suggestion and/or examples on how I might do this.

I don't know exactly what you want but from the basic description, check out the following article and video from Jose. Using a technique like this is easy in FM and you can just flip the signing of the variables and design of the menu. The idea here is you can kinda do whatever you want.

http://joseleon.es/?p=239
--
John Frazier (Embarcadero Newsgroup Admin)
Ken McClain

Posts: 5
Registered: 4/14/12
Re: How to get mobile form to slide up from bottom of screen  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 27, 2014 5:43 AM   in response to: Ken McClain in response to: Ken McClain
Thank you for your response
Legend
Helpful Answer (5 pts)
Correct Answer (10 pts)

Server Response from: ETNAJIVE02