Question

Before describing the problem, let me first point out that this is a distinct issue from this question.

The Problem

This screenshot was taken with a break set at tableView:didSelectRowAtIndexPath:, and as you can see in the simulator (far right of the image), there’s a single-pixel blue line at the bottom of the selected cell. This is not the design asked for by the client, nor is it how this app used to behave: there should be no separator, even on selection.

How I Got Here
I’d initially designed this table view using custom UITableViewCell classes with corresponding nib (.xib) files and had no trouble with selections: the separator was hidden as desired. Predictably, scrolling was sluggish due to all the overhead from the view hierarchy, so I reworked the custom cells to use Loren Brichter’s fast scrolling solution. Now scrolling is much faster, but I can’t get rid of the separator for the life of me.

What I’ve tried

At the time of the screenshot above…

• the table view has “Separator [None]” in IB.
• the UIViewController that contains the table view has this line in viewDid Load: self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

As you can see in the screenshot, I inserted some unused lines to prove that separatorStyle is set as desired. Other testing confirms that tableView and self.tableView are equivalent pointers at that same breakpoint.

I’ve also tried setting tableView.separatorColor to black and to clear, all with the same result: the cells look right until a selection is made.

---

Manjunath: Here’s the code I’m using to draw alternate backgrounds depending on whether the cell’s been touched or not. You can see the difference—which is less subtle when animated—in the screenshot.

if(self.highlighted) {
    textColor = [UIColor blackColor];
    UIImage *bg = [UIImage imageNamed:@"image-cell-background_highlighted.png"];
    [bg drawAtPoint:CGPointMake(0.0, 1.0)];
}
else {
    UIImage *bg = [UIImage imageNamed:@"image-cell-background.png"];
    [bg drawAtPoint:CGPointMake(0.0, 0.0)];
}

This gets called in UIImageCell.m in drawContentView:, a method inherited from Mr. Brichter’s ABTableViewCell super class.

Answer 1

Chris,

Delving into ABTableViewCell, I see:

- (void)setFrame:(CGRect)f
{
 [super setFrame:f];
 CGRect b = [self bounds];
 b.size.height -= 1; // leave room for the seperator line
 [contentView setFrame:b];
}

Since the height of the cell is one pixel shorter than the actual cell, when the cell gets selected, that one-pixel line will bleed through in the color of the selection color. It may look like it’s the separator, but it is actually the selection color.

To test, try to change that line above to be two pixels or more shorter to see what happens.

Update:

By making this change to the FastScrollingExample project’s -rootViewController:

- (void)viewDidLoad
{
 self.title = @"Fast Scrolling Example";
 self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [super viewDidLoad];
}

and commenting out:

// if(self.selected)
// {
//  backgroundColor = [UIColor clearColor];
//  textColor = [UIColor whiteColor];
// }
// 

in -drawContentView to mimic what would happen if you didn’t have the selection color showing through, then I get a screen shot like this:

alt text http://files.me.com/mahboud/7k656q

Look familiar?

How would you get around this? If you don’t need to select cells, then disable cell selection. Otherwise, if you are selecting cells, then you should make the rect larger so the default selection color doesn’t show through when you paint with your own selection color in -drawConentRect.