4

Some apps (facebook, 9gag) have this functionality. When the user scrolls up the navigation bar gradually hides itself to a point where vanishes. Then when the user scrolls down the navigationBar gradually shows itself (depending on the speed of the scroll).

We tried to implement this on Titanium by adjusting the height of the nav view on the scroll event, but it is lagged and very slow:

scrollView.addEventListener('touchstart',function(e){ 
        boolScroll=true;
});

scrollView.addEventListener('scroll',function(e){ 
    if(boolScroll){
        auxScroll=e.y;
        boolScroll=false;
    }
    var bh=bars.height;
    var sh=scrolls.height;

    if(auxScroll<e.y)//scrolling down
        if(bars.height>appHeight*0.08){
            bars.height=bh-appHeight*0.005; //rate for hiding
            if(scrolls.height<appHeight*0.7)
                scrolls.height=sh+appHeight*0.005;//same rate to increase the height of the scroll
        }

    if(auxScroll>e.y)//scrolling up
        if(bars.height<appHeight*0.08){
            bars.height=bh+appHeight*0.005; 
            if(scrolls.height>appHeight*0.7)
                scrolls.height=sh-appHeight*0.005;  
        }
});

We also tried doing it with translate animation on the view, but is still slow.

There is a solution for iOS on this question. Any help would be appreciated!

enter image description here

Community
  • 1
  • 1
Sebastián
  • 232
  • 2
  • 11
  • There is an open issue in Titanium JIRA https://jira.appcelerator.org/browse/TIMOB-18912 but nobody touch it for year. :( – darknos Jul 06 '16 at 08:31

2 Answers2

1

Don't know if you solved this problem but I did a trick that's working well for me ( at least for the navigation bar ) Here's the snippet : 

self.addEventListener('scroll',function(e){
        if(e.contentOffset.y > 20) NavigationWindow.window.hideNavBar();
        if(e.contentOffset.y < 20) NavigationWindow.window.showNavBar();
    });

NavigationWindow is an instance of Ti.UI.iOS.createNavigationWindow, self can be a tableview,view,scrollview or a window ( in my example )

Simo Jaouad
  • 19
  • 3
0

this is actually a really nice feature to have. Appcelerator just tackled it and should be available on release 6.0 according to this ticket: https://jira.appcelerator.org/browse/TIMOB-23684

Carlos Zinato
  • 591
  • 7
  • 19