Why Collection Reusable View not shown?

Question

I would like to create UICollectionView with header. I set Collection Reusable View on mainStoryBoard but, nothing is shown on device. I tried to search but could not find out why it is not appearing. I

Main Story Board

On device

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {


    @IBOutlet weak var collectionView: UICollectionView!

    var images = ["medal1","medal2","medal3","medal4","medal5","medal6","medal7","medal8","medal9","medal10","medal1","medal2","medal3","medal14"]

    var texts = ["hi","yes","hoo","such","hi","yes","hoo","such","hi","yes","hoo","such","hi","yes"]

    override func viewDidLoad() {
        super.viewDidLoad()



        collectionView.delegate = self
        collectionView.dataSource = self

    }

    public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return images.count
    }

    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell

        cell.myImage.image = UIImage(named: images[indexPath.row])

        cell.achievementLabel.text = texts[indexPath.row]

        return cell

    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }






}


import UIKit

Class for collection View class CustomCell: UICollectionViewCell {

    @IBOutlet weak var myImage: UIImageView!

    @IBOutlet weak var achievementLabel: UILabel!

}

class for Collection Reusable View import UIKit

class CollectionReusableView: UICollectionReusableView {

    @IBOutlet weak var reuseableVimage: UIImageView!
}


> import UIKit

class ViewController: UIViewController, UICollectionViewDelegate {


    @IBOutlet weak var collectionView: UICollectionView!

    var images = ["medal1","medal2","medal3","medal4","medal5","medal6","medal7","medal8","medal9","medal10","medal1","medal2","medal3","medal14"]

    var texts = ["hi","yes","hoo","such","hi","yes","hoo","such","hi","yes","hoo","such","hi","yes"]

    override func viewDidLoad() {
        super.viewDidLoad()



        collectionView.delegate = self


    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionElementKindSectionHeader {
            let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderView", for: indexPath)
            // do any programmatic customization, if any, here
            return view
        }
        fatalError("Unexpected kind")








}
}

Rob · Accepted Answer · 2017-05-16T16:06:12.097

9

You have to implement viewForSupplementaryElementOfKind:

Implement collectionView(_:viewForSupplementaryElementOfKind:at:), for UICollectionElementKindSectionHeader or UICollectionElementKindSectionFooter, as appropriate.

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    if kind == UICollectionElementKindSectionHeader {
        let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "CollectionReusableView", for: indexPath) as! CollectionReusableView
        // do any programmatic customization, if any, here
        return view
    }
    fatalError("Unexpected kind")
}

Make sure the header reusable view in IB has
- the appropriate base class; and
- the appropriate "reuse identifier"
In IB, make sure the collection view's "Accessories" have checkmarks next "Section Header" and "Section Footer", as appropriate.

edited May 16 '17 at 16:06

answered May 16 '17 at 15:52

Rob

415,655
72
787
1,044

Thank you. I updated the code but now the screen shows nothing.. I checked IB and Accessories, all is fine. – rebecca87 May 16 '17 at 16:23
Assuming there are no warnings, I might check the view debugger and see if there are views are inside the collection view and what their frames are. If there's really no views, then I'd set breakpoints in the `UICollectionViewDataSource` methods and see that they're called and what values they are returning. – Rob May 16 '17 at 16:30
When I set collectionView.dataSource = self it get crush. – rebecca87 May 16 '17 at 16:34
This is the break point ""let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "CollectionReusableView", for: indexPath) as! CollectionReusableView"" – rebecca87 May 16 '17 at 16:35
Sounds like either the header view doesn't have a matching "reuse identifier" or the base class for the header hasn't been set. – Rob May 16 '17 at 16:36
Thank you it was matching of "reuse identifier". Now I can put labels or button to header, and it can be seen but only uiimage is still not shown:/ – rebecca87 May 16 '17 at 16:45
I delete the image and placed it again. Now the image is shown! Thank you for being so kind to help :) – rebecca87 May 16 '17 at 16:48

score 1 · Answer 2 · answered May 16 '17 at 15:33

Try to implement this. There's an example in RayWenderlich that could be useful for you: https://www.raywenderlich.com/136161/uicollectionview-tutorial-reusable-views-selection-reordering

override func collectionView(_ collectionView: UICollectionView,
                             viewForSupplementaryElementOfKind kind: String,
                             at indexPath: IndexPath) -> UICollectionReusableView {
switch kind {
case UICollectionElementKindSectionHeader:
    let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
                                                                           withReuseIdentifier: "CollectionReusableView",
                                                                           for: indexPath) as! CollectionReusableView
    headerView.reuseableVimage ....
    return headerView
default:
    assert(false, "Unexpected element kind")
}
}

It seems there are some changes in swift 3 :/ – rebecca87 May 16 '17 at 15:51 — rebecca87, May 16 '17 at 15:51

Why Collection Reusable View not shown?

2 Answers2