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

This comment has been minimized.

Show comment Hide comment
@hfmm99

hfmm99 Mar 22, 2013

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

hfmm99 commented Mar 22, 2013

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

@anbtawy81

This comment has been minimized.

Show comment Hide comment
@anbtawy81

anbtawy81 Jan 19, 2015

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

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