Skip to content

An Alloy widget Segmented Control for Titanium / Appcelerator (Cross-platform )

Notifications You must be signed in to change notification settings

Bhushankumar-pawar/SEGMENTED_CONTROL_Example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

SEGMENTED CONTROL Appcelerator Titanium Appcelerator Alloy

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
    borderSegment


  • flatSegment
    flatSegment


  • scrollingFlatSegments - Flat segment for more than 4 segments scrollingFlatSegments

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.

About

An Alloy widget Segmented Control for Titanium / Appcelerator (Cross-platform )

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published