Skip to content

Instantly share code, notes, and snippets.

@pec1985
Created October 4, 2011 21:45
Show Gist options
  • Save pec1985/1262921 to your computer and use it in GitHub Desktop.
Save pec1985/1262921 to your computer and use it in GitHub Desktop.
SuperScrollableView
var win = Ti.UI.createWindow({
rightNavButton: rightButton = Ti.UI.createButton({title:'next'}),
leftNavButton: leftButton = Ti.UI.createButton({title:'prev'})
});
var SuperScrollableView = function(a){
a = a || {};
var view = Ti.UI.createView({
layout:'horizontal',
top:0,
bottom:0,
left:0,
width:a.views[0].width*a.views.length,
views:a.views
});
for(var i = 0; i < a.views.length; i++){
a.views[i].left = 0;
view.add(a.views[i]);
}
view.scrollToView = function(i,args){
args = args || {};
if(args.animated == true){
view.animate({left:-(a.views[i].width*i)});
} else {
view.left = -(a.views[i].width*i);
}
view.currentPage = i;
// a.views[i].fireEvent('focus');
};
view.currentPage = 0;
return view;
};
// usage:
var width = win.size.width;
var height = win.size.height - 44; // minus nav bar
var myView = SuperScrollableView({
views:[
Ti.UI.createView({
width:width,
height:height,
backgroundColor:'red'
}),
Ti.UI.createView({
width:width,
height:height,
backgroundColor:'green'
}),
Ti.UI.createView({
width:width,
height:height,
backgroundColor:'blue'
}),
Ti.UI.createView({
width:width,
height:height,
backgroundColor:'yellow'
})
]
});
win.add(myView);
var x = 0;
leftButton.addEventListener('click', function(){
--x;
if(x < 0){ x = 0;}
myView.scrollToView(x,{animated:true});
});
rightButton.addEventListener('click', function(){
++x;
if(x > myView.views.length-1){ x = myView.views.length;}
myView.scrollToView(x,{animated:true});
});
win.open({modal:true});
@pec1985
Copy link
Author

pec1985 commented May 17, 2012

Just a comment, this code has been tested in Titanium 1.8. The "view.size.width" and "view.size.height" might not work in Titanium 2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment