How do I add an extra separator to the top of a UITableView?

Question

I have a view for the iPhone that is basically split in two, with an informational display in the top half, and a UITableView for selecting actions in the bottom half. The prob

Answer 1

In complement of Ortwin's answer, if you need to add some margin to your top separator to fit the separator inset, you have to embedded your top separator in another view :

UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 1 / UIScreen.mainScreen.scale)];
UIView *topSeparator = [[UIView alloc] initWithFrame:CGRectMake(self.tableView.separatorInset.left, 0, self.tableView.frame.size.width - self.tableView.separatorInset.left - self.tableView.separatorInset.right, 1 / UIScreen.mainScreen.scale)];
topSeparator.backgroundColor = self.tableView.separatorColor;
[headerView addSubview:topSeparator];
self.tableView.tableHeaderView = headerView;

Hope it helps.

Answer 2

I had the same problem and could not find an answer. So I added a line to the bottom of my table header.

CGRect  tableFrame = [[self view] bounds] ; 
CGFloat headerHeight = 100;        
UIView * headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableFrame.size.width, headerHeight)];
// Add stuff to my table header...

// Create separator
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, headerHeight-1, tableFrame.size.width, 1)] ;
lineView.backgroundColor = [UIColor colorWithRed:224/255.0 green:224/255.0 blue:224/255.0 alpha:1.0];
[headerView addSubview:lineView];

self.tableView.tableHeaderView = headerView;

Answer 3

I just got hit with this same problem and realised that the separator at the top is only displayed whilst scrolling the table.

What I then did was the following

1. In Interface Builder go to "Scroll View Size"
2. Set the Content Insets of Top to 1

Alternatively in code you could do

[tableView setContentInset:UIEdgeInsetsMake(1.0, 0.0, 0.0, 0.0)];

NOTE: This no longer works for iOS7 as the separators are no longer shown at all.

Answer 4

I solved this by adding one extra line at the beginning of the table. Just have to set its height to 1, set its the text to empty, disable user interaction for it and in the whole code adjust the indexPath.row value.

Answer 5

Add a separator between header view and first row :- In view for Header in section delegate method add a subview self.separator //@property (nonatomic, strong) UIImageView *separator;

- (CGFloat)tableView:(UITableView *)tableView
heightForHeaderInSection:(NSInteger)section {

return 41; 
}


- (UIView *)tableView:(UITableView *)tableView
viewForHeaderInSection:(NSInteger)section {

self.headerView = [[UIView alloc] init];
self.headerView.backgroundColor = [UIUtils colorForRGBColor:TIMESHEET_HEADERVIEW_COLOR];

self.separator = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"seperator.png"]];
self.separator.frame = CGRectMake(0,40,self.view.frame.size.width,1);
[self.headerView addSubview:self.separator];
return self.headerView;

}

Answer 6

Swift 4

extension UITableView {
    func addTableHeaderViewLine() {
        self.tableHeaderView = {
            let line = UIView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: 1 / UIScreen.main.scale))
            line.backgroundColor = self.separatorColor
            return line
        }()
    }
}