How to pad a UITableView section header?

Question

How would you add some padding to a section header in a UITableView cell?

I have this: enter image description here

I have an NSDictionary whose key values contain a string of times. I stored the key values in an NSArray.

I am using titleForHeaderInSection instead of viewForHeaderInSection.

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{   
    return [schedule objectAtIndex:section];
}

However, the section header is aligned all the way to the left. I can pad it to my liking using a UIView for viewForHeaderInSection, but is there any way to do it for the method titleForHeaderInSection?

score 2 · Accepted Answer · answered Dec 05 '14 at 06:40

2

I couldn't easily do it using the titleForHeaderInSection so I decided to use a custom cell with viewForHeaderInSection.

answered Dec 05 '14 at 06:40

Pangu

3,721
11
53
120

score 1 · Answer 2 · answered Nov 04 '16 at 14:30

I think the easiest solution is nesting your label in a view. See below for Swift 2 answer:

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    // Create the header view
    let headerView =  UIView.init(frame: CGRectMake(0, 0, self.view.frame.size.width, 30))
    headerView.backgroundColor = UIColor.lightGrayColor()

    // Create the Label 
    let label: UILabel? = UILabel(frame: CGRectMake(20, 0, 120, 30))
    label!.textAlignment = .Left
    label!.text = "Your Section Title"

    // Add the label to your headerview 
    headerView.addSubview(label)

    return headerView
}

And presto, you have a header view with an indentation of 20 on your text :-D

Abhishek · Answer 3 · 2014-12-04T07:54:34.817

0

better to use tableView:viewForHeaderInSection

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 30;
}

    - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { 
      UIView *viewHeader = [UIView.alloc initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 30)];
      UILabel *lblHeadertitle = [[UILabel alloc] initWithFrame:CGRectMake(YOUR_LEFT_PADDING, YOUR_TOP_PADDING, 200, 20)];
      //customize lblHeadertitle
      lblHeadertitle.text = [schedule objectAtIndex:section];
      [viewHeader addSubview:lblHeadertitle];

      return viewHeader;
    }

edited Dec 04 '14 at 07:54

answered Dec 04 '14 at 06:51

Abhishek

1,682
2
17
29

But how would I use viewForHeaderInSection to display different section header titles? – Pangu Dec 04 '14 at 06:58
You can set lblHeadertitle.text = [schedule objectAtIndex:section]; see updated answer – Abhishek Dec 04 '14 at 07:12
not sure why, but the section titles have disappeared. I tried multiple padding to not avail – Pangu Dec 04 '14 at 07:24
don't forget to set heightForHeaderInSection, see updated answer – Abhishek Dec 04 '14 at 07:55
The section header text is off alignment for some reason. No matter what padding I try, it's always in the same wrong location. Please see link: http://s13.postimg.org/jmfqfueiv/Untitled.png – Pangu Dec 04 '14 at 08:00

score 0 · Answer 4 · edited Dec 04 '14 at 10:49

0

Based on the answer shown here: You have heights viewHeader = 30, lblHeadertitle = 20.

At the code:

UILabel *lblHeadertitle = [[UILabel alloc] initWithFrame:CGRectMake(YOUR_LEFT_PADDING, YOUR_TOP_PADDING, 200, 20)];

Set the YOUR_TOP_PADDING=5 because the lblHeadertitle is subview of viewHeader and let it be centered in the viewHeader.

Hope it helps.

edited Dec 04 '14 at 10:49

Dhruv

2,153
3
21
45

answered Dec 04 '14 at 09:02

Arben Pnishi

591
5
11

thanks but didn't help, the section header text disappeared completely with your suggestion – Pangu Dec 04 '14 at 22:48

How to pad a UITableView section header?

4 Answers4