iPhone + UITableView + place an image for separator

Question

I have UITableView in my application.

Attributes: TableStyle = Plain, SeperatorStyle = single and SeperatorColor = black

What I want to do is that, I want to put a image (which a small strip), as separator for the table.

Please help me.

Regards, Pratik

Answer 1

Solution which worked for me.

self.tableView.separatorColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourImage"]];

Answer 2

So, usually with an iPhone table, you should just use one of the built in styles: http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UITableView_Class/Reference/Reference.html#//apple_ref/occ/instp/UITableView/separatorStyle

As an iPhone developer who has been down this road, I suggest you avoid images wherever possible, and use the API to build your app.

If you insist on your reckless course, or if you have a client demanding this or something, then what you can do is subclass UITableViewCell.

In your UITableViewCell subclass, you can add whatever UI elements you want to the contentView of the cell, including a separator image at the bottom of the cell.

So, here is an implementation of the delegate function that returns a table cell using a custom UITableViewCell:

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

  static NSString *CellIdentifier = @"Cell";

  // notice I use a SavedTableCell here instead of a UITavbleViewCell
  SavedTableCell *cell = (SavedTableCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

  if (cell == nil) {
    cell = [[[SavedTableCell alloc] initWithReuseIdentifier:CellIdentifier hasIcon:YES] autorelease];
  }

  // custom function to set the fields in the cell
  [cell setItem:[self.items objectAtIndex:indexPath.row]];  
  return cell;
}

And then here's my simplified implementation of SavedTableCell.h:

#import <UIKit/UIKit.h>
#import "Item.h"

@interface SavedTableCell : UITableViewCell {

  // my cell has one label and one image, but yours would have an image placed at the bottom of the cell's frame
  UILabel *primaryLabel;
  UIImageView *icon;
}

// i just made up the class Item... in my code they are actually Waypoints.
- (void) setItem:(Item*)item;


@property(nonatomic,retain) UILabel *primaryLabel;
@property(nonatomic,retain) UIImageView *icon;


@end

And here is a simplified SavedTableCell.m:

#import "SavedTableCell.h"

@implementation SavedTableCell

@synthesize primaryLabel, icon;


- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier {
  if (self = [super initWithStyle:UITableViewStylePlain reuseIdentifier:reuseIdentifier]) {
    icon = [[UIImageView alloc] initWithFrame:CGRectMake(5,5,40,40)];
    [self.contentView addSubview:icon];
    primaryLabel = [[UILabel alloc]init];
primaryLabel.font = TITLE_FONT;     
    [self.contentView addSubview:primaryLabel]; 
  } 
  return self;
}


- (void) setItem:(Item*)item {
  self.primaryLabel.text = [item name];
  [self.icon setImage:[item imageName]];
}

- (void)layoutSubviews {
  [super layoutSubviews];
  primaryLabel.frame = LABEL_FRAME;
  icon.frame = ICON_FRAME;  
}

- (void)dealloc {
  [icon release];
  [primaryLabel release];
}


@end

Answer 3

I want just to add some thoughts to Andrew Johnson's answer.

If you add subview to contentView and use accesoryView or image,then it'll show separator image incorrectly. Use something like

UIView *bg = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 40, 40)];
    bg.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.2];
                    //or [UIColor colorWithImagePattern];
                    //or crete UIImageView and assign to backgroundView of the cell
self.backgroundView = bg;
[bg release];