Search code examples
javascriptappceleratornavbarorientation-changes

appcelerator orientationchange navbar image hide / show


I'm building an app with some tabs for the iPhone. rephrased the question in the appcelerator website here

When i change from portrait to landscape i want to hide the navbar.

it works fine if i don't switch to another tab. But when i view 1 tab in portrait, switch to another tab, change to landscape view, switch back to the first tab, and then change to back portrait the navbar (window.barImage) is all stretched out ( to the size of a landscape navBar )

Also when i remove all my code for hiding the navbar the same problem occurs.

I've tried setting the barImage again on orientationchange but that does not help either.

a site note: I'm using the same image on every tab for the navBar could that be the problem?portrait view of the app showing my problem

I marked in green the navbar image, the blue part is where the image normally should be.

Also note that the image is the right size for a portrait view of the navbar.

code:

var windowWidth = Ti.Platform.displayCaps.platformWidth;

var catWin = Ti.UI.createWindow({
    title:'',
    barImage: 'images/barImage.png',
    url:'vacancies/categories.js',
    width: windowWidth
});

catWin.orientationModes = [
    Titanium.UI.PORTRAIT,
    Titanium.UI.LANDSCAPE_LEFT,
    Titanium.UI.LANDSCAPE_RIGHT
];

Titanium.Gesture.addEventListener('orientationchange', function(e) {
    if(e.orientation == Titanium.UI.LANDSCAPE_RIGHT){
        catWin.hideNavBar();
    } else if(e.orientation == Titanium.UI.LANDSCAPE_LEFT){
        catWin.hideNavBar();
    } else if(e.orientation == Titanium.UI.PORTRAIT){
        catWin.showNavBar();
    }
});

Solution

  • While this is not the best solution because it still looks a bit odd ( but way better then before, ) this is the best solution until now. I have found some kind of solution by using the following code:

    I've set the barImage in the createWindow code so at least at the beginning it looks OK:

    var jbWin = Ti.UI.createWindow({
        title: '',
        url:'homePage.js',
        barImage: 'images/jobbroker_bar.png'
    });
    

    Then on orientationchange I unset the barImage and start using the titleImage:

    Titanium.Gesture.addEventListener('orientationchange', function(e){
       if(e.source.isLandscape()){
          catWin.titleImage = '';
          catWin.barImage = '';
          catWin.hideNavBar();
       else if( e.orientation != Ti.UI.FACE_UP && e.orientation != Ti.UI.FACE_DOWN ) {
          catWin.titleImage = 'images/jobbroker_bar.png';
          catWin.showNavBar();
       }
    }