UICollectionView Header and Footer View

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;

or

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

    default:

       print("anything")
    }
}

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
collectionView.addSubview(header)

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);
            view;
        });
        [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);
            view;
        });

        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!