UICollectionView Header and Footer View

i0S Swift Issue

Question or problem in the Swift programming language:

Hello I am wondering how do we achieve this?

In UITableView we could simply do

tableView.tableHeaderView = SomeView;


tableView.tableFooterView = SomeView;

But I am wondering how to do the same for UICollectionView.

P.S.: Not Section Header and Footer

How to solve the problem:

Solution 1:

Try it…

First register class in ViewDidLoad

registerClass(myFooterViewClass, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "Footer")

then use this method

override func collectionView(collectionView: UICollectionView,   viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {

  switch kind {

    case UICollectionElementKindSectionHeader:

        let header = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "Header", forIndexPath: indexPath) as! UICollectionReusableView

        header = SomeView
        return header

    case UICollectionElementKindSectionFooter:
        let footer = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "Footer", forIndexPath: indexPath) as! UICollectionReusableView

        footer= SomeView 
        return footer



I hope it help…

Solution 2:

UITableView have global headers tableHeaderView and tableFooterView, but UICollectionView does not have global headers so you’ll have to use the section headers.

Solution 3:

user section Header and footer and create a class for that, for example, headerFooter: UICollectionReusableView then write code for what you want in this class then in viewcontroller just write this :

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let sectionView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "FooterView", for: indexPath) as! CollectionReusableView

    return sectionView

For View Class :

class CollectionReusableView: UICollectionReusableView {

    @IBAction func ButtonClick(_ sender: Any) {
        print("Click 1st")
    @IBAction func ButtonClick2(_ sender: Any) {
        print("Click 2nd")

Solution 4:

The easiest way – is to set collectionView.contentInset.top = height
and add view manually to collectionView:

let header = UIView(frame: CGRect(x: 0, y: -height, width: collectionView.frame.width, height: height))
// ... customise view, add subviews

Note. you can’t use autolayout to arrange header in the collection view. So use good old manual layout. And when collectionView changes frame – you should reset header’s width

Solution 5:

I see.
It’s very simple,like this.

        CGFloat headerHeight = 100;
        UIView *headerView = ({
            UIView *view = [[UIView alloc] init];
            view.frame = CGRectMake(0, -headerHeight, collectionView.frame.size.width,headerHeight);
        [collectionView addSubview:headerView];

        CGFloat footerHeight = 100;
        UIView *footerView = ({
            UIView *view = [[UIView alloc] init];
            view.frame = CGRectMake(0, collectionView.frame.size.height, collectionView.frame.size.width, footerHeight);

        self.footerView = footerView;
        [collectionView addSubview:footerView];
        collectionView.contentInset = UIEdgeInsetsMake(headerHeight, 0, footerHeight, 0);

and add this

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
       if (scrollView.contentSize.height > scrollView.frame.size.height) {
          CGRect frame = self.footerView.frame;
          frame.origin.y = scrollView.contentSize.height;
          self.footerView.frame = frame;

Hope this helps!