Skip to content

Instantly share code, notes, and snippets.

@tzmartin
Forked from jasonkneen/index.xml
Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tzmartin/7c536aacebbbe7221b57 to your computer and use it in GitHub Desktop.
Save tzmartin/7c536aacebbbe7221b57 to your computer and use it in GitHub Desktop.
<!-- note the ONLY change to this is the additional module="tabIndicator"
attribute + properties to override indicator defaults //-->
<Alloy>
<TabGroup module="tabIndicator" tabsBackgroundColor="#000" tabIndicatorHeight="1" tabIndicatorColor="white" tabIndicatorWidth="75%">
<Tab title="Tab 1" icon="/images/icons/519-tools-1.png" activeIcon="/images/icons/519-tools-1_active.png" color="#555" activeColor="#fff">
<Window title="Tab 1" barColor="black" navTextColor = "#fff">
<Label onClick="openWin1">Tab 1</Label>
</Window>
</Tab>
<Tab title="Tab 2" icon="/images/icons/516-archive-box.png" activeIcon="/images/icons/516-archive-box_active.png" color="#555" activeColor="#fff">
<Window title="Tab 2" barColor="green" navTextColor = "red">
<Label onClick="openWin2">Tab 2</Label>
</Window>
</Tab>
<Tab title="Tab 3" icon="/images/icons/522-floppy-disk.png" activeIcon="/images/icons/522-floppy-disk_active.png" color="#555" activeColor="#fff">
<Window title="Tab 3">
<Label >Tab 3</Label>
</Window>
</Tab>
</TabGroup>
</Alloy>
// put me in /app/lib
exports.createTabGroup = function(args) {
// create base tabgroup
var tabGroup = Ti.UI.createTabGroup(args);
if (OS_IOS) {
// get the display width and calc the tab width
var deviceWidth = Ti.Platform.displayCaps.platformWidth;
var tabWidth = deviceWidth / tabGroup.tabs.length;
var indicatorWrapper = Ti.UI.createView({
width : tabWidth,
height : args.tabIndicatorHeight || 1.5,
left : 0,
bottom : 0,
});
// create the base indicator, takes args for height, width, color
var indicator = Ti.UI.createView({
height : Ti.UI.FILL,
backgroundColor : args.tabIndicatorColor || "red",
width : args.tabIndicatorWidth || tabWidth
});
// trap the focus event and animate the indicator
tabGroup.addEventListener("focus", function(e) {
indicatorWrapper.animate({
left : tabWidth * e.index,
duration : 100
});
});
// add the indicator and return the tabgroup
indicatorWrapper.add(indicator);
tabGroup.add(indicatorWrapper);
}
return tabGroup;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment