Skip to content

Instantly share code, notes, and snippets.

@brentonhouse
Forked from jasonkneen/index.xml
Created March 15, 2017 18:43
Show Gist options
  • Save brentonhouse/73701b88a0da5c17d63d1853053627f9 to your computer and use it in GitHub Desktop.
Save brentonhouse/73701b88a0da5c17d63d1853053627f9 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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment