UITableView implementation "how to" (like in twitter app for iphone) - iphone

Question

I was about to implement a table view behavior like the one used in a certain part of the twitter app for iPhone, precisely I'm talking about the tableview shown when, in a geolocalized tweet, I tap on the location displayed under the tweet. . .here's some pictures just to give it a look:
as you can see the table view has a background beneath (actually the map), but it is not just a background UIView (or Mapview) because the table view pulls it up and down with herself if the scrolling is about to "bounce". . .and it is certainly not a section header/footer, because the table floats on it. . .so, do you have any ideas on how to implement that table view? Could it be a webview?
edit: I found a solution and posted it down

Answer 1

just add the tableview and the mapview to a scrollview and you should be all set.
//CREATE THE SCROLL VIEW
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 300)];
scrollView.delegate = self;
scrollView.backgroundColor = [UIColor grayColor];
scrollView.contentSize = CGSizeMake(320, 650);
//ADDING TABLE VIEW
CGRect cgRct = CGRectMake(0, 0, 320, 600);
tblSimpleTable = [[UITableView alloc] initWithFrame:cgRct style:UITableViewStyleGrouped];
tblSimpleTable.delegate = self;
tblSimpleTable.dataSource = self;
[scrollView addSubview:tblSimpleTable];
//ADDING MAP VIEW
myMap = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
myMap.delegate = self;
[scrollView addSubview:myMap];
self.view = scrollView;

Answer 2

Maybe you can use UIView animations.
You add a mapview at the same height as your table view but with its alpha set to 0 in interface builder.
After that you can do as follow in your IBAction method:
[UIView beginAnimations:#"displayMapView" context:nil];
[UIView setAnimationDuration:0.3];
mapview.alpha = 1;
CGRect tableviewFrame = tableview.frame;
tableview.origin.y += 200; // Height of your map view
tableview.frame = tableviewFrame;
[UIView commitAnimations];
This should do it !
Or you can try somthing like this in your (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath:
IWebView* webView = [[UISynchedWebView alloc] initWithFrame:
CGRectMake(0, 0, cell.bounds.size.width, cell.bounds.size.height)];
webView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
webView.tag = 1001;
webView.userInteractionEnabled = NO;
webView.delegate = self;
[cell addSubview:webView];
And load a Google Maps request or maybe put directly your mapview in your cell, haven't tried that.

Answer 3

Take a look at three20 library.
http://three20.info
and download source code from github at https://github.com/facebook/three20
In this framework there is a class named TTTableViewController that implement TTTableViewDragRefreshDelegate.
More, there an example application TTTwitter that use this class!
You can start from that and subclass to implement all features you need!

Answer 4

Ok I just figured it out. . .it was easy as hell. . .and was all about playing with the tableview first row, that has to be hidden to show the underlaying image, and the scrollview delegate that has to drag down with the tableview the underlying image when the dragging direction is down. . .here is the xcode project for you to give it a try :)
http://cl.ly/9bje