cell.selectedBackgroundView covering up UIViews in a cell

Question

I have a table. Within each cell of a table, I created a simple bar graph (which is just 2 UIViews with background filled).

I have set cell.selectedBackgroundView to an image.

When the cell is selected, it seems to cover up parts of the bar graph. Does anyone know why?

The red is the selected cell. The top and bottom are unselected cells:

In the image, the grey bar, the brown bar, the 2 numbers (x.xx) and the semi-transparent line at the left, are all subviews of 1 UIView. The UIView is added to the cell. The line and the 2 numbers are still there, but the 2 bars are gone.

Here's some code:

Cell selected image set like this:

UIImage *selectedRowImage = [UIImage imageNamed:@"table-selectedcellbg-red-45px-stretch.png"];
cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[selectedRowImage resizableImageWithCapInsets:UIEdgeInsetsMake(selectedRowImage.size.height, selectedRowImage.size.width/2, selectedRowImage.size.height, selectedRowImage.size.width/2)]];
[cell sendSubviewToBack:cell.selectedBackgroundView]; // This didn't make a difference

Adding the view set like this:

UIView *graph = [barGraph getGraph];
UIView *graphView = [[UIView alloc]initWithFrame:CGRectMake(150, (tableView.rowHeight - graph.frame.size.height)/2, graph.frame.size.width, graph.frame.size.height)];
[graphView addSubview:graph];
[cell addSubview:graphView];

Any ideas?

Answer 1

I think the answer can be found in the UITableViewClass Reference:

selectedBackgroundView

...

Discussion

The default is nil for cells in plain-style tables (UITableViewStylePlain) and non-nil for section-group tables (UITableViewStyleGrouped). UITableViewCell adds the value of this property as a subview only when the cell is selected. It adds the selected background view as a subview directly above the background view (backgroundView) if it is not nil, or behind all other views. Calling setSelected:animated: causes the selected background view to animate in and out with an alpha fade.

It seems as if selectedBackgroundView only works well if the corresponding backgroundView property of the cell is not nil.

Try adding a backgroundView and test again.

Hope that helps you out.

---

Edit:

Since this wasn't the solution, I tried to reproduce your problem, but with no success: the backgroundView stayed behind the QuestionMarkIcon (a view like your graphView)..

Code:

- (UITableViewCell*) tableView: (UITableView*) tableView cellForRowAtIndexPath: (NSIndexPath*) indexPath {
    //...

    UIImage* selectedRowImage = [UIImage imageNamed: @"strecheableImage.png"];
    cell.selectedBackgroundView = [[UIImageView alloc] initWithImage: [selectedRowImage resizableImageWithCapInsets: UIEdgeInsetsMake(selectedRowImage.size.height, selectedRowImage.size.width/2, selectedRowImage.size.height, selectedRowImage.size.width/2)]];

    UIView* graph = [[QuestionMarkIcon alloc] init];
    UIView* graphView = [[UIView alloc]initWithFrame: CGRectMake(150, (tableView.rowHeight - graph.frame.size.height)/2, graph.frame.size.width, graph.frame.size.height)];
    [graphView addSubview: graph];
    [cell addSubview: graphView];
    // ...
}

This is how my stretchableImage.png looks like:

Cell 1 is selected but the QuestionMarkIcon (your graph) stays in front:

Sorry I couldn't help.