UICollectionView Headers Overlapping - ios

Question

I have a collectionView with the following relevant methods:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
viewForSupplementaryElementOfKind:(NSString *)kind
atIndexPath:(NSIndexPath *)indexPath {
if (kind == UICollectionElementKindSectionHeader) {
Scoreboard *thisScoreboard = [self.scoreboards objectAtIndex:indexPath.section];
ScoreboardReusableView *view = nil;
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:#"scoreboardHeader"
forIndexPath:indexPath];
//view.backgroundColor = [UIColor yellowColor];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 20)];
//label.text = [NSString stringWithFormat:#"%# vs %#", thisScoreboard.awayteam, thisScoreboard.hometeam];
label.text = [NSString stringWithFormat:#"%ld", (long)indexPath.section];
[view addSubview:label];
return view;
}
return nil;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(self.view.frame.size.width, 34);
}
However, the label text is overlapping. Here are two screenshots of the collectionView. Sections 0 and 1 (notice how the text does NOT overlap):
And sections 2 and 3 (the text overlaps here and on all subsequent section headers):
My header xib ScoreboardReusableView is COMPLETELY blank because no matter what I put in it (e.g., a UILabel or a UIImageView, it would not show up in the UICollectionView Header). Preferably I would design the header in a xib, but since that's not working I tried to do it programmatically, but now labels are overlapping.

Answer 1

Collection views re-use cells and headers. When a header is scrolled offscreen it is added to a queue, and will be re-used for the next header to be scrolled onscreen. That means your configuration code in collectionView:viewForSupplementaryElementOfKind: method will be run again on the same header view at different indexPaths. Since you're just adding a label every time your configuration code runs, they will stack one on top of the other.
The correct approach is to have a label property on the headerView, so that its text can be changed. But...
no matter what I put in it (e.g., a UILabel or a UIImageView), it would not show up
This is your real issue. Do you have autolayout enabled on the xib? If so be sure to add constraints for the label, otherwise it will have zero width and height, giving the effect you describe.

Answer 2

Swift 3 version, hope it helps
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
var reusableview: UICollectionReusableView?
reusableview = nil
reusableview = playersCollectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "collViewHeader", for: indexPath as IndexPath)
if kind == UICollectionElementKindSectionHeader {
//remove all previous subviews:
if let views = reusableview?.subviews {
for view in views {
view.removeFromSuperview()
}
}
//----------
if reusableview == nil {
reusableview = UICollectionReusableView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 50))
}
//init label
let label = UILabel.init(frame: CGRect(x: 10.0, y: 20.0, width: self.view.frame.width-20, height: 25.0)) //-20 from width to make it no go out of screen bounds
label.textColor = UIColor.blue //you may set your color here :)
label.adjustsFontSizeToFitWidth = true
label.text = "your text here"
reusableview?.addSubview(label)
}
return reusableview!
}

Answer 3

ScoreboardReusableView is blank but it was reusable. You must put UILabel into header xib and set text for it after that.
For example:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
if (kind == UICollectionElementKindSectionHeader) {
Scoreboard *thisScoreboard = [self.scoreboards objectAtIndex:indexPath.section];
ScoreboardReusableView *view = nil;
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:#"scoreboardHeader"
forIndexPath:indexPath];
view.label.text = [NSString stringWithFormat:#"%ld", (long)indexPath.section];
return view;
}
return nil;
}

Answer 4

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
UICollectionReusableView *reusableview=nil;
reusableview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:#"HeaderView" forIndexPath:indexPath];
NSArray *viewsToRemove = [reusableview subviews];
for (UIView *v in viewsToRemove) {
[v removeFromSuperview];
}
if (reusableview==nil) {
reusableview=[[UICollectionReusableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 30)];
}
reusableview.backgroundColor=[UIColor colorWithRed:234.0/255.0 green:234.0/255.0 blue:234.0/255.0 alpha:1.0];
UILabel *lblTitle=[[UILabel alloc] initWithFrame:CGRectMake(10, 0, [UIScreen mainScreen].bounds.size.width-90, 30)];
[lblTitle setFont:[UIFont fontWithName:#"Ubuntu-Light" size:12]];
lblTitle.textColor=HTAtHomeColor;
[reusableview addSubview:lblTitle];
UILabel *lblCount=[[UILabel alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width-80, 0, 70, 30)];
lblCount.textAlignment=NSTextAlignmentRight;
lblCount.textColor=[UIColor blackColor];
[lblCount setFont:[UIFont fontWithName:#"Ubuntu-Light" size:12]];
lblCount.text=[NSString stringWithFormat:#"%d Section Header",indexPath.row];
[reusableview addSubview:lblCount];
return reusableview;
}
return nil;
}