#Tabbed Bar Widget

Cross-platform segmented control (TabbedBar) widget for Appcelerator Titanium apps, by @skypanther

This is an Alloy widgetized version of my old segmented control component with some updated code and options.

Note: This widget uses a custom component on both iOS and Android. In other words, it does not fall back to Ti.UI.iOS.TabbedBar.

$ gittio install com.skypanther.segmentedcontrol

###Manual method (works, but why not use gittio?):

1. Download this repo (git clone, zip, whatever)
2. Copy the widgets/com.skypanther.segmentedcontrol to your project's widgets folder
3. Update your app/config.json to add:

"dependencies": {
    "com.skypanther.segmentedcontrol": "1.0.6"
}

In your XML file, add the widget:

<Widget src="com.skypanther.segmentedcontrol" id="tbar" top="100"/>

Add styling as desired in your tss:

"#tbar": {
	borderRadius: 6,
	borderColor: "#C73C45",
	selectedButtonColor: "#C73C45",
	unselectedButtonColor: "#fff", 
	selectedButtonTextColor: "#fff",
	unselectedButtonTextColor: "#C73C45",
	index: 0,
	withDividers: true,
	font: {
		fontWeight: 'bold',
		fontSize: '15'
	}
}

Initialize it in the controller:

$.tbar1.init(['One', 'Two', 'Three'], callback);

function callback(e) {
	alert('You clicked button ' + (e.index+1));
}

// Get current selected value
alert($.tbar1.getIndex());

You can set these style options in the TSS or in your XML tag.

Additionally, most other properties you set on the widget (via its xml tag or id/class selectors) will be passed down to the widget's components.

• 18-Mar-2016: Ver 1.0.6 resolves a bug with select (not deselecting old value) and adds getIndex()
• 3-Mar-2016: Ver 1.0.5 resolves #5, yet another attempt! (it would help if I owned more iOS devices, donations welcome 😀)
• 29-Feb-2016: Ver 1.0.4 resolves #5, thanks Will Dent! (last button in set not filling entire area on iPhone 6s+)
• 16-Feb-2016: Ver 1.0.3 resolves last button in set not filling entire area on iPhone 6s+
• 08-Feb-2016: Ver 1.0.2 resolves issue where selecting/setIndexing a button didn't deselect the other buttons
• 05-Feb-2016: Ver 1.0.1 resolves layout issues on larger iOS devices when using percentage-based widths
• 29-Jan-2016: Initial release of the widget-ized version of my old Classic-style component
• Ancient history, like 2011, initial release with a few interim releases thereafter

• I have not tested this with more than 4 buttons. Too many and it will surely fail.
• I haven't tested it on a tablet. Layout might be screwed up.
• I'm pretty sure it won't handle rotation of the device well.
• It doesn't support anything fancy, like icons instead of text on the buttons. Note: it will support icon fonts for your text labels, so you can achieve a similar effect.

Contributions are welcome!

#License / Copyright

© 2016 Tim Poulsen

MIT licensed