IPhone + UITableView + place image for separator

Question

I have a UITableView in my application.

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

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

Please help me.

Regards, Pratik

Answer 1

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 along this path, I suggest you avoid images where possible and use the API to build your application.

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

In your UITableViewCell subclass, you can add all the user interface elements that you want in the contentView of the cell, including the separator image at the bottom of the cell.

So, here is an implementation of a 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 here is 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 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 the 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 2

A solution that worked for me.

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

Answer 3

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

If you add a subview to the contentView and use an accesoryView or image, then it does not display the delimiter image correctly. 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];