Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Action Bar Module for Titanium Mobile
/*
* Android API Guide
* http://developer.android.com/guide/topics/ui/actionbar.html
* Android Design Guide
* http://developer.android.com/design/patterns/actionbar.html
* Titanium Mobile will support someday
* https://jira.appcelerator.org/browse/TIMOB-2371
*/
var osName = Ti.Platform.osname,
isAndroid = osName==='android',
isIOS = osName==='iphone' || osName==='ipad' || osName==='ipod',
theme = {
fontFamily : isIOS ? 'Helvetica Nue' : 'Droid Sans',
backgroundColor : '#cdcdcd',
borderColor : '#b5b5b5',
textColor : '#5f5f5f',
dividerColor : '#b5b5b5',
selectedColor : '#00b7e3',
height : '48dp',
buttonHeight : '46dp',
selectedButtonHeight : '42dp',
dividerWidth : 1,
dividerHeight : '32dp',
fontSize : '12dp'
},
events = {
'TAB_CLICK' : 'ActionBar.NavigationTab:Click'
};
function createNavigationTabGroup(tabs){
var _tabs = tabs || [],
_tabCount = _tabs.length,
_i = 0,
_deviceWidth = Ti.Platform.displayCaps.platformWidth,
_width = (_deviceWidth / _tabCount) - 1,
_selectedTab,
_view = Ti.UI.createView({
layout : 'horizontal',
width : Ti.UI.FILL,
top : 1,
bottom : 1
});
for(; _i < _tabCount; _i++){
_tabs[_i].width = _width;
_tabs[_i] = buildTab(_tabs[_i]);
_view.add(_tabs[_i].tabView);
_view.add(tabSeperator());
}
_view.addEventListener(events.TAB_CLICK, function(e) {
var _n = 0,
_len = _tabs.length,
_aTab;
for(; _n<_len; _n++){
_aTab = _tabs[_n];
if(_aTab.tabView.id==_selectedTab){
_aTab.select(false);
}
if(_aTab.tabView.id==e.tabId){
_aTab.select(true);
}
}
_selectedTab = e.tabId;
});
function tabSeperator(){
var seperatorView = Ti.UI.createView({
backgroundColor : theme.backgroundColor,
width : theme.dividerWidth
}),
seperator = Ti.UI.createView({
height : theme.dividerHeight,
backgroundColor : theme.dividerColor
});
seperatorView.add(seperator);
return seperatorView;
}
function buildTab(params){
var _params = params || {},
_tabView,
_tabLabel,
_config = {
id : _params.id || (new Date()).getTime()+'',
text : _params.text || "Nav",
selectedColor : _params.selectedColor || theme.selectedColor,
backgroundColor : _params.backgroundColor || theme.backgroundColor,
textColor : _params.textColor || theme.textColor,
width : _params.width || 'auto',
selected : _params.selected || false
};
if(_config.selected){
_selectedTab = _config.id;
}
_tabView = Ti.UI.createView({
id : _config.id,
backgroundColor : _config.selectedColor,
width : _config.width,
layout : 'vertical'
});
_tabLabel = Ti.UI.createLabel({
text : _config.text,
color : _config.textColor,
backgroundColor : _config.backgroundColor,
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
height : _config.selected ? theme.selectedButtonHeight : theme.buttonHeight,
left : 0,
right : 0,
font : {
fontSize : theme.fontSize,
fontWeight : 'bold'
}
});
_tabView.add(_tabLabel);
_tabView.addEventListener('click', function() {
_view.fireEvent(
events.TAB_CLICK,
{ tabId : _tabView.id }
);
});
return {
tabView : _tabView,
select : function(bool){
_tabLabel.height = bool ? theme.selectedButtonHeight : theme.buttonHeight
}
};
}
return _view;
}
function ActionBarView(args) {
var ActionBar = Ti.UI.createView({
height : theme.height,
backgroundColor : theme.borderColor,
layout : 'horizontal',
top : 0
}),
navigationTabGroup = createNavigationTabGroup(args.tabs);
ActionBar.add(navigationTabGroup);
return ActionBar;
}
module.exports = ActionBarView;
//Here is how it is used
var ApplicationWindow = Ti.UI.createWindow({
navBarHidden : true,
exitOnClose : true,
backgroundColor : '#fff'
}),
ActionBarView = require('ActionBarView'),
actionBar = new ActionBarView({
tabs : [
{
text : 'Home',
id : 'home',
selected : true
},
{
text : 'Products',
id : 'products'
},
{
text : 'Info',
id : 'info'
},
{
text : 'Cart',
id : 'cart'
}
]
});
ApplicationWindow.add(actionBar);
actionBar.addEventListener(
'ActionBar.NavigationTab:Click',
function(e){
//Add code to manage windows or views
alert(e.tabId); //fire alert to make sure this works
}
);
ApplicationWindow.open();

hfmm99 commented Mar 22, 2013

Excellent job, it would be nice to add support for icons, and for sliding between tabs. Thanks.

Hi, the actionBar click event doesn't work. Thanks for your code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment