ScrollableView customization.

app.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
  
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
  
  
//
// create base UI tab and root window
//
var win = Titanium.UI.createWindow({  
    title:'SCROLLVIEW',
    backgroundColor:Ti.UI.iOS.COLOR_SCROLLVIEW_BACKGROUND
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'SCROLLVIEW',
    window:win
});
  
function getOrientation(o)
{  //Came from orientation.js, but we didn't need the buttons and such
	switch (o)
	{
		case Titanium.UI.PORTRAIT:
			return 'portrait';
		case Titanium.UI.UPSIDE_PORTRAIT:
			return 'upside portrait';
		case Titanium.UI.LANDSCAPE_LEFT:
			return 'landscape left';
		case Titanium.UI.LANDSCAPE_RIGHT:
			return 'landscape right';
		case Titanium.UI.FACE_UP:
			return 'face up';
		case Titanium.UI.FACE_DOWN:
			return 'face down';
		case Titanium.UI.UNKNOWN:
			return 'unknown';
	}
}



// initialize to all modes
win.orientationModes = [
	Titanium.UI.PORTRAIT,
	Titanium.UI.LANDSCAPE_LEFT,
	Titanium.UI.LANDSCAPE_RIGHT
];


//
// orientation change listener
//
Ti.Gesture.addEventListener('orientationchange',function(e)
{

	// get orienation from event object
	var orientation = getOrientation(e.orientation);
});

var view1 = Ti.UI.createView({
	backgroundColor:'red'
});
var l1 = Ti.UI.createLabel({
	text:'View 1',
	color:'#fff',
	width:'auto',
	height:'auto'
});
view1.add(l1);

var view2 = Ti.UI.createView({
	backgroundColor:'blue'
});
var l2 = Ti.UI.createLabel({
	text:'Click Me (View 2 - see log)',
	color:'#fff',
	width:'auto',
	height:'auto'
});
view2.add(l2);

var view3 = Ti.UI.createView({
	backgroundColor:'green'
});
var l3 = Ti.UI.createLabel({
	text:'View 3',
	color:'#fff',
	width:'auto',
	height:'auto'
});
view3.add(l3);

var view4 = Ti.UI.createView({
	backgroundColor:'black'
});
var l4 = Ti.UI.createLabel({
	text:'View 4',
	color:'#fff',
	width:'auto',
	height:'auto'
});
view4.add(l4);


var scrollView = Titanium.UI.createScrollableView({
	views:[view1,view2,view3,view4],
	showPagingControl:true,
	pagingControlHeight:30,
	maxZoomScale:2.0,
	currentPage:1,
	backgroundColor:'grey',
	
});

win.add(scrollView);

var i=1;
var activeView = view1;

scrollView.addEventListener('scroll', function(e)
{
	activeView = e.view;  // the object handle to the view that is about to become visible
	i = e.currentPage;
	Titanium.API.info("scroll called - current index " + i + ' active view ' + activeView);
});
scrollView.addEventListener('click', function(e)
{
	Ti.API.info('ScrollView received click event, source = ' + e.source);
});
scrollView.addEventListener('touchend', function(e)
{
	Ti.API.info('ScrollView received touchend event, source = ' + e.source);
});

// add button to dynamically add a view
var alpha = Titanium.UI.createButton({
	title:'1.0',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
alpha.addEventListener('click',function()
{
	scrollView.pagingControlAlpha = 1.0;
});
var alphaoff = Titanium.UI.createButton({
	title:'0.0',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
alphaoff.addEventListener('click',function()
{
	scrollView.pagingControlAlpha = 0.0;
});
var alphahalfoff = Titanium.UI.createButton({
	title:'0.5',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
alphahalfoff.addEventListener('click',function()
{
	scrollView.pagingControlAlpha = 0.5;
});
// jump button to dynamically change go directly to a page (non-animated)
var jump = Titanium.UI.createButton({
	title:'Jump',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
jump.addEventListener('click',function()
{
	i = (scrollView.currentPage + 1) % scrollView.views.length;
	scrollView.currentPage = i;
});

// change button to dynamically change a view
var top = Titanium.UI.createButton({
	title:'top',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
top.addEventListener('click',function()
{
	scrollView.pagingControlOnTop = true;
});
var bottom = Titanium.UI.createButton({
	title:'bottom',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
bottom.addEventListener('click',function()
{
	scrollView.pagingControlOnTop = false;
});
var overlaytrue = Titanium.UI.createButton({
	title:'OvrT',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
overlaytrue.addEventListener('click',function()
{
	scrollView.overlayEnabled = true;
});
var overlayfalse = Titanium.UI.createButton({
	title:'OvrF',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
overlayfalse.addEventListener('click',function()
{
	scrollView.overlayEnabled = false;
});
// move scroll view left
var left = Titanium.UI.createButton({
	image:'../images/icon_arrow_left.png'
});
left.addEventListener('click', function(e)
{
	if (i === 0){ return; }
	i--;
	scrollView.scrollToView(i);
});

// move scroll view right
var right = Titanium.UI.createButton({
	image:'../images/icon_arrow_right.png'
});
right.addEventListener('click', function(e)
{
	if (i === (scrollView.views.length-1)){ return; }
	i++;
	scrollView.scrollToView(scrollView.views[i]);
});
var checkValuesOnConsole = Titanium.UI.createButton({
	title:'check',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
checkValuesOnConsole.addEventListener('click',function()
{
	Ti.API.info("pagingControlAlpha : "+scrollView.pagingControlAlpha);
	Ti.API.info("pagingControlOnTop : "+scrollView.pagingControlOnTop);
	Ti.API.info("overlayEnabled : "+scrollView.overlayEnabled);
	//Ti.API.info("pagingControlHeight"+scrollView.pagingControlHeight);
	//Ti.API.info("showPagingControl"+scrollView.showPagingControl);
});

if (Titanium.Platform.osname == 'iphone' || Titanium.Platform.osname == 'ipad')
{
	// set toolbar
	win.setToolbar([alpha,alphahalfoff,alphaoff,overlaytrue,overlayfalse,checkValuesOnConsole]);
}
win.setRightNavButton(top);
win.setLeftNavButton(bottom);

//
tabGroup.addTab(tab1);  

  
 
  
// open tab group
tabGroup.open();