UITableView rows sliding under UITableViewHeaderSection

Question

I have a UITableView populating this sample Dictionary.

var WholeDict = [
    "Animals" : ["Cat","Dog"],
    "Fruits" : ["Apple","Orange"]
]

The content is too small. So I am choosing the grouped UITableView style, so that I can avoid the unwanted cells that is showing below the content in UITableView. But the problem is, when I choose grouped style, the cells under each sections are not going under header when scrolling. The scrolling moves the header first. Grouped style: cells scrolling along with header & Plain style: cells sliding under header. This is what I am doing in code

func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    let allkeys = Array(WholeDict.keys)
    return allkeys[section]
}

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    if let headerView = view as? UITableViewHeaderFooterView {
        headerView.textLabel?.textAlignment = .Center
    }
}

So how can I avoid the extra spaces below the tableview and at the same time use the sliding of rows under headers?

EDIT I am using walters answer. It is working for me. But then I had another issue. When I am scrolling beyond the last row, then the screen will show only the footer that I had added. So I added another workaround.

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    let visiblerows = MyTable.indexPathsForVisibleRows
    if visiblerows?.count == 0 {
        let ScrollToIndexPath = NSIndexPath(forRow: 0, inSection: WholeDict.count - 1)
        MyTable.scrollToRowAtIndexPath(ScrollToIndexPath, atScrollPosition: UITableViewScrollPosition.Top, animated: true)
    }
}

Another workaround could be to remove the divider lines from the table view (`separatorStyle` or `separatorColor`) and then manually draw them for each cell in your `cellForRowAtIndexPath`. That would avoid the footer issue. — Walter, May 07 '16 at 12:27

score 1 · Accepted Answer · answered May 07 '16 at 02:13

The UITableView will always add blank "cells" to fill out the space. In order to make them go away you should create a footerView that fills the space between the bottom of the last populated row and the bottom of the tableView. Here is a quick example but you may need to move it around depending on how you add cells. The tableView's contentSize property will have a height that is equal to the populated part of the tableView.

 let contentSize = self.tableView.contentSize
 let footer = UIView(frame: CGRect(x: self.tableView.frame.origin.x, 
                                   y: self.tableView.frame.origin.y + contentSize.height, 
                               width: self.tableView.frame.size.width,
                              height: self.tableView.frame.height - self.tableView.contentSize.height))

  self.tableView.tableFooterView = footer

Thank you. It is working. And I had edited my question with my workaround. Please check that too. — iOSMAn, May 07 '16 at 04:35
If you are using storyboards you can also drag a uiview beneath table view to add footer view — Harish Pathak, May 10 '17 at 07:04
Footer view does not need to be specific height (it could be also 0). Just by simply having it - blank cells will be gone. — Guntis Treulands, Jun 30 '17 at 15:08

score 0 · Answer 2 · answered May 05 '16 at 08:57

0

If you want your section headers fixed than you can use this property.

self.tableView.style = UITableViewStyleGrouped

It makes your sections headers stick to the rows and scroll with them.

answered May 05 '16 at 08:57

Harish Pathak

1,567
1
18
32

I don't want my section headers to be fixed. But using grouped style removes the unwanted rows. I want that along with the "rows sliding under section header" of plain style. – iOSMAn May 05 '16 at 09:10

UITableView rows sliding under UITableViewHeaderSection

2 Answers2