How can we add image in UITableView section header using swift?

Question

In my willDisplayHeaderView I have changed color of section header But I want to add an image before section title. Any help? My code for willDisplayHeaderView is

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    let header: UITableViewHeaderFooterView = view as UITableViewHeaderFooterView 
    header.contentView.backgroundColor = UIColor(red: 238/255, green: 168/255, blue: 15/255, alpha: 0.8)
    header.textLabel.textColor = UIColor.whiteColor()
    header.alpha = 1
}

score 11 · Accepted Answer · answered Feb 19 '15 at 07:47

11

You could design your own header, like you would design a custom cell in a table view. Or you could just add an image like so:

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

    var myCustomView: UIImageView
    var myImage: UIImage = UIImage(named: "myImageResource")
    myCustomView.image = myImage

    let header: UITableViewHeaderFooterView = view as UITableViewHeaderFooterView
    header.addSubview(myCustomView)
    return header
}

Then you can simply add your section title UILabel as another subview.

answered Feb 19 '15 at 07:47

Anfaje

335
4
14

5

let header: UITableViewHeaderFooterView = view as UITableViewHeaderFooterView This simply doesn't work here... – Mikael Feb 23 '16 at 02:11
I have added this myCustomView programmatically but it's not showing any image while running?? @Anfaje – Parth Barot May 23 '18 at 06:42
Just initialize myCustomView as `var myCustomView: UIImageView = UIimageView()`. An error will disappear – shripad20 Aug 01 '18 at 14:00

score 8 · Answer 2 · edited Jun 18 '15 at 03:15

8

Simply Add the following code in your viewDidLoad() method.

    var frame = CGRectMake(0, 0, self.view.frame.size.width, 200)
    var headerImageView = UIImageView(frame: frame)
    var image: UIImage = UIImage(named: "yourImage")!
    headerImageView.image = image
    youTableView.tableHeaderView = headerImageView

edited Jun 18 '15 at 03:15

Ram

3,092
10
40
56

answered Jun 11 '15 at 09:48

Jabbar

590
1
7
21

Saqib Omer · Answer 3 · 2017-04-22T14:22:21.260

Here it is how we can add custom header in UITableView.

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
     let header: UITableViewHeaderFooterView = view as UITableViewHeaderFooterView
     let imageViewGame = UIImageView(frame: CGRectMake(5, 8, 40, 40));
     let image = UIImage(named: "Games.png");
     imageViewGame.image = image;
     header.contentView.addSubview(imageViewGame)
}

score 5 · Answer 4 · edited Oct 31 '15 at 09:44

I use this method below in my proj.

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
{
    let uilbl = UILabel()
    //uilbl.numberOfLines = 0
    //uilbl.lineBreakMode = NSLineBreakMode.ByWordWrapping
    //uilbl.text = "blablabla"
    uilbl.sizeToFit()
    uilbl.backgroundColor =  UIColor(patternImage: UIImage(named: "yr-img-name")!)

    return uilbl
}

score 4 · Answer 5 · answered Mar 16 '17 at 09:38

For Swift 3

  override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    let header = view as! UITableViewHeaderFooterView
    header.textLabel?.textColor = UIColor.white
    let headerImage = UIImage(named: "headerBanner.jpg")
    let headerImageView = UIImageView(image: headerImage)
    header.backgroundView = headerImageView
}

score 4 · Answer 6 · answered Mar 09 '18 at 15:13

This will work with swift 4

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerImage: UIImage = UIImage(named: "image")!
    let headerView = UIImageView(image: headerImage)
    return headerView
}

score 3 · Answer 7 · answered Mar 08 '22 at 02:50

Swift 5

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let imageView = UIImageView();
    let image = UIImage(named: "logo")
    imageView.contentMode = .center
    imageView.image = image;
    return imageView
}

  // Optionally you can set the header height here.
  override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 85
    }

How can we add image in UITableView section header using swift?

7 Answers7

Linked