How to add a footer view for UITableView in IB when working with storyboards?

advertisements

Playing around with prototype cells and I need to add footer view at the bottom of table view, so a user could see this footer view when he would scroll to the bottom of the table view. So, created demo project with one screen, table view and two prototype cells. Looking for a way how to drag and drop some view below the table using Interface Builder. The problem is it looks like view is put outside table view content, so I see the footer but I can't scroll to it (only a small part of footer view is seen at the bottom of the table view).

I know this should work because already saw a working implementation but cannot figure out what magic setting or code line I need to add.

Here are the methods:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

  return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section {

  return 2;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath  *)indexPath {

  CGFloat rowHeight = 10;

  switch (indexPath.row) {

    case 0: {

        rowHeight = 376;

        break;
    }
    case 1: {

        rowHeight = 105;

        break;
    }
  } 

  return rowHeight;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

  switch (indexPath.row) {

    case 0: {

        Cell1 *cell1 = [tableView dequeueReusableCellWithIdentifier:@"Cell1" forIndexPath:indexPath];
        return cell1;

        break;
    }
    case 1: {

        Cell2 *cell2 = [tableView dequeueReusableCellWithIdentifier:@"Cell2" forIndexPath:indexPath];
        return cell2;

        break;
    }
  }

  return nil;
}

Just making 2 row table with two different height cells. Cell1 and Cell2 classes are empty subclasses of UITableViewCell.

Here's how table view and cells look in interface builder:

Here's initial view after launch:

Here's what I see if I scroll to the bottom:

The footer is there, but outside table view (scroll content). As you can see, table view by default reserves some 44px space at the bottom for footer. But if I set footer height in tableView:heightForFooterInSection: then blank spaces appear.

Also, tried to drag and move this view up to view hierarchy in IB, so the view would become a header view. In that case, the view is shown at the top as header view, but then the second cell is shown only partially when scrolling to the bottom. It looks like table calculates how much space it needs to show prototype dynamic cells (have set "Dynamic Prototypes" for the table view). And if you add extra footer or header view to the interface builder then there's less space for the cells (if view is added as header) or the footer is not shown.

UPDATE. If I add this method then blank spaces appear:

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {

  return 50;
}

Here's what I get in that case (blank spaces below cell2):

UPDATE2 Footer is shown correctly if I disable autolayout.


I think you have missed the following line

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{

    return HEIGHT_OF_YOUR_FOOTER_VIEW;

}

Edit

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{

    UIView *footer=[[UIView alloc] initWithFrame:CGRectMake(0,0,320.0,50.0)];
    footer.layer.backgroundColor = [UIColor orangeColor].CGColor;

    return footer;
}

Updated

Check this documentation