Custom Tab with Smooth Animation using Titanium Framework

Here is a sample code to make custom tab and open their corresponding views with a smooth animation.

//Define current window
var currentWin = Ti.UI.currentWindow;

//Define the first tab
var firstTab= Ti.UI.createView({

width                  :100,
height                 :50,
left                     : 65,
top                     : 0,
opacity               : 0.5,
backgroundColor :’red’
});

//Added a label to the tab to show the tab name
firstTab.add(Ti.UI.createLabel({width : 80, height : ‘auto’, text : ‘First Tab’, color : ‘black’, font : {fontWeight : ‘bold’}}));

//First tab added to the window
currentWin.add(firstTab);

//Define second tab
var secondTab = Ti.UI.createView({

width                  : 100,
height                 : 50,
left                      : 165,
top                      : 0,
opacity                : 0.5,
backgroundColor  :’yellow’
});

//Added a label to the tab to show the tab name
secondTab.add(Ti.UI.createLabel({width : 80, height : ‘auto’, text : ‘Second Tab’, color : ‘black’, font : {fontWeight : ‘bold’}}));

//Second tab added to the window
currentWin.add(secondTab);

//Define first tab view
var firstTabView = Ti.UI.createView({

width                  :Ti.Platform.displayCaps.platformWidth,
height                 :331,
bottom                : 10,
left                      : 0,
opacity                : 0.5,
backgroundColor  :’red’
});

//Label added to First tab view
firstTabView.add(Ti.UI.createLabel({width : ‘auto’, height : ‘auto’, text : ‘I am first tab view’, color : ‘black’, font : {fontWeight : ‘bold’}}));

//First tab view added to the window
currentWin.add(firstTabView);

//Define secondtab view

var secondTabView = Ti.UI.createView({
width                      : Ti.Platform.displayCaps.platformWidth,
height                     : 331,
bottom                   : 10,
left                         : Ti.Platform.displayCaps.platformWidth,
opacity                   : 0.5,
backgroundColor     : ‘yellow’
});

//Label added to second tab view
secondTabView.add(Ti.UI.createLabel({width : ‘auto’, height : ‘auto’, text : ‘I am second tab view’, color : ‘black’, font : {fontWeight : ‘bold’}}));

//secon tab view added to the window
currentWin.add(secondTabView);

//Var to check the tab position
var isAtStartPlace = true;

//Open the first tab view
firstTab.addEventListener(‘click’, function(){
if(!isAtStartPlace){
isAtStartPlace = true;

//Animate the tab
firstTab.animate({
duration :2000,
left        : 65,
top        : 0
});
secondTab.animate({
duration :2000,
left        : 165,
top        : 0
});

//Animate the tab view
firstTabView.animate({
duration  :2000,
left         : 0,
bottom    : 10
});
secondTabView.animate({
duration  : 2000,
left         : Ti.Platform.displayCaps.platformWidth,
bottom    : 10
});
}
});

//To open second tab view
secondTab.addEventListener(‘click’, function(){
if(isAtStartPlace){
isAtStartPlace = false;

//Animate tabs
firstTabView.animate({

duration  :2000,
left         : 165,
top         : 0
});
secondTab.animate({
duration :2000,
left        : 65,
top        : 0
});

//Animate tab views
firstTabView.animate({
duration  : 2000,
left          : Ti.Platform.displayCaps.platformWidth,
bottom    : 10
});
secondTabView.animate({
duration  : 2000,
left         : 0,
bottom    : 10
});
}
});

NOTE : All the position related values are set for a particular resolution of android device. The UI will be distorted in other resolutions

Written By: Raju Mahato, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s