Supporting Different orientationModes in your Universal iOS App

Recently I had a requirement to create a universal app that supported different orientation modes for iPhone and iPad. 

There are two key points to implementing a universal app that support different orientations by device.

1. Explicitly define your launch orientations in your tiapp.xml for both iPhone and iPad
2. On Window create explicitly set the orientation mode property.

Setting iPhone and iPad Launch Orientations

By configuring your orientation modes in your tiapp.xml tells the app what orientations are supported when the app is loading and your splash screen is active.  Since Titanium 2.0 you have the ability to set the orientation modes using info.plist format as shown below.

1. Add the UISupportedInterfaceOrientations node as shown below. This specifies the orientation mode used by the iPhone.
2. Add the UISupportedInterfaceOrientations~ipad node as shown below. This specifies the orientation mode the iPad will use.

If you do not add the iPad orientation node(UISupportedInterfaceOrientations~ipad) your app will use the UISupportedInterfaceOrientations settings to determine default orientation behavior.

The example below shows setting the launch orientations for the iPhone to Portrait and the iPad to both Portrait and Landscape.

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
    <deployment-targets>
        <target device="mobileweb">false</target>
        <target device="iphone">true</target>
        <target device="ipad">true</target>
        <target device="android">false</target>
        <target device="blackberry">false</target>
    </deployment-targets>
    <ios>
        <plist>
            <dict>
                <key>UISupportedInterfaceOrientations</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
            </dict>
        </plist>
    </ios>
</ti:app>

For more information please reference the iOS Specific Section documentation here.

Creating Windows with Explicit Orientations

It is a best practice to always set the orientations you wish to support on Window creation.

Below is a helper function and sample I use when creating all of my windows.  This can also be helpful for setting a common backgroundColor, or other setting.

1. CommonJS Helper ( file called helper.js)

var _isPhone = (Ti.Platform.osname == "iphone");
exports.makeWindow=function(a){
    a = a || {};
    var win = Ti.UI.createWindow(a);
    if(_isPhone){
            win.orientationModes = [
                Ti.UI.PORTRAIT,
                Ti.UI.UPSIDE_PORTRAIT
            ];  
    }else{
            win.orientationModes = [
                Ti.UI.PORTRAIT,
                Ti.UI.UPSIDE_PORTRAIT,
                Ti.UI.LANDSCAPE_LEFT,
                Ti.UI.LANDSCAPE_RIGHT
            ];  
    }

    return win; 
};

2. Sample Window Creation (app.js)

var helpers = require('helpers');
var winConfig = {
        title:"Foo", backgroundColor:'#fff', tabBarHidden:true, barColor:'#000
};
var win = helpers.makeWindow(winConfig);
var testLabel = Ti.UI.createLabel({
        text:"this is a test, turn the device to see if it worked", 
        color:"#000", top:40, left:25, right:25, height:60,
        textAlign:"center", font:{fontSize:12}
});
win.add(testLabel);
win.open();

For more information about window orientation please see the documentation here.