SEGMENTED CONTROL

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.

3-Types of segmented control:

• borderSegment
  

• flatSegment
  

• scrollingFlatSegments - Flat segment for more than 4 segments

Installation and usage

Recommended

$ gittio install BhushanP.SEGMENTED_CONTROL

###Manual method

Complete code base and demonstrating the usage of the widget.

• Download this repo (git clone / download zip)
• Copy the widgetsto your project's widgets folder
• Update your app/config.json to add:

"dependencies": {
    "BhushanP.SEGMENTED_CONTROL": "1.0"
}

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

Styling options

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.

Limitations

• 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!

License

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.