Overlapping display of contents of UITableViewCell

Question

I have this table whose cells look like this:
As you can see, the top border of each cell should overlap with the cell above. Right now this border is part of the background (until it overlaps).

Now I have separated the border from the background, and the code for creating my cell is as follows:

#define QAImage(NAME) [[[UIImageView alloc] initWithImage:[UIImage imageNamed:NAME]] autorelease] - (UITableViewCell*) tableView:(UITableView*)table cellForRowAtIndexPath:(NSIndexPath*)index { UITableViewCell *cell = [table dequeueReusableCellWithIdentifier:@"Entry"]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Entry"] autorelease]; cell.backgroundView = QAImage(@"bg-cell.png"); cell.selectedBackgroundView = QAImage(@"bg-cell-sel.png"); cell.selectionStyle = UITableViewCellSelectionStyleGray; UIImageView *img = QAImage(@"disclosure.png"); img.highlightedImage = [UIImage imageNamed:@"disclosure-sel.png"]; cell.accessoryView = img; CGRect r = cell.frame; r.size.height = table.rowHeight; r.size.width = table.frame.size.width; cell.frame = r; r = cell.contentView.frame; r.origin = CGPointMake(13, 13); r.size.width -= 8 + img.frame.size.width; r.size.height -= 25; [cell.contentView addSubview:[[[TagView alloc] initWithFrame:r] autorelease]]; img = QAImage(@"cell-top.png"); img.highlightedImage = [UIImage imageNamed:@"cell-top-sel.png"]; img.opaque = NO; r = img.frame; r.origin = CGPointMake(0, 1 - r.size.height); // The (supposed) overlapping happens here. img.frame = r; cell.contentView.clipsToBounds = NO; [cell.contentView addSubview:img]; } // Here I set the title. (omitted) return cell; } 

The problem is that the border is displayed only when scrolling up in the table , otherwise it itself is overlapped by a cell above it. (Wrong.)

I tried [cell setNeedsDisplay] in -tableView:willDisplayCell:forRowAtIndexPath: adding a border ( cell-top.png ) every time a cell is requested (which obviously leads to several drawings and doesn't look good, regardless of whether I solve my problem) and set img.layer.zPosition = 2 .

How can I make UIImageView stay on top all the time?

Answer 1

My suggestion was to subclass UITableView and override layoutSubviews to put the visible cells in the z-order in which you want them to be like this:

 - (void)layoutSubviews { [super layoutSubviews]; NSArray *sortedIndexPaths = [[self indexPathsForVisibleRows] sortedArrayUsingSelector:@selector(compare:)]; for (NSIndexPath *path in sortedIndexPaths) { UITableViewCell *cell = [self cellForRowAtIndexPath:path]; [self bringSubviewToFront:cell]; } } 

It may be too slow or you may need to change bringSubviewToFront: to sendSubviewToBack: but hopefully this will give you the opportunity to try.

EDIT: Now, if you are targeting iOS 6, you should instead use the UICollectionView, which has built-in support for z-ordering.