UITableView Background Image

Question

Hi,

I am trying to set up a table view with a background that scrolls. The background is a repeating cloud image.

As a preliminary attempt to implement this, I have used the following code:

- (void)viewDidLoad {
    aTableView.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: @"cloud.jpg"]];
    aTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
}

However, this does not quite work as I had hoped. The image is placed as the background to every cell (which is fine) but also as the background to the table view, so that when the user scrolls past the bounds of the screen and the bounce is used, the same cloud background is shown. This gives an undesired overlapping effect.

What I would like is for every cell to have this repeating image (so that it scrolls with the table), but for the background to the table view to be a plain black colour. Is this possible?

I know that I can add an image to the custom cell and send it to the back, but this seems like too much of a memory hogging workaround.

Cheers

---

I have managed to sort this using the following code:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
        [cell setBackgroundColor:[UIColor colorWithPatternImage: [UIImage imageNamed: @"cloud.jpg"]]];
}

Is this the best way to set a UIColor as a UIImage or is this resource intensive?

Answer 1

You are setting the UITableView's background. Not the UITableViewCell's background.

Answer 2

This may help in setting the UITableView's background color: Changing Background Color and Section Header Text Color in a Grouped-style UITableView

Answer 3

I've had exactly the same problem, except half way through implementation we decided to scrap the design and went for custom tableview cells instead. Our original design was meant to look like a notepad, with cells on each line.

Subclassing a UITableViewCell might seem like a difficult task but its worth it if you will need to customise the cell in the future and seems like it will do what you are requesting. I can post the code for you from my project if you are interested, However, be aware that you will not have the background on the UITableView itself, only on the cells.

EDIT: Posting the code related to creation of custom UITableViewCell: My cell is called HotOffersCell, This is HotOffersCell.h

#import <UIKit/UIKit.h>
@interface HotOffersCell : UITableViewCell {
    IBOutlet UILabel *mainLabel;
    IBOutlet UILabel *subLabel;
    IBOutlet UILabel *price;
    IBOutlet UIImageView *imageView;
}
@property (nonatomic, retain) UILabel *mainLabel;
@property (nonatomic, retain) UILabel *subLabel;
@property (nonatomic, retain) UILabel *price;
@property (nonatomic, retain) UIImageView *imageView;

@end

HotOffersCell.m is very plain, just sysnthesize for all the properties, nothing else Then in the TableView method of your table view controller:

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"HotOffersCell";

    HotOffersCell *cell = (HotOffersCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"HotOffersCell" owner:nil options:nil];
        for (id currentObject in topLevelObjects) {
            if ([currentObject isKindOfClass:[UITableViewCell class]]) {
                cell = (HotOffersCell *) currentObject;
                break;
            }
        }
    }
    NewsItem *newsItem = [newsList objectAtIndex:indexPath.row];

    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateFormat:@"d MMM YY"];
    NSString *date = [formatter stringFromDate:newsItem.departure_date];
    if (indexPath.row % 2 == 0) {
        cell.contentView.backgroundColor = [UIColor colorWithWhite:230.0/255 alpha:1]; // Match Colour
    } else {
        cell.contentView.backgroundColor = [UIColor colorWithWhite:242.0/255 alpha:1]; // Match Colour
    }

    cell.mainLabel.text = newsItem.destination;
    cell.subLabel.text = [[NSString alloc] initWithFormat:@"%@ - %@ nights", date, newsItem.nights];
    if ([self.navigationController.title isEqualToString:@"Top 20"]) {
        cell.price.text = newsItem.price_inside;
    } else {
        cell.price.text = newsItem.price_balcony;
    }
    cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.png", newsItem.cruise_line]];

    [formatter release];        
    return cell;
}

I also have a HotOffersCell.xib, This file contains a UITableViewCell and no view, i've linked all the relevant labels around and nothing more, It provides a nice graphical way to edit the placements on the label without changes in code, I even let my brother modify this one =)

I hope this helps