How can I set the background of UITableView (the tableview style is "Grouped") to use an image?

Question

How can I set the background of UITableView (the tableview style is "Grouped") to use an image?

Answer 1

In newer versions of the SDK, you'll need to set tableView.backgroundView if you want it to be transparent, try something like this:

tableView.backgroundColor = [UIColor clearColor];
tableView.opaque = NO;
tableView.backgroundView = nil;

Answer 2

We need to do something about that plain background. We're going to use a PNG image and display it behind the UITableView.

1. Prepare a PNG image. It should be either 320x460 (if you have the status bar visible in your app) or 320x480 (if you hide it).
2. Drag it into XCode into the Resources folder and add to your project
3. Load the NIB file containing your UITableView into Interface Builder
4. Open the library (Tools> Library), switch to the Media tab, and drag the image to the View, create a new UIImageView.
5. Use the inspector to move and resize the image so it's at X=0, Y=0, Width=320, Height=480
6. Put the UIImageView behind the UITableView (Layout > Send to Back)
7. Save, Build and Go!

Disappointingly, you won't be able to see your background. The UITableView's background is blocking us from seeing the UIImageView. There are three changes you need to make:

1. In the Attributes Inspector, make sure the UITableView's "opaque" checkbox is unchecked!

2. Set the UITableView's background color to transparent:

   tableView.backgroundColor = [UIColor clearColor];

I hope this helps and solves your problem. It has worked for me and I have yet to find a more elegant way to display a background image for a UITableView.

The advantage of my solution, in comparison with setting a background image directly on the UITableView, is that you can indent the table's content. I often wanted to do this to just show two or three table cells at the bottom of the screen.

Answer 3

[tableView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"whatever.png"]]];

Answer 4

tableView.backgroundView = nil; is enough. No need to set background color as Clear Color.

Answer 5

In UI Builder the Background color has an "Other" choice. This brings up a color picker. The color picker has an opacity setting. If you set the Opacity of the COLOR to 0 it works, can't speak to performance.

Answer 6

One way would be to make the table view transparent (set the view's background to 0% opacity) and place a UIImageView behind the UITableView. Remember that transparent tables and table cells will not perform as well as opaque ones.

Answer 7

What I've found is that you have to use a "plain" styled table with a transparent background and then recreate the look of the rounded-corner cells by setting each cell's backgroundView to a UIImageView with a image that simulates the rounded look. This means that the top, bottom, and middle cells need different background images.

However, this does not address what happens when the user taps the cell and it goes "highlighted" - it will look squared off then. You can get around this by setting the highlighted image for your faked tablecell background image. You will also want to create your own disclosure accessory view (ImageView) with a white highlighted version. Then you can create a cell like this one I'm using (below). After I alloc one of these cells I then set the backgroundView and accessoryView to my UIImageViews.

#import "ClearBackRoundedTableCell.h"


@implementation ClearBackRoundedTableCell

- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier 
{
    if (self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier]) {
    }
    return self;
}


-  (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
    if( [[self.accessoryView class] isSubclassOfClass:[UIImageView class]] )
        ((UIImageView *)self.accessoryView).highlighted = highlighted;

    if( [[self.backgroundView class] isSubclassOfClass:[UIImageView class]] )
        ((UIImageView *)self.backgroundView).highlighted = highlighted;

    self.textLabel.highlighted = highlighted;
}

@end

One note if you go this route: the cells in a grouped table are typically 300 px wide (in portrait mode) but your plain table here would need to be 302 wide to allow for the grey line on each side of the table, which is normally outside of the "content" of the table cell.

Answer 8

After spending a while with color picker, I found out that you need to specify opaque background not for the table view cell xib, but for the Table View where the cells will be located, which is another xib. From what I have seen, table view cell background attributes have no visual effect.

Answer 9

try this one

UIView *backView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
backView.backgroundColor = [UIColor clearColor];
cell.backgroundView = backView;

It worked for me in grouped tableview.

Answer 10

Make UITableview background as clear color.

Answer 11

Programmatically you can do it like this if your image is added into your resources:

self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.opaque = NO;
UIImage *backroundImage = [UIImage imageNamed:@"my_backround"];
UIImageView *backroundImageView = [[UIImageView alloc] initWithImage:backroundImage];

Else you can do it in Interface Builder with this style :

You may need to configure the header files interface from UITableViewController to UIViewController and add <UITableViewDataSource,UITableViewDelegate> ,also don't forget to set the attributes of the tableview to not be opaque and reconnect the tableviews datasource and delegate outlets to the viewcontroller.