UITableview Add Padding to custom section header imageview

Question

I am trying to add padding to this custom header view (an image).

The table is static content cells and I am only adding an image to the first section.

I tried to follow this link but was unsuccessful.

I am trying to add some top and bottom padding in the header view.

I tried this to no luck:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if section == 0 {
        var header = tableView.tableHeaderView
        let image = UIImage(named: "Placeholder") // is 121x121
        let imageView = UIImageView(frame: CGRect(x: 0, y: 20, width: tableView.frame.width, height: tableView.sectionHeaderHeight))
        imageView.image = image
        imageView.contentMode = .scaleAspectFit
        header = imageView
        return header
    }
    return nil
}

I am also defining the header height in the delegate:

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    if section == 0 {
        return 125.0
    }
    return 44.0
}

The result is the same with no padding.

Any help would be appreciated

I have also tried to add the imageView to the header subview which results in the whole image disappearing.

If your *table is `static content cells`*, can you add it as the header of the Table itself? Or do you need the image as the header of the first section? — DonMag, Jun 06 '17 at 15:54

score 3 · Accepted Answer · answered Jun 06 '17 at 15:43

Instead of returning a UIImageView as a header, add it as a subview to a UIView, and create the padding there.

Your problem is that, even if you set the frame for the header, the UITableView will resizes it to fit its width, and the height that you set as 125. Therefore, you have to contain it in a UIView that will fill the table's header, and contain the UIImageView that you wish to give it padding.

Edit: Try this

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if section == 0 {
        let header = UIView()
        header.backgroundColor = UIColor.clear
        let image = UIImage(named: "Placeholder") // is 121x121
        let imageView = UIImageView(frame: CGRect(x: 0, y: 20, width: tableView.frame.width, height: tableView.sectionHeaderHeight))
        imageView.image = image
        imageView.contentMode = .scaleAspectFit
        header.addSubview(imageView)
        return header
    }
    return nil
}

This pushes the entire image to the left with 20pt padding from the top. How would I centre it like in the above but with padding on top and bottom? — Simon, Jun 06 '17 at 15:58
Just change the frame of the imageView to your needs. You could try to move the X and make a smaller width, the height should be -40 so that you get the same padding from top and bottom. — TawaNicolas, Jun 06 '17 at 16:05
Thanks, ended up using the tableviews centre center x property and subtracting it by image sizes width / 2 to get the frame: `let imageView = UIImageView(frame: CGRect(x: tableView.center.x - (image.size.width / 2), y: 15.0, width: tableView.frame.width, height: 0))` — Simon, Jun 06 '17 at 19:02

UITableview Add Padding to custom section header imageview

1 Answers1