CODEWITHSUNDEEP
iphoneiosuitableview
TheEye
TheEye

Reputation: 9346

UITableViewCell highlighting with hiding separator lines

I'd like to have a UITableView with custom UITableViewCells and custom separators.

As far as I know there is no separate "separator view", so I have to include the separator image in the cells themselves, either on top of a cell or at the bottom.

When I highlight a cell after selection, I can only influence the cell's own appearance - so while it's possible to hide the separator image in the cell in question the separator image from the cell above (or below) will still be visible.

Is there any (easy and reliable) way to hide BOTH separator lines on cell highlighting?

Better explanation:

What I'd like to do is the following: The left image shows the cells (red lines) with the separators (thick black lines), the right image shows the middle cell selected - the green selection image hiding the middle cell's separator image and the separator image of the top cell.

Cells with separators Selected cell hiding two separators

I already tried setting the selection image's frame to a -3 y position, but that doesn't help, as table cell views are painted in order from higher to lower ...

Upvotes: 2

Views: 2759

Answers (4)

TheEye
TheEye

Reputation: 9346

Well, answering my own question after a while :-).

I found a nice way to do it:

What I really wanted to do was get the cell in question to the front, and then paint a slightly larger selected state image in it so that it also hides the previous cell's separator. Problem is that there is no guarantee which table cell is in front of which other cells at any time.

The solution is quite simple: Make sure the selected cell is in front of all other cells!

So my custom UITableViewCell now does the following things:

-(void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
    [self showSelected];
}

-(void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
    [super setHighlighted:highlightedanimated:animated];
    [self showSelected];
}

-(void)showSelected {
    if(self.selected || self.highlighted)
    {
        self.backgroundImage.hidden = false;  // show the selected image (2 pixels larger than the cell, origin (0, -2) -> paints over previous cell's separator)
        self.cellSeparator.hidden = true;     // hide my cell's separator image

        // make sure the cell is in front of all other cells!
        [self.superview bringSubviewToFront:self];
    }
    else
    {
        self.backgroundImage.hidden = true;    // hide the selected image again
        self.cellSeparator.hidden = false;     // show my cell's separator image
    }
}

Et voila, all is fine.

Upvotes: 0

Lenrocexe
Lenrocexe

Reputation: 81

Well, if you want to manipulate two cells (or more) after the selection of a single cell then you must ask the tableView for those cells.
For example, if the selected cell has an IndexPath of 0,4 then you must ask the tableView for the cell at indexPath 0,3.

So in your didSelectRowAtIndexPath method you could add: 


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSIndexPath *ip = [NSIndexPath indexPathForRow:indexPath.row - 1 inSection:indexPath.section];
    UITableViewCell *previousCell = [self tableView:tableView cellForRowAtIndexPath:ip];
}
Then you can hide the line from that cell.

Don't forget to check for the bounds of the new indexPath if you use this. Such as an indexPath with a row/section below 0 or higher than the methods [tableView:numberOfSections] and [tableView:numberOfRowsInSection:] return.

Upvotes: 2

Adithya
Adithya

Reputation: 4705

I would like to suggest you a method, but not sure if its the right way. Try setting a blank or clear image as highlightedImage for the separator line imageview.

Upvotes: 0

Prateek Prem
Prateek Prem

Reputation: 1544

Use selectedBackgroundView property of UITableViewCell on cellForRowAtIndexPath:

UIImageView *selBGView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourHighlightedImage.png"]];
 cell.selectedBackgroundView = selBGView;

Upvotes: 0

Related Questions