滚动 UICollectionView 时正在加载重复数据

Question

您好，我是 iOS 的初学者，在我的项目中，我以编程方式创建了 UICollectionView，它可以正常工作。

但这里我的问题是当我滚动 CollectionView 时正在加载重复数据，如下面的屏幕所示。

我在这里做错了什么？

为什么滚动 CollectionView 时会加载重复数据？

请帮帮我。

我的代码：-

#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

-> 将此代码放在创建 UIImageView 对象的行上方

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

• 它将删除 UILabel 和 UIImageView 类型的内容视图的子视图。

使用标签：

根据您的代码向视图添加标签 对于 UIImageView

self.image.tag = 101;

对于 UILabel

 self.NameLabel.tag = 102;

使用标签删除视图

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

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

Answer 2

将您的单元格子视图创建移动到if (cell == nil) 条件内。

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];

如果您将创建放在它之外，则每次重复使用单元格时都会重新绘制它。