Skip to content

Instantly share code, notes, and snippets.

@jasonkneen
Last active July 11, 2020 14:07
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save jasonkneen/c9f8aba5a17b01c7c197 to your computer and use it in GitHub Desktop.
Save jasonkneen/c9f8aba5a17b01c7c197 to your computer and use it in GitHub Desktop.
Flipboard style tabgroup indicator for iOS. Drop tabIndicator.js into your Alloy lib folder, then add the module tag to your tabgroup and parameters to override the defaults. As you click on each tab, the indicator will slide across. VIDEO https://www.dropbox.com/s/cbw5e1ruksud9uo/tabindicator.mp4?dl=0
<!-- 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;
};
@brexis
Copy link

brexis commented Nov 11, 2014

Awesome

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