CODEWITHSUNDEEP
titaniumtitanium-mobile
Rh Jov
Rh Jov

Reputation: 115

Titanium How to push one window to another having push view controller effect ( animation like in iphone)

i am new to titanium. Does anybody know how to push one window to another having push view controller effect (animation like in iphone).since in the documentation most are modal presentation. Is there push view like we have on iphone?Thanks.

Upvotes: 2

Views: 926

Answers (1)

Tevo D
Tevo D

Reputation: 3381

We have been using animation to slide windows in on Android, simulating the iOS feature. We ended up making our own window manager to manage the differences, but I have extracted the relevant animation code.

We use windows in a navigation group on iOS, and views on a single window on Android.

We have a single view for the client area called vwBody, which you will see referenced here. This is the client area under our composed navigation header. If you are not simulating the entire navigation group feature then this may just be the main window.

In any case, we compose the incoming view showing just one pixel on the right side of the client area:

// vwBody is preexisting view defining the client area

var newview = Ti.UI.createView( {
    name: name,
    left: vwBody.size.width - 1,
    top: 0,
    width: vwBody.size.width,
    height: vwBody.size.height } );

// compose the view here

vwBody.add(newView);
newView.addEventListener('postlayout', waitForWindowPaint);

This allows the view to compose correctly, as Android/Ti won't actually start drawing until the view is on-screen. We wait for the postlayout event before proceeding with the animation. Once composition is complete, we animate the view in:

function waitForWindowPaint()
{
  newView.animate({ left: 0, duration:300 }, 
    function(){ /* whatever to do post animation */ });

  newView.removeEventListener("postlayout", waitForWindowPaint);
}

The view is now ready for user interaction.

When we close the view, we animate it back out:

newView.animate({ left: curWin.size.width, opacity: 0, duration:300 },
   function(){ vwBody.remove(newView); });

We hook both the android:back and header back button to close the view.

Upvotes: 2

Related Questions