iOS, UICollectionViewCell malformed UILabel - ios

Question

I've got a UICollectionViewController which displays blocks of telephone numbers (see image). When the view loads they all appear fine however when i either begin scrolling, changing rotation, or execute a search function which alters the (mutable) array in which the data is sourced, i see these malformed labels. I did think it might be the iOS simulator however from looking at it, it appears to be an issue with the positioning of UICollectionViewCells.
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor grayColor];
cell.layer.cornerRadius = 5;
[cell setClipsToBounds: YES];
CGRect cellBound = CGRectMake(25, 12.5, 150, 12.5); // x, y, w, h
UILabel *title = [[UILabel alloc] initWithFrame:cellBound];
NSString *number = [[searchNumbers objectAtIndex:indexPath.row] valueForKey:#"number"];
number = [number stringByReplacingOccurrencesOfString:#"+44" withString: #"0"];
title.text = number;
[cell addSubview:title];
return cell;
}
It should be noted that i am using UICollectionViewFlowLayout

Answer 1

As #Woodstock mentioned, this is due to "over-adding" UILabel objects to your cell.
Rather than his solution, which still adds the UILabel to the cell in -collectionView:cellForRowAtIndexPath:, the better MVC solution is this:
// A UICollectionViewCell subclass
// Make sure to pick the correct "init" function for your use case
- (instancetype)init... {
self = [super init...];
if (self != nil) {
[self setupCell];
}
return self;
}
- (void)setupCell {
self.backgroundColor = [UIColor grayColor];
self.clipsToBounds = YES;
self.layer.cornerRadius = 5;
CGRect cellBound = CGRectMake(25, 12.5, 150, 12.5); // x, y, w, h
// Assumes you've set up a UILabel property
self.titleLabel = [[UILabel alloc] initWithFrame:cellBound];
[cell addSubview:self.titleLabel];
}
- (void)configureWithNumber:(NSString *)number {
number = [number stringByReplacingOccurrencesOfString:#"+44" withString: #"0"];
self.titleLabel.text = number;
}
// In your UICollectionViewDataSource/Delegate implementation
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString *identifier = #"cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
NSString *number = [[searchNumbers objectAtIndex:indexPath.row] valueForKey:#"number"];
[cell configureWithNumber:number];
return cell;
}
Basically, you want to set up and add views only when setting up the cell initially. After that, you should pass in a data value/object and configure the cell. If you have cells that need different controls (2 labels vs. 1, etc.), then make multiple subclasses. This way, you encapsulate your classes for cleaner code and better reuse.

Answer 2

I believe this is happening because you are adding more and more UILabel subviews to your cell (over and over again as cellForItemAtIndexPath is called). You need to add a check and only add a label subview if the cell doesn't already have one. The dequeued cells already have the label subview if they're being reused, if this label already exists you simply need to set it's text from your datasource.
Pseudocode:
for subview in subviews {
if subview.isKindOfClass(UILabel) {
// assign the new text label.
}
else
{
// create and add the UILabel subView.
}
}
This is an easy mistake to make as dequeueReusableCellWithReuseIdentifier can either give you a previously used cell OR as you've seen give you a fresh one initially. Which is why the app works correctly when you start, but gets messy as you scroll.