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?
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
});开发者_如何学Python
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();
}
});
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?
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();
}
}
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
精彩评论