UITableViewHeaderFooterView width issue on iOS 9

Question

I have created a custom tableView header by subclassing UITableViewHeaderFooterView, its working fine on iOS 10 and later version but on iOS 9 the width is not adjusting with the tableView bounds. Steps I have used:- New File > CocoaTouchClass > CustomHeader:UITableViewCell. I have changed the UITableViewCell class to UITableViewHeaderFooterView manually.

2) Registered it in the viewDidLoad.

tableView.register(UINib(nibName: "CustomHeader", bundle: nil),forHeaderFooterViewReuseIdentifier: CustomHeader.reuseIdentifier)

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let customHeader = tableView.dequeueReusableHeaderFooterView(withIdentifier: CustomHeader.reuseIdentifier) as! CustomHeader 
return customHeader
}

CustomHeader

class CustomHeader: UITableViewHeaderFooterView {
class var reuseIdentifier: String{return String(describing: self)}

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    self.contentView.backgroundColor = UIColor(red: 244/255, green: 244/255, blue: 245/255, alpha: 1)
}

ViewController

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let customHeader = tableView.dequeueReusableHeaderFooterView(withIdentifier: CustomHeader.reuseIdentifier) as! CustomHeader 
return customHeader
}

Result on iOS 9

Result on iOS 10 and later

I have already tried this ` customHeader.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50)` but still same result. — Kunal Kumar, Mar 07 '19 at 15:13
Actually I have used footerView as well, and it has the same problem. I tried to find out the width of header and tableview and its same, but customHeader.contentView.frame.width giving 6.94020030300593e-310 — Kunal Kumar, Mar 08 '19 at 06:56

score 0 · Answer 1 · answered Mar 08 '19 at 10:00

Approach 1: Creating a footer view with UIView in code

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerRect = CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 40.0)
    let footerView = UIView(frame: footerRect)
    footerView.backgroundColor = UIColor.green
    let label = UILabel(frame: CGRect(x: 0.0, y: 4.0, width: 200.0, height: 20.0))
    label.text = "Hello"
    footerView.addSubview(label)
    return footerView
}

Approach 2: Creating a footer view with an IBOutlet-connected UIView (.xib) object

a) Create a View file by choosing File > New > File. Select View under User Interface. Name a file. For example, name FooterView.xib.

b) Create a UIView subclass file by choosing File > New > File. Select Cocoa Touch Class under Source. Name the file after selecting the UIView subclass. For example, name FooterView.swift.

c) Select the View file. And select File's Owner in the middle pane. Then set the UIView subclass name (FooterView) as the class. Open both the View file and the UIView subclass file. Make an IBOutlet connection of the latter to the Content View of the former.

import UIKit

class FooterView: UIView {
    @IBOutlet var contentView: UIView!
    @IBOutlet weak var myLabel: UILabel!

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        Bundle.main.loadNibNamed("FooterView", owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = self.bounds
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        myLabel.text = "My footer"
    }
}

d) Add a UIView object to the view controller. (See the picture below.) Set the class name (FooterView).

e) Wire the footer view object to the view controller.

f) Prepare for table view's viewForFooterInSection delegate method.

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    // MARK: - Variables
    let list = ["George", "Nancy", "Jim"]

    // MARK: - IBOutlet
    @IBOutlet var footerView: FooterView!
    @IBOutlet weak var tableView: UITableView!

    // MARK: - IBAction

    // MARK: - Life cycle
    override func viewDidLoad() {
        super.viewDidLoad()


    }

    // MARK: - TableView
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = list[indexPath.row]
        return cell
    }

    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let footerRect = CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 40.0)
        footerView.frame = footerRect
        return footerView
    }
}

UITableViewHeaderFooterView width issue on iOS 9

1 Answers1