CODEWITHSUNDEEP
iosuitableviewsections
user3083408
user3083408

Reputation: 335

TableView Seperator line gets added to the section header view, what to do?

I got a table view with two sections, no crazy code, just my delegate methods. It works pretty fine, like i want it to work. It should just look like on this screenshot:

enter image description here

Now the problem is: Sometimes while scrolling or flicking the scoll view to the bounds, this happens (if you can't see it: There is 1 or 1/2 pixel in gray on the top of the second section header, what is not intended to be so):

enter image description here

So, is this a iOS 7.1 or 7.x bug? I'm not using a custom view for the header. Does anyone know how to fix this?

Feedback really is appreciated.

Upvotes: 6

Views: 6087

Answers (3)

user3083408
user3083408

Reputation: 335

I tried it with multiple different things and the cleanest approach i found is this. I created a custom view for the header, but wanted it to look the same as the original not modified header:

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 34)];
    [headerView setBackgroundColor:[UIColor groupTableViewBackgroundColor]];

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(15, 0, tableView.frame.size.width, 34)];
    [label setFont:[UIFont boldSystemFontOfSize:14]];

    if (section == 0) {
        NSMutableArray *difficultyArray = [dictionary objectForKey:@"Difficulty"];
        NSString *difficulty = [difficultyArray objectAtIndex:0];
        [label setText:[NSString stringWithFormat:@"Time Challenge (%@)", difficulty]];
    } else {
        [label setText:@"Freeplay (5x5 board)"];
    }

    [headerView addSubview:label];

    return headerView;
}

Now we got the sections as they would appear without custom header views, but the bug still exists. I made it simple and clean:

UIView *lineFix = [[UIView alloc] initWithFrame:CGRectMake(0, 77.5, self.tableView.frame.size.width, 0.5)];
lineFix.backgroundColor = [UIColor groupTableViewBackgroundColor];
[self.tableView addSubview:lineFix];

Now we set a view over the buggy seperator with a height of 0.5 pixel, the seperator isn't visible anymore. Between the two section headers now is a 0.5 height view what shouldn't be there, but since i set it the same color as the section background color it isn't noticeable. The view moves, because it is a subview of the tableview, the same direction like the tableview.

If you have questions, just add a comment.

Upvotes: 0

klcjr89
klcjr89

Reputation: 5902

I had this same problem that I battled for a few weeks, and the way I solved it was to set the tableView's separatorStyle to UITableViewCellSeparatorStyleNone, and add a custom subview that is a line to the cell's contentView.

Then in your cellForRowAtIndexPath method, hide the line subview of the last cell in the section:

- (UIView *)lineView
{
    // Your frame will vary.
    UIView *colorLineView = [[UIView alloc]initWithFrame:CGRectMake(82, 67.5, 238, 0.5)];
    colorLineView.backgroundColor = [UIColor blackColor];
    return colorLineView;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell;
    static NSString *identifier = @"cellIdentifier";
    UIView *lineView = [self lineView];

    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    if (cell == nil)
    {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
        cell.selectionStyle = UITableViewCellSelectionStyleDefault;

        [cell.contentView addSubview:lineView];
    }

    if (indexPath.section == 0)
    {   
        if (indexPath.row == keys.count -1)
        {
            lineView.hidden = YES;
        }
    }
    return cell;
}

Upvotes: 2

Cameron
Cameron

Reputation: 1142

It may be recycling one of the cell views with the separator from the scroll. This is a long shot, but what if you were to try tweaking the footer view for the section by returning an empty view?

-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
return [[UIView alloc] init];
}

It's also a good trick for removing empty cells from the table when you have only a couple rows.

Upvotes: 0

Related Questions