Titanium TableView Expand Zoom TableView HeaderView
//app.js
'use strict';var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
//Generate some sample rows
var rows = [];
for (var i = 0; i < 60; i++) {
rows.push({
title : 'Row #'+ i
});
}
//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 : "sample.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();
You can also check the blog of this post.
Ben Bahrenburg created an snippet that lets you create a TableView Header Zoom like the Foursquare and Tapbots.
Download Sample Here...
