Tuesday 1 October 2013

 

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...

No comments:

Post a Comment