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

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

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 3

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 4

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 5

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 6

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.