How to have a separator drawn in the "middle" of 2 sections space?

Question

I wish to have separator drawn in UITableView with the following condition.

There is no separators between cell items.
There is 1 separator between sections.
There should be space in between the sections.
The separator between the sections, should be drawn in the middle of section space.

This is how our desired look, in Android app

However, when we implement this in UITableViewController, we can hardly make the separator drawn in the middle of Section space.

This is how our iOS app looks like

Here's the custom code, which tries to draw separator between Sections

override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    // UIView with darkGray background for section-separators as Section Footer
    let v = UIView(frame: CGRect(x: 0, y:0, width: tableView.frame.width, height: 1))
    v.backgroundColor = .darkGray
    return v
}

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

The outcome isn't perfect. As you can see, instead of having the separator in the middle of "Trash" and "Settings", the separator is closed to "Trash".

Basic data strucrure

Our implementation is pretty straightforward. It looks as following

private static let noteSection = [
    SideMeu(
        stringResource: "nav_notes",
        image: UIImage(systemName: "note")!
    )
]

private static let archiveSection = [
    SideMeu(
        stringResource: "nav_archive",
        image: UIImage(systemName: "archivebox")!
    ),
    SideMeu(
        stringResource: "nav_trash",
        image: UIImage(systemName: "trash")!
    )
]

private static let settingsSection = [
    SideMeu(
        stringResource: "nav_settings",
        image: UIImage(systemName: "gear")!
    ),
    SideMeu(
        stringResource: "nav_feedback",
        image: UIImage(systemName: "exclamationmark.bubble")!
    ),
    SideMeu(
        stringResource: "nav_shop",
        image: UIImage(systemName: "cart")!
    )
]

static let sections = [
    noteSection,
    archiveSection,
    settingsSection
]

override func numberOfSections(in tableView: UITableView) -> Int {
    return SideMenuTableViewController.sections.count
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    let s = SideMenuTableViewController.sections[section]
    return s.count
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)

    let s = SideMenuTableViewController.sections[indexPath.section]
    let item = indexPath.item
    let sideMenu = s[item]
    
    cell.textLabel?.text = sideMenu.stringResource.localized
    cell.imageView?.image = sideMenu.image
    
    return cell
}

Do you have any idea, how we can have a nice separator, drawn in the "middle" of 2 sections space? Thanks.

please change y position to 10 in viewForFooterInSection and try. — , May 25 '21 at 06:08
otherwise you can set `contentinset` and i think it's best solution. — , May 25 '21 at 06:12
check here for inset: https://stackoverflow.com/a/36060215/9137841 — , May 25 '21 at 06:14
If you want to use `viewForFooterInSection`, I'd use a `viewForHeaderInSection` too: header of height 5, a footer of height 5 with a "black line" of 1 px on it (to place correctly) instead. Your current setting (height of 1 and black) make your current result, and that's normal, no? — Larme, May 25 '21 at 07:34

How to have a separator drawn in the "middle" of 2 sections space?

Basic data strucrure

0 Answers0