Question

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?

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();
    }
});

Answer 1

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();
   }
}