UICollectionView Section headers & footers show wrong way - iOS - swift

Question

The problem is:
SupplementaryView has a textLabel on it, but the text appears at a wrong location while header and footer and textLabel just show right.
As you can see in the picture, only the first section header has a title, other header or footers text is out of sight(they are on the screen but you have to scroll down to see it).
I don't know how to solve it...
I setup my collectionview like following in viewDidLoad function:
func setupCollectionsView(){
let width:CGFloat = self.view.frame.size.width/4
let flowLayout = UICollectionViewFlowLayout()
flowLayout.minimumInteritemSpacing = 5
flowLayout.minimumLineSpacing = 5
flowLayout.estimatedItemSize = CGSizeMake(width, width)
flowLayout.headerReferenceSize = CGSizeMake(self.view.frame.size.width, 30)
flowLayout.footerReferenceSize = CGSizeMake(self.view.frame.size.width, 30)
flowLayout.scrollDirection = UICollectionViewScrollDirection.Vertical
collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: flowLayout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.registerClass(FuncViewCell.self, forCellWithReuseIdentifier: "collectionView")
collectionView.backgroundColor = UIColor.clearColor()
collectionView.registerClass(SupplementaryView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headerView")
collectionView.registerClass(SupplementaryView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "footerView")
self.view.addSubview(collectionView)
}
For each supplementaryview I write this:
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
var view:SupplementaryView?
var title:String = ""
switch kind {
case UICollectionElementKindSectionFooter:
view = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "footerView", forIndexPath: indexPath) as? SupplementaryView
view?.backgroundColor = UIColor ( red: 0.9879, green: 0.3225, blue: 0.4925, alpha: 1.0 )
title = "Footer"
default:
view = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "headerView", forIndexPath: indexPath) as? SupplementaryView
view?.backgroundColor = UIColor ( red: 0.6571, green: 1.0, blue: 0.8628, alpha: 1.0 )
title = "Header"
}
switch indexPath.section {
case 0:
title = "First \(title)"
default:
title = "Second \(title)"
}
view?.setTitle(title)
return view!
}
And my supplementary view implemented this way:
class SupplementaryView: UICollectionReusableView{
var titleLabel:UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
titleLabel = UILabel(frame: frame)
self.addSubview(titleLabel)
let gesture = UITapGestureRecognizer(target: self, action: #selector(SupplementaryView.tap))
self.addGestureRecognizer(gesture)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setTitle(title:String){
print("Label's frame is\(titleLabel.frame)")
titleLabel.text = title
}
func tap(){
print("\(titleLabel.text!) tapped")
}}
PS:I print the frame of each textlabel, they are just in right postion.
.

Answer 1

Change you code as below, and to see if it works
override init(frame: CGRect) {
super.init(frame: frame)
// There should be self.bounds
titleLabel = UILabel(frame: self.bounds)
self.addSubview(titleLabel)
let gesture = UITapGestureRecognizer(target: self, action: #selector(SupplementaryView.tap))
self.addGestureRecognizer(gesture)
}