Add CollectionView as Table View Header

Question

I want to show banner like this:

My approach is adding a CollectionView as a TableViewHeader

My code:

extension HomeViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func configureHeaderView() {

        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

        let headerView = UICollectionView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: headerHeight), collectionViewLayout: layout)
        headerView.backgroundColor = .blue
        headerView.isPagingEnabled = true
        headerView.isUserInteractionEnabled = true

        headerView.dataSource = self
        headerView.delegate = self
        headerView.register(BannerCollectionViewCell.self, forCellWithReuseIdentifier: BannerCollectionViewCell.reuseIdentifier)
        headerView.showsHorizontalScrollIndicator = false

        tableView.tableHeaderView = headerView
    }

    // MARK: UICollectionViewDataSource
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 3
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: BannerCollectionViewCell.reuseIdentifier, for: indexPath) as! BannerCollectionViewCell
        return cell
    }

    // MARK: UICollectionViewDelegateFlowLayout
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: UIScreen.main.bounds.width, height: headerHeight)
    }
}

My BannerCollectionViewCell has a default image.

class BannerCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var bannerImageView: UIImageView!

}

But I don't see that image on my header. It just show an empty header.

Have you tried using the delegate method viewForHeaderInSection? — Ben Ong
– Ben Ong, Commented Jan 13, 2017 at 9:42
Not yet, I have set tableView.tableHeaderView = headerView, are they equivalent to each other? — Twitter khuong291
– Twitter khuong291, Commented Jan 13, 2017 at 9:43
in cellForItemAt indexPath , you have to set image. like cell.imageView.image = "abc.png" — 200_OK
– 200_OK, Commented Jan 13, 2017 at 9:46
#Ben Ong, I have only 1 section, #the_dahiya_boy, I have set default image. — Twitter khuong291
– Twitter khuong291, Commented Jan 13, 2017 at 9:47

Twitter khuong291 · Accepted Answer · 2017-01-13 10:05:41Z

7

you use the NIB, so you should use func register(UINib?, forCellWithReuseIdentifier: String) instead of func register(AnyClass?, forCellWithReuseIdentifier: String)

edited Jan 13, 2017 at 10:05

Twitter khuong291

11.7k16 gold badges82 silver badges118 bronze badges

answered Jan 13, 2017 at 9:50

zhongwuzw

1561 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

200_OK Over a year ago

Post answer only if you have any answer regarding to question otherwise write in comment.

Twitter khuong291 Over a year ago

This is the correct answer. Thanks for your all helps :)

Vaibhav Limbani Over a year ago

@zhongwuzw Thanks I'm having issues with Autolayout . Could you help me?

Mamta · Accepted Answer · 2017-01-13 09:57:38Z

-3

Maybe you're looking for an image pager like KIImagePager on the top instead of a collection view. You can also create the same using inbuilt PageViewController.

You can add a TableView separately below this.

answered Jan 13, 2017 at 9:57

Mamta

9211 gold badge10 silver badges29 bronze badges

1 Comment

200_OK Over a year ago

He is using UIcollectionview by disabling verticle move, not PageController

Collectives™ on Stack Overflow

Add CollectionView as Table View Header

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related