lightbox like effect for selected cell in uitableview

Question

I would like to add transparent layers above all unselected cells in a uitableview. I implemented the following code:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    customCell *selectedCell = (customCell*)[tableView cellForRowAtIndexPath:indexPath];

    overlayAboveSelectedCell = [[UIView alloc] initWithFrame:CGRectMake(listViewTable.frameOrigin.x, listViewTable.frame.origin.y, listViewTable.frameWidth, selectedCell.frameOrigin.y)];
    overlayAboveSelectedCell.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
    [self.view insertSubview:overlayAboveSelectedCell aboveSubview:listViewTable];

    overlayBellowSelectedCell = [[UIView alloc] initWithFrame:CGRectMake(listViewTable.frameOrigin.x, selectedCell.frameOrigin.y+selectedCell.frameHeight, listViewTable.frameWidth, listViewTable.frameHeight-selectedCell.frameOrigin.y-selectedCell.frameHeight)];
    overlayBellowSelectedCell.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
    [self.view insertSubview:overlayBellowSelectedCell aboveSubview:listViewTable];

    listViewTable.scrollEnabled = NO;

    [selectedCell doSomething];
}

It works fine with one exception - all the coordinates are calculated for the original cell position (i.e. cell origin remains the same even when the user scrolls down, so the part of the screen that shouldn't be dimmed might be placed wrongly. How could I modify the code so that the actual coordinates of selected cell would be taken into consideration?

score 0 · Accepted Answer · edited May 23 '17 at 10:34

Using Nick's answer to Get UITableviewCell position from "visible" area or window I was able to get the current position of the selected cell.

New implementation:

customCell *selectedCell = (customCell*)[tableView cellForRowAtIndexPath:indexPath];
CGRect position = [tableView convertRect:[tableView rectForRowAtIndexPath:indexPath] toView:[tableView superview]];

overlayAboveSelectedCell = [[UIView alloc] initWithFrame:CGRectMake(listViewTable.frame.origin.x, listViewTable.frame.origin.y, listViewTable.frameWidth, position.origin.y)];
overlayAboveSelectedCell.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
[self.view insertSubview:overlayAboveSelectedCell aboveSubview:listViewTable];

overlayBellowSelectedCell = [[UIView alloc] initWithFrame:CGRectMake(listViewTable.frameOrigin.x, position.origin.y+selectedCell.frameHeight, listViewTable.frameWidth, listViewTable.frameHeight-position.origin.y-selectedCell.frameHeight)];
overlayBellowSelectedCell.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
[self.view insertSubview:overlayBellowSelectedCell aboveSubview:listViewTable];

listViewTable.scrollEnabled = NO;

lightbox like effect for selected cell in uitableview

1 Answers1