One of the great benefits to users with current smartphones is the ability to hold the device in any way possible and have the screen rotate to suit its orientation. Titanium allows you to fire event handlers based on orientation changes in your application.
In this recipe, we will create an event handler that fires whenever the orientation on the device is changed, and we will re-arrange some UI components on our screen accordingly.
Open your app.js file, remove any existing code, and type in the following:
//
// create root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
//set the allowed orientation modes for win1
//in this example, we'll say ALL modes are allowed
win1.orientationModes = [
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT,
Titanium.UI.PORTRAIT,
Titanium.UI.UPSIDE_PORTRAIT
];
var view1 = Titanium.UI.createView({
width: Titanium.Platform.displayCaps.platformWidth,
height: Titanium.Platform.displayCaps.platformHeight,
backgroundColor: 'Blue'
});
var labelOrientation = Titanium.UI.createLabel({
text: 'Currently in ? mode',
width: '100%',
textAlign: 'center',
height: 30,
color: '#000'
});
view1.add(labelOrientation);
win1.add(view1);
Ti.Gesture.addEventListener('orientationchange', function(e) {
//check for landscape modes
if (e.orientation == Titanium.UI.LANDSCAPE_LEFT ||
e.orientation == Titanium.UI.LANDSCAPE_RIGHT) {
view1.width =
Titanium.Platform.displayCaps.platformWidth;
view1.height =
Titanium.Platform.displayCaps.platformHeight;
labelOrientation.text = 'Currently in LANDSCAPE mode';
view1.backgroundColor = 'Blue';
}
else {
//we must be in portrait mode!
view1.width =
Titanium.Platform.displayCaps.platformWidth;
view1.height =
Titanium.Platform.displayCaps.platformHeight;
labelOrientation.text = 'Currently in PORTRAIT mode';
view1.backgroundColor = 'Yellow';
}
});
//open root window
win1.open();
Try running your app now in the emulator or on your device, and orientating the screen between landscape and potrait modes. You should see changes like those in the previous screenshot!
We are attaching an event listener into the Ti.Gesture and once the orientation of the device changes this event handler is fired and we can re-arrange the components on the screen as we see fit. Technically, we can really do anything we want within this handler. A great example might be having a TableView whilst in portrait mode and opening a new window containing a MapView when the user orientates the screen into landscape mode. Here we are simply changing both the colour of our main view object and the text property of the label contained within it in order to highlight the changes in the device orientation.