Custom Tab Bar
TODO:
- Add support for orientation change
Easily extend tabbar in Appcelerator Titanium mobile for iPhone app to allow any image to be used!
This class is everything short of just being able to drop it in and be done.
-
include the customTabBar with:
Ti.include("/tabbar_module/customTabBar.js");
-
Change your existing:
Ti.UI.createTabGroup(); Including any properties you might be passing to it. And change it to:
createCustomTabGroup();
-
Add any of your new custom properties to your tabs. The available properties are:
tabHeight - an int value for the height of the tab (default is 49) Note: tabWidth does not exist as image scales based on height when set modal - a bool value if you want this tab to behave normally, or open in a modal window
-
Two new methods are added now as well, and they are as follows:
hideTabBar() - Hides the tabBar showTabBar() - Shows the tabBar
Here is an example of the CustomTabBar in use:
// include the new class
Ti.include("/tabbar_module/customTabBar.js");
// create tab group
var tabGroup = createCustomTabGroup();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
custom:true,
window:win1
});
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win1.add(label1);
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'red'
});
close = Ti.UI.createButton({
title:'Close'
})
close.addEventListener('click', function() {
win2.close();
});
win2.setRightNavButton(close);
var tab2 = Titanium.UI.createTab({
icon:'new.png',
tabHeight:60,
tabWidth:190,
custom:true,
modal: true,
window:win2
});
var label2 = Titanium.UI.createLabel({
color:'#fff',
text:'I am Window 2',
font:{fontSize:20,fontFamily:'Helvetica Neue', fontWeight: 'bold'},
textAlign:'center',
width:'auto'
});
var win3 = Titanium.UI.createWindow({
title:'Tab 3',
backgroundColor:'#fff'
});
var tab3 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 3',
window:win3
});
var label3 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 3',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win3.add(label3);
//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.addTab(tab3);
// open tab group
tabGroup.open();
tabGroup.hideTabBar();
setTimeout(function(){
tabGroup.showTabBar();
}, 700);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent