appcelerator orientationchange navbar image hide / show

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

Answer 2

You really need to post more code, for example I have no idea if you are using Ti.UI.currentWindow.hideNavBar(); or if you are using just the .hide(); and .show();?

From what I can tell you're problem however possibly lies with the the width. Trying setting it to '100%' instead of using the platformWidth. Once again without all the relevant code such as your orientationchange event this is best advice I can give. Hope it helps.

THIRD COMMENT: possibly

Titanium.Gesture.addEventListener('orientationchange', function(e) {
    if(e.source.isLandscape()){
        catWin.hideNavBar();
    } else {
        catWin.barImage = 'images/barImage.png';
        catWin.showNavBar();
    }
});

Just somewhere in there or the tab events. I would play around with that idea and see if it gets you any further?

Answer 3

have you tried using the "titleControl" on the Navbar to set the image instead of the barImage control?

also can you post a small apps.js file with the associated image somewhere? it is difficult to full grasp the problem without running the project