Weird UITableViewCell selection in iOS7

Question

I am developing an app in iOS7. I have one TableViewController, it's style is grouped. I successfully implemented this solution, can get curve to TableView as I want.

EDIT:- I am not using any custom class for cell. I have added TableView just from nib and also using by default cell.

Code implemented is as below :-

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([cell respondsToSelector:@selector(tintColor)]) {
        if (tableView == self.tblviwSample) {
            CGFloat cornerRadius = 5.f;
            cell.backgroundColor = UIColor.clearColor;
            CAShapeLayer *layer = [[CAShapeLayer alloc] init];
            CGMutablePathRef pathRef = CGPathCreateMutable();
            CGRect bounds = CGRectInset(cell.bounds, 10, 0);
            BOOL addLine = NO;
            if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
                CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);
            } else if (indexPath.row == 0) {
                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
                addLine = YES;
            } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
            } else {
                CGPathAddRect(pathRef, nil, bounds);
                addLine = YES;
            }
            layer.path = pathRef;
            CFRelease(pathRef);
            layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor;

            if (addLine == YES) {
                CALayer *lineLayer = [[CALayer alloc] init];
                CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);
                lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight);
                lineLayer.backgroundColor = tableView.separatorColor.CGColor;
                [layer addSublayer:lineLayer];
            }
            UIView *testView = [[UIView alloc] initWithFrame:bounds];
            [testView.layer insertSublayer:layer atIndex:0];
            testView.backgroundColor = UIColor.clearColor;
            cell.backgroundView = testView;
        }
    }
}

Effect of this code - See this - before selection

But getting one problem, when I select a cell, it's looking weird like this

I want the section in proper manner. Any idea will be appreciated.

I stumbled upon this problem just today as well. I've just changed the cell's `selectionStyle` to `UITableViewCellSelectionStyleNone` until I find a solid solution. The cell received the selection but it doesn't highlight it. — Isuru, Jan 24 '14 at 14:59

score 1 · Accepted Answer · edited Apr 05 '21 at 12:58

1

I would make the tableview thinner (decrease width from both sides), then implement your looks so that the line would end not before edge of table view, but stretch all the way to the side of tableview.

In other words - decrease table view width to match current line width and leave the line as bid as it is now (it would then be as wide as tableview). Your selection will now be less wide too.

Or, upon selection you can modify your table view cell so that you mimic some custom selection. That could be from changing cell color up to flipping it with animations.

edited Apr 05 '21 at 12:58

Nimantha

6,405
6
28
69

answered Jan 24 '14 at 09:30

avuthless

996
2
12
27

please be clear with the answer.it will be helpful if you can elaborate the answer – iOSdev Mar 21 '14 at 05:39
I do not understand what is there to be elaborated. You narrow table view to be as wide as line in provided image. Then selection will be as wide as lines too. Design does not require tableview to be as wide as whole screen. – avuthless Mar 21 '14 at 10:04

score 1 · Answer 2 · answered May 04 '15 at 05:01

Had this problem too today, and here's the fix:

add below code to the end of willDisplayCell:

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = cell.bounds;
maskLayer.path  = pathRef;
cell.selectedBackgroundView.layer.mask = maskLayer;

CFRelease(pathRef);

score 0 · Answer 3 · edited Jan 24 '14 at 09:37

When UITableViewCells are selected, all subviews get a backgroundcolor of [UIColor clearColor] by default, and the cells selectedBackgroundView is the one that sets how things are looking.

In your codesample, you are manipulating the bakcgroundview to get rounded corners, but as soon as a cell is selected this view becomes transparent. I would suggest overriding setSelected, and manipulating the cells subviews here.

From UITableViewCells selectedBackgroundView documentation:

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.

Weird UITableViewCell selection in iOS7

3 Answers3

Linked