Although Appcelerator Titanium makes much of the hard work of integrating with numerous operating systems and devices invisible to you, the developer, there are going to be times when you simply have to write some code that is platform specific. The most common way to do this is by checking the osname property from the Titanium.Platform namespace.
In this recipe we will create a simple screen the shows a custom activity indicator when the device is an iPhone, and a standard indicator when the user is on an Android device.
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'
});
///this next bit is a custom activity indicator for iphone
///due to too many diffs between android and ios ones
var actIndIphone = Titanium.UI.createView({
width: 320,
height: 480,
backgroundColor: '#000',
opacity: 0.75,
visible: false
});
var actIndBg = Titanium.UI.createView({
width: 280,
height: 50,
backgroundColor: '#000',
opacity: 1,
borderRadius: 5
});
var indicatorIphone = Titanium.UI.createActivityIndicator({
width: 30,
height: 30,
left: 10,
top: 10,
color: '#fff',
style: 1
});
actIndBg.add(indicatorIphone);
var actIndLabel = Titanium.UI.createLabel({
left: 50,
width: 220,
height: 'auto',
textAlign: 'left',
text: 'Please wait, loading iPhone...',
color: '#fff',
font: {fontSize: 12, fontFamily: 'Helvetica'}
});
actIndBg.add(actIndLabel);
actIndIphone.add(actIndBg);
win1.add(actIndIphone);
//the important bit!
//check if platform is android and if so, show a normal dialog
//else show our custom iPhone one
if(Ti.Platform.osname == 'android')
{
var indicatorAndroid = Titanium.UI.createActivityIndicator({
title: 'Loading',
message: 'Please wait, loading Android...'
});
indicatorAndroid.show();
}
else
{
actIndIphone.visible = true;
indicatorIphone.show();
}
//open root window
win1.open();Now run your application in both the Android and iPhone simulators. You should be able to tell that the code we wrote has recognized which platform you're running and is displaying an activity indicator differently on each.
This simple recipe shows you how to code around differences in the two platforms using the simplest of "if" statements, namely by checking the osname of the current device using the Titanium.Platform.osname property. We have put this check to good use by only displaying our custom activity indicator view when we're on an iPhone. On the Android platform, this is unnecessary as the activity indicator will appear as a modal view on screen above all others simply by using its ".show()" method.
You can use this property to check the platform whenever you need to display a separate UI component or integrate with a platform independent API. An example of this recipe running on each device is shown in the following screenshot:
