Common UI for iOS 7 and iOS 6 in titanium

Posted By : Deepankar katiyar | 13-Nov-2013

Here You will learn, how to make common ui for iOS 7 and iOS 6 . On iOS 7 and later, all windows, including the first root window, are displayed as full screen with a transparent status bar . that’s why we are making common ui for both.

var baseWindow = Ti.UI.createWindow({
	top : isIOS7() ? 20 : 0,
});

Create a new project in titanium.
Now, replace your “aap.js” code .
First create a base Window .
Then you will set background color property.

Ti.setBackgroundColor("F0FFFF");

Then Create a navigation Group( A navigation Group implements a specialized view that manages the navigation of hierarchical content ).

The navigation group is created with the method.

Titanium.UI.iPhone.createNavigationGroup.

Add nav Group in base Window. Write a function to test if device is iOS 7 or later.

function isIOS7() {

	if (Titanium.Platform.name == 'iPhone OS') {
		var version = Titanium.Platform.version.split(".");
		var major = parseInt(version[0], 10);

		if (major >= 7) {
			return true;
		}
	}
	return false;
};

After that you will set the property in bas Window .

top :  isiOS7()  ? 20: 0,

This property work when device is iOS7 than window property set top = 20, otherwise top =0 if device is below iOS 7.

create a first Window

var firstWindow = Ti.UI.createWindow({
	backgroundColor : "#F0FFFF",
	navBarHidden : true
});

first Window add to navigation group.

Create a button add to first Window and this button to add a listener to move next window when you are click this button.

var next = Ti.UI.createButton({
	title : "NEXT",
	width : 100,
	height : 100,
});

firstWindow.add(next);

now create a js file “nabBar.js” and this file write a code “common ui “ just like that nab Bar here we are create two view (nab Bar) and another is and back image in nab Bar . And add nab Bar first window through require property

exports.navBarView = function(params) {

	var navBar = Ti.UI.createView({
		height : "50dp",
		width : "100%",
		top : '0dp',
		left : '0dp',
		backgroundImage : '/images/nav_bar.png',

	});

	var backButton = Ti.UI.createImageView({
		image : "/images/navBarBackButton.png",
		left : "5dp",
		height : Ti.UI.SIZE,
		width : Ti.UI.SIZE,
	});
	if (params != null) {
		if (params.hasBack) {
			navBar.add(backButton);
		}
	}

	backButton.addEventListener('click', function() {
		params.navGroup.close(params.win);
	});
	return navBar;

};

This is a First window in common ui both iOS 7 and iOS 6.

After that you create a second window and same procedure to apply

This is a Second window in common ui both iOS 7 and iOS 6.

When You click back arrow you back in firstWindow

Here is "apps.js" file where you are create window and nabgroup, navbar.

var baseWindow = Ti.UI.createWindow({
	top : isIOS7() ? 20 : 0,
});
Ti.UI.setBackgroundColor('#F0FFFF');
var navGroup = Ti.UI.iPhone.createNavigationGroup();
baseWindow.add(navGroup);
var navBar = require('/ui/common/nabBar');
function isIOS7() {

	if (Titanium.Platform.name == 'iPhone OS') {
		var version = Titanium.Platform.version.split(".");
		var major = parseInt(version[0], 10);

		if (major >= 7) {
			return true;
		}
	}
	return false;
};

var firstWindow = Ti.UI.createWindow({
	backgroundColor : "#F0FFFF",
	navBarHidden : true
});
navGroup.window = firstWindow;
baseWindow.open();
var nab_bar1 = navBar.navBarView();
firstWindow.add(nab_bar1);

var next = Ti.UI.createButton({
	title : "NEXT",
	width : 100,
	height : 100,
});

firstWindow.add(next);


var secondWindow = Ti.UI.createWindow({
	backgroundColor : "#F0FFFF",
	navBarHidden : true
});
var nab_bar2 = navBar.navBarView({
	hasBack : true,
	navGroup : navGroup,
	win : secondWindow
});
secondWindow.add(nab_bar2);



next.addEventListener('click', function(e) {
	navGroup.open(secondWindow);
});

You can create common ui for iOS 7 and iOS 6 . Hope it helps. -