Last active
March 15, 2017 14:48
-
-
Save benbahrenburg/6653458 to your computer and use it in GitHub Desktop.
Titanium TableView Expand Zoom TableView HeaderView
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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