Eureka: Formatting Section Fonts

Created on 13 Apr 2016  路  7Comments  路  Source: xmartlabs/Eureka

I have spent the better part of the day scratching my head over this one.

Running the example app: The headers are all small font, small caps. I have been unable to figure out how to change the font of the headers.

So far my best attempt has been:

let headerFont:UIFont = UIFont(name: "Arial", size: 20.0)!

+++ Section() {section in
                var header = HeaderFooterView<UITableViewHeaderFooterView>(.Class)
                header.height = { 100.0 }
                header.onSetupView = {view, _, _ in
                    view.textLabel?.textColor = UIColor.greenColor()
                    view.textLabel?.text = "testLabel"
                    view.textLabel?.font = self.headerFont
                    view.contentView.backgroundColor = UIColor.redColor()
                }
                section.header = header
            }

But this doesn't affect the font at all.

I've searched the example code for a fontSize change and a autoCap setting to no avail.

Any advice would be amazingly appreciated.

section header footer

Most helpful comment

It is in fact much easier to just

Section(){ section in
    var header = HeaderFooterView<UILabel>(.class)
    header.height = { 100.0 }
    header.onSetupView = {view, _ in
        view.textColor = .red
        view.text = "testLabel"
        view.font = UIFont.boldSystemFont(ofSize: 50)
    }
    section.header = header
}

All 7 comments

If you just specify a title then the default iOS behaviour is used; Eureka just returns the title in tableView:titleForHeaderInSection method.
You can obviously create your own view with a label and customize the label and that is what you did there. It should have worked but I am not sure how UITableViewHeaderFooterView works so you may want to create your own UIView subclass with a UILabel inside

I'll take a look at that. I used UITableHeaderFooterView because I thought it'd make an easily addressable default view.

@LordAndrei Have you solved it?

For grouped style table views set up detailTextLabel instead of textLabel.
If you need even more flexibility on how the section header looks, i would recommend you to create your own section header view.

            Section(){section in
                var header = HeaderFooterView<UITableViewHeaderFooterView>(.Class)
                header.height = { 100.0 }
                header.onSetupView = {view, _, _ in
                    view.detailTextLabel?.textColor = UIColor.greenColor()
                    view.detailTextLabel?.text = "testLabel"
                    view.detailTextLabel?.font = UIFont.boldSystemFontOfSize(20)
                    view.contentView.backgroundColor = UIColor.redColor()
                }
                section.header = header
            }

@mtnbarreto hi
Your code still not working for textColor and font

It is in fact much easier to just

Section(){ section in
    var header = HeaderFooterView<UILabel>(.class)
    header.height = { 100.0 }
    header.onSetupView = {view, _ in
        view.textColor = .red
        view.text = "testLabel"
        view.font = UIFont.boldSystemFont(ofSize: 50)
    }
    section.header = header
}

I wanted to add to the stock header (and match its style), so I went full custom. Here's a sample:

    section.header = createSectionHeader()

    func createSectionHeader() -> (HeaderFooterView<UIView>) {
        var header = HeaderFooterView<UIView>(.class)
        header.height = { 26 }
        header.onSetupView = { view, _ in
            view.backgroundColor = UIColor.white

            let title = UILabel()
            title.adjustsFontSizeToFitWidth = true
            title.textColor = UIColor.black
            title.baselineAdjustment = .alignCenters

            let fontSize: CGFloat = 13
            let fontDescriptor = UIFont.systemFont(ofSize: fontSize, weight: .light).fontDescriptor

            let upperCaseFeature = [
                UIFontDescriptor.FeatureKey.featureIdentifier : kUpperCaseType,
                UIFontDescriptor.FeatureKey.typeIdentifier : kUpperCaseType
            ]

            let lowerCaseFeature = [
                UIFontDescriptor.FeatureKey.featureIdentifier : kLowerCaseType,
                UIFontDescriptor.FeatureKey.typeIdentifier : kLowerCaseSmallCapsSelector
            ]

            let features = [upperCaseFeature, lowerCaseFeature]
            let additions = fontDescriptor.addingAttributes([.featureSettings: features])
            title.font = UIFont(descriptor: additions, size: fontSize)

            title.text = "SECTION HEADER TITLE"
            view.addSubview(title)

            // set constraints using TinyConstraints (or any other mechanism of choice)
            title.leftToSuperview(offset: 16)
            title.centerYToSuperview()
        }
        return header
    }
Was this page helpful?
0 / 5 - 0 ratings