0

How can I create a ViewController which has a fixed MapKit above a scrolling TableView?

I am coding this using Storyboards, and while I am an experienced developer this is my first time using iOS, XCode and Objective-C. I currently have a method which kind of works, but the method which I am currently using works by setting the MapKit as the section header of the table view inside a UITableViewController and does not look right. (It works since as I have only one section that MapKit section will always be fixed while I scroll the table view.)

The code that does this looks like this:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 200.0;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    MKMapView *mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 200)];
    return mapView;
}

Unfortunately doing this means that the scrolling bar appears alongside the Map as well as the table view. Instead, I wish the scrolling bars to only be as tall as the table view.

There are other answers around the site about doing stuff like this, but none of them mention the height of the scroll bars (and the elegance of the code.)

Any ideas?

Community
  • 1
  • 1
olive
  • 1,194
  • 1
  • 15
  • 34
  • What's wrong with just returning a custom cell with a map view in the index path you wish to display it? – Mick MacCallum Dec 26 '12 at 15:40
  • But surely then when I scroll the table view down the cell will scroll off the top of the screen? I wish the MapKit to always be visible, when I scroll through the table cells. And I want the scroll bar to only appear alongside the table cells, and not alongside the MapKit which is fixed and not scrolled. – olive Dec 26 '12 at 15:43
  • Then why don't you just add the map view to the main view and adjust the frame of the table to start where the map ends – Mick MacCallum Dec 26 '12 at 15:45
  • Can you show me what you mean? How do I adjust the frame of the table to start where the map ends? I tried to place the MapKit inside the TableViewController and a MapView above it, but when I scrolled down the MapView scrolled off the screen. The fix I then did stopped this, but the scroll bar was over the whole screen and not just the scrollable part of the screen. – olive Dec 26 '12 at 15:51

2 Answers2

0

The link you provided is exactly what you should do, but in the Xib file also include the MKMapView above the table view, and set the outlets properly for that as well(And implementing the proper delegate protocols). The scroll bar will only go as high as the table view because it's a subview of the actual table, and, generally, this is the accepted way of doing things on the UI unless you want to do absolutely everything programmatically.

Echihl
  • 346
  • 2
  • 9
  • 1
    What changes if I am using a storyboard file instead of an xib file? And can somebody give me some proper documentation on modern usage of outlets and delegate protocols? Do they have to be used for both the Map and the Table? (I do want to avoid doing things programmatically, mainly because I want to separate the visual from the logical.) – olive Dec 26 '12 at 15:59
  • Aside from the fact that Xibs are a more separated version of Storyboards, I haven't used Storyboards in a long enough time that I can give you an accurate depiction of the true differences. You can check here for more info http://stackoverflow.com/questions/13834999/storyboards-vs-the-old-xib-way As for implementing the delegate protocols and making the IBOutlets, Apple's documentation ("Working With Protocols" and "Communicating with Objects") is very thorough. – Echihl Dec 26 '12 at 16:05
0

In this case you can take a separate UIView and place it after Exit. Put your mapView inside that UIView and do the requiredenter image description here. Also draw an outlet for your tableView(myTableView) as well as the UIView(viewWithMapView). Now add this in your viewDidLoad() :-

 [_myTableView setTableHeaderView:_viewWithMapView];

This will add your mapView as tableView header instead of section view header.

Ishika
  • 2,187
  • 1
  • 17
  • 30