Skip to content

Instantly share code, notes, and snippets.

@benbahrenburg
Last active March 15, 2017 14:48
Show Gist options
  • Save benbahrenburg/6653458 to your computer and use it in GitHub Desktop.
Save benbahrenburg/6653458 to your computer and use it in GitHub Desktop.
Titanium TableView Expand Zoom TableView HeaderView
'use strict';
var win = Ti.UI.createWindow({
backgroundColor: 'white',
});
//Generate some sample rows
var rows = [];
for (var iLoop=0;iLoop<100;iLoop++){
rows.push({ title: 'demo row #'+iLoop});
}
//Create our TableView, nothing special
var tableView = Ti.UI.createTableView({
width:Ti.UI.FILL, height:Ti.UI.FILL,
data:rows
});
//Create a ImageView for the TableView HeaderView
var imgView = Ti.UI.createImageView({
width:Ti.UI.FILL, height:150,
image:"cat.png"
});
//Set our ImageView as the headerView
tableView.headerView = imgView;
win.add(tableView);
//Need to capture a few session variables
//The most important one is to grab the origional height of the TableView HeaderView
var _scollTimer = null,
_origionHeight = tableView.headerView.height;
//Most of what we need happens in the scroll event
tableView.addEventListener('scroll',function(e){
//Clear our timer each time
if(_scollTimer!==null){
clearInterval(_scollTimer);
}
//If the user has scrolled past the header, reset the origional height
if(e.contentOffset.y>_origionHeight){
if(tableView.headerView.height !== _origionHeight){
tableView.headerView.height = _origionHeight;
}
}else{
//Calculate our zoom or expand height
var zoomOffSet = ((e.contentOffset.y<0)?-1:1);
var zoomHeight = (tableView.headerView.height +
((zoomOffSet*-1)*((zoomOffSet*e.contentOffset.y)/3)));
zoomHeight= ((zoomHeight > _origionHeight) ? zoomHeight : _origionHeight);
if(tableView.headerView.height !==zoomHeight){
tableView.headerView.height =zoomHeight;
}
}
//Timer is needed since scrollend doesn't always fire
//so just in case we set a timer to set the origional height
if(e.contentOffset.y===0){
_scollTimer = setTimeout(function()
{
tableView.headerView.height = _origionHeight;
},250);
}
});
//If the user end scrolls something other then the HeaderView check if we need to reset
tableView.addEventListener('scrollend',function(e){
if(_scollTimer!=null){
clearInterval(_scollTimer);
}
if(tableView.headerView.height !== _origionHeight){
tableView.headerView.height = _origionHeight;
}
});
win.open();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment