Cross-platform segmented control for Titanium
MIT License
#Tabbed Bar Widget
Cross-platform segmented control (TabbedBar) widget for Appcelerator Titanium apps, by @skypanther
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?):
"dependencies": {
"com.skypanther.segmentedcontrol": "1.1.0"
}
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());
New in version 1.1, you can skip an index. See below for the rationale and further details:
$.tbar1.init(['One', 'Two', 'Four'], callback, {
skipindex: 2 // 0-based numbering!
});
You can set these style options in the TSS or in your XML tag.
Property | Description | Default |
---|---|---|
selectedButtonColor |
background color of theselected button |
#d9bc1b (yellow) |
unselectedButtonColor |
background color of buttonsthat are not selected |
#226e92 (blue) |
selectedButtonTextColor |
color of text on the selectedbutton | #fff |
unselectedButtonTextColor |
color of text on unselectedbuttons | #000 |
disabledTextColor |
color of text on a disabledbutton |
#aaa (light grey) |
disabledButtonBackgroundColor |
background color of adisabled button |
#444 (dark grey) |
font |
font properties of the buttonlabels |
{fontFamily: 'Avenir-Light', fontSize: 11} (ios){fontWeight: 'normal', fontSize: '15dp'} (android) |
withDividers |
whether to add dividers between button (color matches selected backgroundcolor) | false |
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.
Method | Notes |
---|---|
init(labels, callback) |
You must call this method to initialize the control, passing to it an array of labels and a function to be called when a button is tapped. That function will receive an object whose index property is the number of the button that was tapped |
select(num) |
Selects the button specified |
getIndex() |
Gets the current selected button |
setIndex(num) |
Synonym for select()
|
deselect(num) |
Deselects (unselects) the button specified |
enable() |
Enables click events for the whole control |
disable() |
Disables click events for the whole control |
deselectAll() |
Deselects all the buttons in the control |
disableButton(num) |
Disables the specified button, making it unclickable while the rest remain clickable |
enableButton(num) |
Enables the specified button, making it clickable. |
disableAllButtons() |
Disable all buttons, making them all unclickable. Essentially the same as disable()
|
enableAllButtons() |
Enable all buttons, making them all clickable unless you have called disable() . In that case, you'd need to call enable()
|
We had an odd requirement at work that involves skipping a button in the middle of the set. Our app had a four-button control but our next version was to replace that with a three-button control. Anyone who loaded old data needed to have the four possible selections mapped to the three buttons. The kicker was that we were dropping one of the values in the middle. Like this:
Thus, skipindex was born. You pass in the new opts.skipindex
value and the segmented control pretends that index doesn't exist. Let's say this is our tabbed bar:
$.tbar.init(['One', 'Two', 'Four'], callback, {
skipindex: 2 // 0-based numbering!
});
// when the button labeled One is tapped
$.tbar.getIndex(); // -> 0
// when "Two" is tapped
$.tbar.getIndex(); // -> 1
// when "Four" is tapped
$.tbar.getIndex(); // -> 3, because we skipped 2!
// Likewise
$.tbar.setIndex(3); // would highlight the third button, the
// one labeled Four
undefined
and fix for width calculations to resolve "missing" buttons on some devices with percent-based widths for the control (this might result in a 1px uncolored edge of the right-most button in your set on some devices, sorry)Contributions are welcome!
#License / Copyright
© 2016 Tim Poulsen
MIT licensed