Page indicator (circles, lines, squares...) for scrollableViews for Appcelerator Titanium (Android)

page.indicator.js

/*
* Simple page indicator for scrollableViews for Appcelerator Titanium (Android).
* To be added after the views have been set.
*
* var p = require('page.indicator');
* var options = { color: 'red' };
* var indicator = p.pageIndicator(myScrollableView, options);
*/


function pageIndicator(scrollableView, custom_options) {
	var options = {
		containerBottom : '50dp', // replace with containerTop if needed
		autoAddContainer : 'true', // add it directly to the scrollableView
		useIfOnePage : false,
		hideAfter : 1500,
	
		// TODO different colors instead of different opacities
		color : 'black',
		opacityHidden : 0.5,
		opacityActive : 1,
	
		// play with these to make circles, squares, lines ...
		height : '10dp',
		width : '10dp',
		borderRadius : '5dp',
	
		marginLeft : '3dp',
		marginRight : '3dp'
	};

	// don't do anything if there are no pages
	if (!scrollableView && scrollableView.getViews().length == 0) {
		return null;
	}

	// merge default options and custom options
	for (var attr in custom_options) {
		options[attr] = custom_options[attr];
	}

	// decide what to do if there's only one page
	if (scrollableView.getViews().length == 1 && !options.useIfOnePage) {
		return null;
	}

	// main holder view
	var container = Ti.UI.createView({
		width : Ti.UI.SIZE,
		height : options.height,
		layout : 'horizontal'
	});
	if (options.containerTop) {
		container.top = options.containerTop;
	} else {
		container.bottom = options.containerBottom;
	}

	// loop through views and create their page indicator
	var pageIndexes = [];
	for (var i = 0; i < scrollableView.getViews().length; i++) {
		pageIndexes[i] = Ti.UI.createView({
			width : options.width,
			height : options.height,
			borderRadius : options.borderRadius,
			opacity : options.opacityHidden,
			left : options.marginLeft,
			right : options.marginRight,
			backgroundColor : options.color
		});

		container.add(pageIndexes[i]);
	}

	// set current page
	var currentPage = scrollableView.getCurrentPage();
	pageIndexes[currentPage].setOpacity(options.opacityActive);

	// update on page change
	scrollableView.addEventListener('scroll', function(e) {
		// change opacity to old and new active indexes
		if (currentPage != e.currentPage// avoid doing the same operation dozens of times
		&& pageIndexes[e.currentPage]) {// this is sometimes undefined
			pageIndexes[currentPage].setOpacity(options.opacityHidden);
			pageIndexes[e.currentPage].setOpacity(options.opacityActive);
			currentPage = e.currentPage;
		}

		// show container as soon as the user tries to scroll
		if (!container.getVisible()) {
			container.show();
		}
		
		// clear existing timeout if user is still scrolling
		if (timeOut) {
			clearTimeout(timeOut);
		}

	});

	var timeOut = null;
	// hide container at scrollend
	if (options.hideAfter) {
		scrollableView.addEventListener('scrollend', function(e) {
			timeOut = setTimeout(function() {
				container.hide();
			}, options.hideAfter);
		});
		scrollableView.fireEvent('scrollend');
	}

	if (options.autoAddContainer) {
		scrollableView.add(container);
	}

	return container;

}

exports.pageIndicator = pageIndicator;

screenshots.png