adding some margin below section header text of a UITableView

Question

I have styled the header text:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as? TableViewCell

    cell!.titleLabel!.text = sections[indexPath.section].objects[indexPath.row].name
    cell!.datetimeLabel!.text = "on " + sections[indexPath.section].objects[indexPath.row].date

    return cell!
}

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
   return 100
}

func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sections[section].heading // Open Events
}

And I would like to add some margin / padding below it before the section of the table cells start. I have added some margin / padding top with heightForHeaderInSection. Any way to add some top / bottom margin / padding?

can you not make the headers height even larger, and move the "open events" label up? — Fonix, Feb 12 '16 at 05:06
@Fonix "open events" is not a label, but section header set in function `tableView(tableView: UITableView, titleForHeaderInSection section: Int)` as I just added in the code — Sayanee, Feb 12 '16 at 05:32
@Signare making it to 120 will just increase the top spacing more, without any bottom spacing — Sayanee, Feb 12 '16 at 05:32
create a label and add it to cell. so you can set the top spacing of that label. — Rince Thomas, Feb 12 '16 at 05:36

iRiziya · Accepted Answer · 2016-02-12T06:05:27.767

8

titleForHeaderInSection method will have the default section header frame. You can use viewForHeaderInSection method to customize it. Try this code :

  override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerFrame = tableView.frame

    let title = UILabel()
    title.frame =  CGRectMake(10, 10, headerFrame.size.width-20, 20) //width equals to parent view with 10 left and right margin
    title.font = title.font.fontWithSize(14)
    title.text = self.tableView(tableView, titleForHeaderInSection: section) //This will take title of section from 'titleForHeaderInSection' method or you can write directly
    title.textColor = UIColor.blueColor()

    let headerView:UIView = UIView(frame: CGRectMake(0, 0, headerFrame.size.width, headerFrame.size.height))
    headerView.addSubview(title)

    return headerView
}

Hope this will work for you.

edited Feb 12 '16 at 06:05

answered Feb 12 '16 at 05:40

iRiziya

3,235
1
22
36

1

Thank you, yes it works now with a bit of tweak https://gist.github.com/sayanee/a164f7f22423c17494e6. I'm wondering though if the `CGRectMake`'s 3rd argument for width can be dynamic to take the parent width. – Sayanee Feb 12 '16 at 05:58
1

here's a screenshot if you wanna update https://www.dropbox.com/s/ook1ymq6jglsa0o/Screenshot%202016-02-12%2013.59.13.png?dl=0 – Sayanee Feb 12 '16 at 05:59
you mean,you want title lable's height as the same of headerView height? – iRiziya Feb 12 '16 at 06:01
oops, I meant the label's width to be the same as the section header's width (not height) – Sayanee Feb 12 '16 at 06:05
ah..sorry. I meant width actually. I've updated my answer – iRiziya Feb 12 '16 at 06:06
1

Thank you :) It's all good now! If you want, you can use the dropbox link for the image and the gist for the update code. – Sayanee Feb 12 '16 at 06:11
Welcome. Glad it helped :) – iRiziya Feb 12 '16 at 06:13

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

use viewForHeaderInSection: and return a view with a label with the correct spacing below it instead of using the default header in titleForHeaderInSection

see this answer for an example

edited May 23 '17 at 11:53

Community

1
1

answered Feb 12 '16 at 05:35

Fonix

11,447
3
45
74

adding some margin below section header text of a UITableView

2 Answers2

Linked