TableView section seperator line

Question

I wanted to add separator line into the table view section. Currently the code for the header section view will be:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    // recast your view as a UITableViewHeaderFooterView
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
    header.backgroundView.backgroundColor = [UIColor clearColor];
    header.textLabel.textColor = [UIColor blackColor];
    [header.textLabel setFont:[UIFont fontWithName:@"Rubik-Regular" size:15.0]];

}

Solution 1

If you have

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

would be better to make it there:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    // recast your view as a UITableViewHeaderFooterView
    UITableViewHeaderFooterView *header = // make header here
    header.backgroundView.backgroundColor = [UIColor clearColor];
    header.textLabel.textColor = [UIColor blackColor];
    [header.textLabel setFont:[UIFont fontWithName:@"Rubik-Regular" size:15.0]];
    // make a view with height = 1 attached to header bottom
    UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0, header.frame.size.height, header.frame.size.width, 1)];
    [separator setBackgroundColor:[UIColor yellowColor]];
    [header addSubview:separator];
    return header;
}

Solution 2

Swift 4

 override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = UIView()
    let separatorView = UIView(frame: CGRect(x: tableView.separatorInset.left, y: footerView.frame.height, width: tableView.frame.width - tableView.separatorInset.right - tableView.separatorInset.left, height: 1))
    separatorView.backgroundColor = UIColor.separatorColor
    footerView.addSubview(separatorView)
    return footerView
}

extension UIColor {
   class var separatorColor: UIColor {
     return UIColor(red: 244.0/255.0, green: 244.0/255.0, blue: 244.0/255.0, alpha: 1.0)
   }
}

Solution 3

I used below code and it worked for me:

• Swift version : 4.2
• Xcode version : 10.3

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = UIView()
    let dummyView = UIView() //just a dummy view to return
    let separatorView = UIView(frame: CGRect(x: tableView.separatorInset.left, y: footerView.frame.height, width: tableView.frame.width - tableView.separatorInset.right - tableView.separatorInset.left, height: 0.5))
    separatorView.backgroundColor = UIColor.white
    footerView.addSubview(separatorView)

    if section == 1 {    
        return footerView
    }
    return dummyView
}

Solution 4

You can do like this:

CGRect sepFrame = CGRectMake(0, view.frame.size.height-1, 320, 1); 
UIView *separatorView =[[UIView alloc] initWithFrame:sepFrame]; 
seperatorView.backgroundColor = UIColor.yellow()
[header addSubview:separatorView];

Solution 5

I found adding a footer view to be the cleanest solution. Don't forget to include the footer view height in heightForFooterInSection.

override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let separatorView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: tableView.frame.width, height: 1.0))
    separatorView.backgroundColor = tableView.separatorColor
    return separatorView
}

override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 1.0
}

View more solutions