Skip to content

Instantly share code, notes, and snippets.

@csemrm
Forked from brentonhouse/index.xml
Created March 27, 2017 15:53
Show Gist options
  • Save csemrm/ba042a0dba8ed4925000e4e5f1bccb40 to your computer and use it in GitHub Desktop.
Save csemrm/ba042a0dba8ed4925000e4e5f1bccb40 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