This is a widget for the Alloy MVC framework of Appcelerator's Titanium platform.
segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width.
$ gittio install BhushanP.SEGMENTED_CONTROL
###Manual method
- Download this repo (git clone / download zip)
- Copy the widgets to your project's widgets folder
- Update your app/config.json to add:
"dependencies": {
"BhushanP.SEGMENTED_CONTROL": "1.0"
}
Example Complete code base and demonstrating the usage of the widget.
In your XML file, add the widget:
<View id="segmentedView" width="70%" top="10dp" height="35dp" backgroundColor="white">
<Widget id="topsegmentedControl" src="BhushanP.SEGMENTED_CONTROL" />
</View>
<ScrollableView id="topScrollableView" onScrollend="scrollEnd" top="10dp" height="100%">
<!-- Add Content views as per your segments. Add onScrollend event if you want to change the state of a segment on scroll change. Please take care content of ScrollableView will match with array passed to initSegmentedControl function as 1st argument -->
</ScrollableView>
Initialize it in the controller:
init();
function init() {
Ti.API.log("[segmentControl]>>>[init]");
$.topsegmentedControl.initSegmentedControl(["segment 1", "segment 2","segment 3"], optionTopViewSingleTab, {
"borderColor" : "#0080B0",
"bgColor" : "transparent",
"selectedBgColor" : "#0080B0",
"labelColor" : "#0080B0",
"selectedLabelColor" : "#FFFFFF",
"removeAllFlag" : true,
"widgetType":"borderSegment"
});
optionTopTabArray = $.topsegmentedControl.getSegmentsArray();
}
function optionTopViewSingleTab(e) {
Ti.API.log("[segmentControl]>>>[optionTopViewSingleTab]");
Ti.API.log("optionTopViewSingleTab");
SegmentscrollEnabled = true;
$.topScrollableView.scrollToView(optionTopTabArray.indexOf(this));
$.topsegmentedControl.selectTabFromController(this);
}//End of optionViewSingleTab
/**
* Event Handler: for Scrollable region.
*/
var scrollsegments = true;
function scrollEnd(e) {
Ti.API.log("[segmentControl]>>>[scrollEnd]");
var scrollEnabled = SegmentscrollEnabled ? false : true;
$.topsegmentedControl.selectTabFromController(optionTopTabArray[e.currentPage], scrollEnabled);
setTimeout(function() {
SegmentscrollEnabled = false;
}, 1E1);
}//End of scrollEnde
You can set these style options in the js
Property | Description | style | Default |
---|---|---|---|
selectedBgColor |
slected background color of the segment selected segment |
#0080B0 |
'#006BA3' |
borderColor |
border color of segment border of segment |
0080B0 |
#FFFFFF |
bgColor |
background color of the segment segment backgroundColor |
transparent |
transparent |
selectedLabelColor |
color of text on segment Selected sgements label color |
#FFFFFF |
white |
widgetType |
type of segment controll borderSegment, flatSegment, scrollingFlatSegments |
borderSegment, flatSegment, scrollingFlatSegments |
none |
horizontalLineColor |
horizontal line color of segment applicable for flatSegment, scrollingFlatSegments |
#0080B0 |
none |
tabWidth |
tab width of segment applicable for flatSegment, scrollingFlatSegments |
100 |
Fixed width |
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.
- Array passed to initSegmentedControl function and child content of ScrollableView view must be same. This Array decides the segments in the widget and ScrollableView's 1st level children are referenced by segments.
Contributions are welcome!
Copyright 2017 Bhushankumar Pawar Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.