How can I modify the appearance of 'empty' cells in plain UITableView?

Question

If you have a plain (not grouped) UITableView with a single row, the rest of the screen is filled with blank or empty cells. How do you change the appearance of these blank cells? Af first, I thought they would have the appearance of the cell used in the table view but it seems they don't.

The people from Cultured Code (Things) have done a nice job modifying these cells but I can't immediately think of a way to change their appearance.

Any tips?

Answer 1

Although it's not quite what you're looking for, you can also change it to just display a blank region (instead of blank cells) by setting a footer view on the table. A UIView of height 0 will do the trick.

Answer 2

Based on samvermette's answer, but modified to use a background image directly rather than compositing an image from a UITableViewCell subclass. Sam's answer is good, but it will be less performant than just creating a background image directly.

Create a UIView subclass -- in this example I called it CustomTiledView -- and add the following code to the class:

- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed:@"tableview_empty_cell_image"];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextScaleCTM (context, 1, -1); 
CGContextDrawTiledImage(context, 
                        CGRectMake(0, 0, rect.size.width, image.size.height), 
                        [image CGImage]); 
}

Add the following code to your tableviewcontroller:

- (CGFloat)tableView:(UITableView *)tableView 
           heightForFooterInSection:(NSInteger)section {
    // this can be any size, but it should be 1) multiple of the 
    // background image height so the last empty cell drawn
    // is not cut off, 2) tall enough that footer cells
    // cover the entire tableview height when the tableview
    // is empty, 3) tall enough that pulling up on an empty
    // tableview does not reveal the background.
        return BACKGROUND_IMAGE_HEIGHT * 9; // create 9 empty cells
}

- (UIView *)tableView:(UITableView *)tableView 
            viewForFooterInSection:(NSInteger)section {
    CustomTiledView *footerView = [[CustomTiledView alloc] init];
    return [footerView autorelease];
}

Finally, you'll need to set the bottom content inset of your tableview to the negative of the value returned from -tableView:heightForFooterInsection: In this example it would be -1*BACKGROUND_IMAGE_HEIGHT*9. You can set the bottom content inset either from the Size Inspector of Interface Builder or by setting the self.tableView.contentInset property from the tableviewcontroller.

Cheers!

Answer 3

I set a ~300px-high UIView subclass to my tableView header and footer views, adjusting the tableView insets so they compensate for these views (set the top and bottom insets to -300px).

My UIView subclass implements the drawRect method, in which I use CGContextDrawTiledImage() to draw an empty UITableViewCell repetitively:

- (void)drawRect:(CGRect)rect {

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(300, 46),NO,0.0);
    emptyCell = [[SWTableViewCell alloc] initWithFrame:CGRectZero];
    [emptyCell drawRect:CGRectMake(0, 0, 300, 46)];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    [emptyCell release];
    UIGraphicsEndImageContext();

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextScaleCTM (context, 1, -1); // this prevents the image from getting drawn upside-down
    CGContextDrawTiledImage(context, CGRectMake(0, 0, 300, 46), [newImage CGImage]);
}

In my case my tableviewcells are 46px high, so if I want make UIView subclass to contain 8 of these empty cells, I need to make it 368px high.

Answer 4

From http://jomnius.blogspot.com/2011/03/hide-uitableview-empty-cell-separator.html Easy way is to define that table has no cell separator lines:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

Hard way, if you need separator lines, is to define that table has no separator lines and create cell separator lines as part of custom UITableViewCell. Bottom part of cell, obviously, and most likely using really thin graphics image. Remember to define image autosizing and mode properly.

Another way is to define an empty UITableView's tableFooterView:

UIView *footer =
    [[UIView alloc] initWithFrame:CGRectZero];
self.myTable.tableFooterView = footer;
[footer release];

Answer 5

If you simply want to change the height of the "empty cells" when there are no cells at all in your TableView: you need to set the rowHeight property of your UITableView (the implementation of tableView:heightForRowAtIndexPath: has no effect on empty TableViews). If there are cells in your TableView and you have implemented tableView:heightForRowAtIndexPath: then the last row height will be used for empty cells.

Answer 6

You will probably have to make a custom subclass of UITableView that fills the background with the appearance of blank cells.

- (void)drawRect:(CGRect)rect {
  [super drawRect: rect];

  // draw your background here if the rect intersects with the background area
}

Answer 7

I believe the approach of using the UITableView tableView:viewForFooterInSection: method will not work for the case where the table is empty, ie., with no cells. In that case, you can use the technique Answerbot proposed can be repurposed to stuff the created UIView into the table's footer view explicitly, like the following:

    CGRect cellRect = CGRectMake(0, 0, table.bounds.size.width, table.bounds.size.height);
    CustomTiledView *footerView = [[[CustomTiledView alloc] initWithFrame:cellRect] autorelease];
    table.tableFooterView = footerView;

Answer 8

For swift 4.0 :

self.tableView.tableFooterView = UIView(frame: CGRect.zero)