Last active
July 11, 2020 14:07
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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
Awesome