UITableView titleForHeaderInSection shows all caps

Question

I am using titleForHeaderInSection to show a header for a UITableView section. It worked fine with the iOS6 SDK, but the iOS7 SDK shows the header in all CAPS.

I guess it's part of Apple's updated Human Interface Guidelines; all examples in there show headers in all caps. Also, all section headers in Settings on my iPhone are in all caps.

However, I wonder if there is a way around that. Normally, I wouldn't mind showing caps if that improves consistency, but when I need to show people's names in a section header, it's a bit awkward.

Anybody any idea how to get around to capitalization?

score 76 · Answer 1 · edited Apr 30 '20 at 17:31

Yes, we had very much a similar problem to this, and my own solution was as follows:

The Apple UITableViewHeaderFooterView documentation (the link to it is irritatingly long but you can find it easily with your favourite search engine) says you can access the textLabel of the header view without having to format your own view via viewForHeaderInSection method.

textLabel A primary text label for the view. (read-only)

@property(nonatomic, readonly, retain) UILabel *textLabel Discussion Accessing the value in this property causes the view to create a default label for displaying a detail text string. If you are managing the content of the view yourself by adding subviews to the contentView property, you should not access this property.

The label is sized to fit the content view area in the best way possible based on the size of the string. Its size is also adjusted depending on whether there is a detail text label present.

With some additional searching the best place to modify the label text was the willDisplayHeaderView method (suggested in How to implement `viewForHeaderInSection` on iOS7 style?).

So, the solution I came up with is pretty simple and just does a transformation of the text label string, after it's actually been set by titleForHeaderInSection:

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
        //I have a static list of section titles in SECTION_ARRAY for reference.
        //Obviously your own section title code handles things differently to me.
    return [SECTION_ARRAY objectAtIndex:section];
}

and then simply call the willDisplayHeaderView method to modify how it looks:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    if([view isKindOfClass:[UITableViewHeaderFooterView class]]){
        UITableViewHeaderFooterView *tableViewHeaderFooterView = (UITableViewHeaderFooterView *) view;
        tableViewHeaderFooterView.textLabel.text = [tableViewHeaderFooterView.textLabel.text capitalizedString];
    }
}

You can put in your own 'if' or 'switch' clauses in there as the section number is also passed to the method, so hopefully it'll allow you to show your user/client name in capitalised words selectively.

Super! I copied your willDisplayHeaderView method into my code UITableViewController and it worked right away. Tx! — gbroekstg, Oct 09 '13 at 13:31
It doesn't work if you want to display a whole sentence as it capitalises each word. — moon4e, Oct 30 '14 at 16:44
Raaah, @moon4e, be creative! For example, `title = [NSString stringWithFormat:@"%@%@", [[title substringToIndex:1] uppercaseString], [[title substringFromIndex:1] lowercaseString]];` — Martin, Apr 20 '15 at 12:54
So you need something more complex, like `- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section` and create your view according to your string. — Martin, Apr 23 '15 at 07:48
I was having an issue where the view from `viewForHeaderInSection:` was initially displaying a default / un-styled header, which was then quickly reloaded with styled version. Styling the view in `willDisplayHeaderView:` instead solves the issue. — pkamb, Feb 22 '16 at 20:18
Superb bro.. i simply copied your code willDisplayHeaderView.. works — Rathna Kumaran, Apr 29 '16 at 09:55
Note that, if you are using this technique, you *must* return a string in `titleForHeaderInSection`, but the string can be anything (it will be ignored) if you over-ride it in `willDisplayHeaderView`. — coco, Jun 01 '16 at 14:53
@RobinDaugherty - thanks for your edit, though I don't think it actually improves the answer at all. Admittedly, my additional text didn't ADD to the answer, but neither did it detract from it. Personal preference maybe? If so, I'd prefer my little bit of text detritus back in :) — Animal451, May 02 '20 at 08:41

score 21 · Answer 2 · edited Aug 05 '16 at 15:13

solution which i found is add Title in "titleForHeaderInSection" method

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
   return @"Table Title";
}

and then call the willDisplayHeaderView method to Update :

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section 
{
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
    header.textLabel.textColor = [UIColor darkGrayColor];
    header.textLabel.font = [UIFont boldSystemFontOfSize:18];
    CGRect headerFrame = header.frame;
    header.textLabel.frame = headerFrame;
    header.textLabel.text= @"Table Title";
    header.textLabel.textAlignment = NSTextAlignmentLeft;
}

adding both titleForHeaderInSection and willDisplayHeaderView methods works. Thanks — anoo_radha, Apr 24 '17 at 15:06

score 19 · Answer 3 · answered Apr 30 '15 at 05:41

19

In Swift,

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    let headerView = view as! UITableViewHeaderFooterView
    headerView.textLabel.text = "My_String"
}

answered Apr 30 '15 at 05:41

Jeffrey Neo

3,693
2
26
30

score 18 · Answer 4 · edited Aug 13 '19 at 21:35

If you want to just keep the string as it is, you could simply do this:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    if ([view isKindOfClass:[UITableViewHeaderFooterView class]] && [self respondsToSelector:@selector(tableView:titleForHeaderInSection:)]) {
        UITableViewHeaderFooterView *headerView = (UITableViewHeaderFooterView *)view;
        headerView.textLabel.text = [self tableView:tableView titleForHeaderInSection:section];
    }
}

Swift solution:

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    if let headerView = view as? UITableViewHeaderFooterView, self.respondsToSelector(Selector("tableView:titleForHeaderInSection:")) {
        headerView.textLabel?.text = self.tableView(tableView, titleForHeaderInSection: section)
    }
}

score 5 · Answer 5 · answered Sep 23 '13 at 19:40

One solution I found is to utilize UITableViewHeaderFooterView.

Instead of

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return @"some title";
}

Do

- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    static NSString *identifier = @"defaultHeader";
    UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:identifier];
    if (!headerView) {
        headerView = [[UITableViewHeaderFooterView alloc] initWithReuseIdentifier:identifier];
    }
    headerView.textLabel.text = @"some title";
    return headerView;
}

The annoying downside is that the table view will no longer automatically adjust the section header height for you. So if your header heights varies, you'll have to do something like this:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    id headerAppearance = [UILabel appearanceWhenContainedIn:[UITableViewHeaderFooterView class], nil];
    UIFont *font = [headerAppearance font];
    CGFloat viewWidth = CGRectGetWidth(tableView.frame);
    CGFloat xInset = 10;
    CGFloat yInset = 5;
    CGFloat labelWidth = viewWidth - xInset * 2;
    CGSize size = [sectionInfo.name sizeWithFont:font constrainedToSize:CGSizeMake(labelWidth, MAXFLOAT)];
    return size.height + yInset * 2;
}

I really don't like hard-coding layout information (the inset) this way, as it might break in the future version. If anyone has a better solution to get/set the header height, I'm all ears.

score 3 · Answer 6 · answered Oct 30 '14 at 17:17

Thanks @Animal451. This is more generic solution that would work with any type of header string.

// We need to return the actual text so the header height gets correctly calculated
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return self.headerString;
}

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
    [header.textLabel setText:self.headerString];       //String in the header becomes uppercase. Workaround to avoid that.

}

To avoid duplication the header string can be declared anywhere else. I have done it in the -viewDidLoad method.

Igor Kovryzhkin · Answer 7 · 2018-01-12T11:39:44.017

3

In addition to @Animal451's post. For swift 3 you can use

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
  guard section == 0 ,
    let tableViewHeaderFooterView = view as? UITableViewHeaderFooterView
    else { return }

  tableViewHeaderFooterView.textLabel?.text = "Your awesome string"
 }

And then ignore - titleForHeaderInSection:

Keep in mind that this code is for 1st section only. If you want to go through all of your sections, you'll need to add support for them

edited Jan 12 '18 at 11:39

answered Dec 05 '17 at 17:05

Igor Kovryzhkin

2,195
1
27
22

titleForHeaderInSection still needs to be there with header titles returned from the method, else section headers are all blank. – Sayalee Pote May 30 '19 at 10:46

score 3 · Answer 8 · answered May 03 '20 at 18:10

3

Swift 5

Static TableViewController & storyboard section title. The below code will work the first letter capitalized.

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        let titleView = view as! UITableViewHeaderFooterView
        titleView.textLabel?.text =  titleView.textLabel?.text?.capitalized
    }

answered May 03 '20 at 18:10

Joyal Clifford

1,212
11
20

This will capitalise first character of the word after space which is CamelCase by its own. – Sanket Pandya Oct 15 '20 at 11:43

score 2 · Answer 9 · answered Sep 15 '16 at 06:16

2

Simplest Solution for was below: Swift 2.x

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

        header.textLabel?.text = header.textLabel?.text?.capitalizedString
}

answered Sep 15 '16 at 06:16

Dheeraj D

4,386
4
20
34

What is header object? – mimic Nov 16 '16 at 21:52
it is UITableViewHeaderFooterView object – Dheeraj D Nov 18 '16 at 09:29
It's not enough, you need to provide the real code to make your sample work. – mimic Nov 18 '16 at 18:42

score 2 · Answer 10 · edited Feb 01 '18 at 03:52

2

Swift 3.x:

if let headerView = view as? UITableViewHeaderFooterView {
    headerView.textLabel?.text? = headerView.textLabel?.text?.capitalized ?? ""
}

edited Feb 01 '18 at 03:52

Pang

9,564
146
81
122

answered Sep 07 '17 at 22:42

Matt Bearson

993
8
15

score 1 · Answer 11 · answered Sep 29 '14 at 22:42

The solution which worked for me was to create a simple UILabel Instance Variable to use as the section header view. (Your needs may be different, but for me, I only needed to have text in my header...) Then, inside viewForHeaderInSection, I set up the label as required, and return this label as the header view.

Then, whenever I want to update the text in the header, I simply change the label's text directly.

In the .h file:

@property (nonatomic, retain)  UILabel  *sectionHeaderLabel;

then in the .m file:

- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    return [self    refreshMySectionHeaderLabel]; // I created this handy little method to update the header text
}


// Get the latest text for the section header...
-(UILabel   *)  refreshMySectionHeaderLabel   {
    // Initialise the first time.    
    if( sectionHeaderLabel   ==  nil )   {
        sectionHeaderLabel   =   [[UILabel   alloc] initWithFrame:   CGRectNull];
    }

    // ...
    // May also set other attributes here (e.g. colour, font, etc...)
    // Figure out the text...    
    sectionHeaderLabel.text   =   @"Your updated text here...";


    return sectionHeaderLabel;
}

When I want to update my section header, I simply call:

[self refreshMySectionHeaderLabel];

...or you could simply call:

sectionHeaderLabel.text = @"The new text...";

Take note: I only have 1 section (section 0). You may need to account for multiple sections...

score 1 · Answer 12 · answered Jul 15 '17 at 16:33

One liner solution, based on @Dheeraj D answer:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
  (view as? UITableViewHeaderFooterView)?.textLabel?.text = (view as? UITableViewHeaderFooterView)?.textLabel?.text?.capitalized
}

score 1 · Answer 13 · answered Jun 23 '18 at 02:02

SWIFT

In implementation, i found out that you need to specify section header text in both titleForHeaderInSection & willDisplayHeaderView function, othervise header hides.

    extension ViewController: UITableViewDelegate, UITableViewDataSource {

        func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
            let sectionHeader =  datasource[section].sectionHeader  

            // Header Title
            return sectionHeader 
        }

        func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

            guard let header = view as? UITableViewHeaderFooterView else { return }
            header.textLabel?.textColor = UIColor.darkGray
            header.textLabel?.font = UIFont.systemFont(ofSize: 20, weight: .semibold)
            header.textLabel?.frame = header.frame

            // Header Title
            header.textLabel?.text = datasource[section].sectionHeader
        }

    }

score 1 · Answer 14 · answered Nov 29 '21 at 13:17

Use the method viewForHeaderInSection to create the header title.

In viewDidLoad register a UITableViewHeaderFooterView

tableView.register(UITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "HeaderFooterViewID")

add delegate

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

        let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "HeaderFooterViewID")
        var config = header?.defaultContentConfiguration()
            
        let title = "My Header Title"
        let attribute = [ NSAttributedString.Key.foregroundColor: UIColor.blue ]
        
        config?.attributedText = NSAttributedString(string: title, attributes: attribute)
        
        header?.contentConfiguration = config
        
        return header
    }

You can adjust the attributed text more, reference

score 0 · Answer 15 · answered Feb 17 '16 at 21:57

With RubyMotion / RedPotion, paste this into your TableScreen:

  def tableView(_, willDisplayHeaderView: view, forSection: section)
    view.textLabel.text = self.tableView(_, titleForHeaderInSection: section)
  end

I think what's happening is that somewhere in there the text gets set to ALL CAPS. This little trick RESETS the text back to whatever it was originally. Works like a charm for me!

UITableView titleForHeaderInSection shows all caps

15 Answers15

Linked