Duplicate data is loading when I scroll the UIColl

Question

Hi I am a beginner in iOS and in my project I have created UICollectionView Programmatically, OK it is working.

But here my problem is when I scroll the CollectionView Duplicate data is loading as seen in below screen.

What did I do here wrong?

Why is duplicate data loading when I scroll the CollectionView?

Please help me.

my code:-

#import "ViewController.h"

@interface ViewController ()
{
     UICollectionView *_collectionView;
     NSArray * images;
     NSArray * description;

     UILabel * NameLabel;
     UIImageView *image;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    images = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"starbucks_coffee.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", @"white_chocolate_donut.jpg", nil];
    description = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"starbucks_coffee.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", @"white_chocolate_donut.jpg", nil];

    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];

    _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) collectionViewLayout:layout];

    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];

    [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView"];

    [_collectionView setBackgroundColor:[UIColor clearColor]];
    self.view.backgroundColor = [UIColor whiteColor];

    [self.view addSubview:_collectionView];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return images.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{


      UICollectionViewCell *cell;

    if (cell == nil) {
        cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

        image =[[UIImageView alloc]init];
        [cell.contentView addSubview:image];

        NameLabel = [[UILabel alloc]init];
        NameLabel.textColor = [UIColor blackColor];
        NameLabel.font = [UIFont systemFontOfSize:15.0];
        [cell.contentView addSubview:NameLabel];

        [image mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(cell.contentView);
            make.centerY.equalTo(cell.contentView);
            make.width.equalTo(@40);
            make.height.equalTo(@40);
        }];

        [NameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(image).offset(35);
            make.left.equalTo(@5);
            make.width.equalTo(@80);
            make.height.equalTo(@40);
        }];
    }

    image.image=[UIImage imageNamed:[images objectAtIndex:indexPath.row]];
    NameLabel.text = [description objectAtIndex:indexPath.row];

    cell.backgroundColor=[UIColor clearColor];

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    return CGSizeMake(70, 70);
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    UIEdgeInsets insets=UIEdgeInsetsMake(10, 10, 10, 10);
    return insets;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {

    return 30.0;
}

Answer 1

-> Put this code above the line where your UIImageView’s object is created

for (id subview in cell.contentView.subviews) {
    if ([subview isKindOfClass:[UIImageView class]]) {
        [subview removeFromSuperview];
    } else if ([subview isKindOfClass:[UILabel class]]) {
        [subview removeFromSuperview];
    }
}

• It will remove subviews of content view of type UILabel and UIImageView.

Using tag:

adding a tag to a view as per you code for UIImageView

self.image.tag = 101;

for UILabel

 self.NameLabel.tag = 102;

remove view using tag

//remove image view
UIView *view = [cell.contentView viewWithTag:101];
[view removeFromSuperview];

//remove label
view = [cell.contentView viewWithTag:101];
[view removeFromSuperview];

Answer 2

move your cell subview creation inside if (cell == nil) condition.

if (cell == nil) {
    cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
    UIImageView *image =[[UIImageView alloc]init];
   [cell.contentView addSubview:image];

   UILabel * NameLabel = [[UILabel alloc]init];
   NameLabel.textColor = [UIColor blackColor];
   NameLabel.font = [UIFont systemFontOfSize:15.0];
   [cell.contentView addSubview:NameLabel];

   [image mas_makeConstraints:^(MASConstraintMaker *make) {
       make.centerX.equalTo(cell.contentView);
       make.centerY.equalTo(cell.contentView);
       make.width.equalTo(@40);
       make.height.equalTo(@40);
   }];

   [NameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       make.top.equalTo(image).offset(35);
       make.left.equalTo(@5);
       make.width.equalTo(@80);
       make.height.equalTo(@40);
   }];
}

image.image=[UIImage imageNamed:[images objectAtIndex:indexPath.row]];
NameLabel.text = [description objectAtIndex:indexPath.row];

if you put the creation outside of it, it will get redrawn each time the cell get reused.